Hola amigos, resulta que estoy hecho un lío. Tengo en mi web un código jquery que carga contenido de manera dinámica en un determinado div.
Lo malo es que estoy un poco pegado con el uso de javascript y no sé ni por donde meterle mano.
Me gustaría poder compartir el contenido generado, por ejemplo la url
http://www.example/#cuatro pero en realidad esa url no existe, ya que al intentar compartirlo siempre irá a
http://www.example/También me gustaría que los botones de adelante, atrás y refrescar del navegador funcionasen, ya que con el contenido dinámico siempe me lleva a
http://www.example/ nuevamente.
El código jquery que carga contenido dinámico es este:
$.fn.imagesLoaded = function () {
$imgs = this.find('img[src!=""]');
if (!$imgs.length) {return $.Deferred.resolve().promise();}
var dfds = [];
$imgs.each(function(){
var dfd = $.Deferred();
dfds.push(dfd);
var img = new Image();
img.onload = function(){dfd.resolve();}
img.src = this.src;
});
return $.when.apply($,dfds);
}
var disc = function(div,of){
$(div).hide();
$('#loading-discografia').show();
var ajax = $.ajax({url : of, type : "GET", cache: false});
ajax
.done(function(response){
Commons.sorDone(div, response);
})
.fail(function(){
Commons.sorFail(div);
});
}
Commons = {
sorDone : function (div, response) {
$(div).html(response).imagesLoaded().then(function(){
FB.XFBML.parse(document.getElementById('#comentarios-disco'));
twttr.widgets.load();
$('#loading-discografia').hide();
$(div).show();
});
},
}
Y este es el index donde se va cargando el contenido:
<!DOCTYPE html>
<html lang="es">
<title>Example</title>
<link href="<?php $_SERVER['DOCUMENT_ROOT']?>/estilo.php" rel="stylesheet" type="text/css" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/></script>
</head>
<body>
<div id="center">
<div id="buttons">
<a href="#one" onClick="disc('#contenido','one.php')" >1</a>
<a href="#two" onClick="disc('#contenido','two.php')" >2</a>
<a href="#three" onClick="disc('#contenido','three.php')" >3</a>
<a href="#four" onClick="disc('#contenido','four.php')" >4</a>
<a href="#five" onClick="disc('#contenido','five.php')" >5</a>
<a href="#six" onClick="disc('#contenido','six.php')" >6</a>
<a href="#seven" onClick="disc('#contenido','seven.php')" >7</a>
</div>
<div id="contenido">
<div id="loading-discografia">
<div class="gif-cargando">
<img src="/discografia/load/progress.gif" alt=""/>
</div>
</div>
</div>
</body>
</html>
Algún experto me podría echar una mano? estoy muy perdido con javascript, vamos que no tengo ni idea.
![[facepalm]](/images/smilies/facepalm.gif "facepalm")
