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> 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();
}
?> 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.
