Hola! Bueno, estoy haciendo una web, en el index.php cargo en un div otra página mediante ajax, utilizo pushstate para que al refrescar la página o retroceder en el navegador funcione de manera correcta. Hasta aquí todo bien, el problema viene que el código javascript no me funciona bien en la página cargada con ajax.
En mi index.php tengo un menú con el cual cargo en un div otras páginas:
Código PHP:
<div class="menuVert">
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a href='#' class="ajax" data-page="home">Inicio</a>
</b:loop>
</b:if>
</span>
<hr id="lineH">
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a href='#' class="ajax" data-page="perfiles">Mi Perfil</a>
</b:loop>
</b:if>
</span>
<hr id="lineH">
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a href='#' class="ajax" data-page="publicaciones">Publicaciones</a>
</b:loop>
</b:if>
</span>
<hr id="lineH">
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a href='#' class="ajax" data-page="foro">Foro de ayuda</a>
</b:loop>
</b:if>
</span>
<hr id="lineH">
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a href='#' class="ajax" data-page="encuesta">Encuestas</a>
</b:loop>
</b:if>
</span>
<hr id="lineH">
<script type="text/javascript">
//CARGAR PAGINA CON AJAX-------------------------------------
if (window.location.hash) {
loadPartial(window.location.hash.replace("#", ""));
}
window.onpopstate = function(evt) {
if (evt.state && evt.state.page) {
loadPartial(evt.state.page);
}
}
var anchors = document.getElementsByClassName("ajax");
for (var i = 0;i < anchors.length;i++) {
anchors[i].onclick = function() {
var page = this.getAttribute("data-page");
loadPartial(page);
return false;
}
}
function loadPartial(page,add) {
xhr = new XMLHttpRequest();
xhr.open("GET", '' + page + ".php");
history.pushState({page: page}, page.toUpperCase(), "#" +page );
xhr.onreadystatechange = function() {
//para poder cargar el javascript de la página que se va a cargar utilizo este código (no se si aquí puede que este el error):
var scs= xhr.responseText.extractScript(); //extraemos los srcipts
document.getElementsByClassName("publicacion")[0].innerHTML = xhr.responseText; //eliminamos lo innecesario
scs.evalScript(); //interpretamos todo
}
xhr.send();
}
</script>
</div>
<div id="publicacion" class="publicacion">
<?php include('home.php');
?>
</div>
esta es una de las páginas que cargo con ajax:
home.php
Código PHP:
<?php
session_start();
$ultimo=$_GET['ultimo'];
$flag=$_GET['flag'];
require.........
if($flag!="recargar"){
........
?>
<script type="text/javascript">
//----------MENU opciones ------------------------------
$(document).ready(function(){
$('.menuOp').fixedMenu();
});
//-----------------FIN-----------------------
$(document).ready(function(){
var flag=0;
//Función principal
function recarga(num)
{
flag++;
if (flag==1) {
//Adquiere como parámetro la id del último class datos y carga la imagen animada
$('#cargador').html('<img id="loading" src="imagenes/cargando.gif">');
$.get("home.php?flag=recargar&ultimo="+num,function(conmutador){
flag=0;
var respuesta=conmutador.length;
var numero="<?php echo $numero ?>";
//El número de caracteres de la última petición son 20. Se utiliza para detectar que ya no hay más resultados.
if(num<numero){
if (respuesta>10) {
$(".datos:last").after(conmutador).delay(1000);
}else {
$('#cargador').empty();
}
}else{
$('#cargador').empty();
}
});
}else {
flag=0;
}
};
// Función que calcula donde se encuentra el scroll. Si se encuentra en la parte inferior llama a la función recarga y le envía el parámetro num
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
var num=$(".datos:last").attr("id");
recarga(num);
}
});
});
</script>
<div id="publicar">
<? include "publicacion.php"; ?>
</div>
<?php
$sql="SELECT * FROM........
while ($fila = mysql_fetch_array($Lista)) {
$menu = "<div class='menuOp'><ul><li><a><div class='imgOp'></div></a>";
$menu .= "<ul><li><a href='#'>Editar publicación</a></li><li><a href='eliminar.php?elemento=$idPerfil' class='eliminar'>eliminar publicación</a></li>";
$menu .= "<li><a href='#'>Ir a mis Publicaciones</a></li><li><a href='#''>Ayuda</a></li></ul></li></ul></div>";
echo "<div id='".$num."' class='datos'><div id='headPub'><img id='imgUsPub' src='".$FotoUs."'><b>$Usuario</b> ha publicado:</div>";
echo $menu;
echo "<textarea id='txtPublic' readonly>$Publicacion</textarea><br><br><img src='uploads/redimensiones/$foto'></div>";
}
?>
<div id="cargador"></div>
<?php
mysql_close();
}else{
while ($fila = mysql_fetch_array($Lista)) {
$ultimo=$_GET['ultimo'];
$ultimo=$ultimo+1;
$sql="SELECT * FROM........
$menu = "<div class='menuOp'><ul><li><a><div class='imgOp'></div></a>";
$menu .= "<ul><li><a href='#'>Editar publicación</a></li><li><a href='eliminar.php?elemento=$idPerfil' class='eliminar'>eliminar publicación</a></li>";
$menu .= "<li><a href='#'>Ir a mis Publicaciones</a></li><li><a href='#''>Ayuda</a></li></ul></li></ul></div>";
}else if($foto!="" && $Publicacion!=""){
echo "<div id='".$num."' class='datos'><div id='headPub'><img id='imgUsPub' src='".$FotoUs."'><b>$Usuario</b> ha publicado:</div>";
echo $menu;
echo "<textarea id='txtPublic' readonly>$Publicacion</textarea><br><br><img src='uploads/redimensiones/$foto'></div>";
$ultimo++;
}
mysql_close();
}
?>
Como ven en home.php cargo una lista desde una base de datos, y utilizo javascript y php para cargar la lista cada 10 filas mientras baja el scroll. Los problemas que se me presentan son:
1. por cada fila que cargo hay un menú despegable (class= 'menuOP') que funciona con javascript, al cargar la página funciona todo bien, cuando bajo con el scroll y carga las 10 siguientes filas no se puede desplegar el menú de estos, supongo que el código javascript no funciona o es que se duplica, no tengo idea.
2. Cuando cargo otra página después de otra mediante el menú principal (class='menuVert') las 10 1ras filas cargan normal y funcionan sus menús, pero si bajo el scroll y cargo 10 más estas no funcionan sus menús y las últimas filas que cargan salen duplicadas. Esto no me sucedía hasta que modifiqué el código Ajax para que funcione el javascript de las páginas cargadas.