A ver, seré más específico. Este es el código de mi index.php:
Código PHP :
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-escale=1.0, maximun-scale=1.0, minimum-scale=1.0">
<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="interpretadorAjax.js"></script>
<script type="text/javascript" src="js/jquery.fixedMenu.js"></script>
<script type="text/javascript" src="js/function.js"></script>
<script type="text/javascript" src="js/autosize.js"></script>
<link rel="stylesheet" type="text/css" href="fixedMenu_style2.css" />
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
//----------MENU DE SESSION-------------
$(document).ready(function(){
$('.menull').fixedMenu();
});
</script>
</head>
<body>
<center>
<header id="head">
<div id="title1"><h1>AQUI VA EL TITULO</h1></div>
<div id="login">
<div id='User'><div class="userlink"><img class="imgUser" src="<?php echo $FotoUsActive; ?>"><?php echo $UserSession; ?></div>
<div class="menull">
<ul>
<li>
<a><div class="imgCon"></div></a>
<ul>
<li><a href="#">Configuracion de cuenta</a></li>
<li><a href="#">Mi Perfil</a></li>
<li><a href="logout.php">Cerrar session</a></li>
<li><a href="#">Ayuda</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</header>
<div id="cuerpoInd">
<div id="menu"><div id="menuCon">
<?php //include('menu.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">
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a href='#' class="ajax" data-page="comunidad">Comunidad</a>
</b:loop>
</b:if>
</span>
</div>
<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() {
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>
<div id="contenido">
<div id="publicacion" class="publicacion">
<?php include('home.php');
?>
</div>
</div>
<div id="news">
</div>
</div>
<div id="chat">
<?php
include('chat.php');
?>
</div>
<script>
autosize(document.querySelectorAll('textarea'));
</script>
<?php
}
?>
</center>
</body>
</html>
para poder cargar el javascript de la página que se va a cargar utilizo este código:
Código Javascript :
var scs= xhr.responseText.extractScript(); //extraemos los srcipts
document.getElementsByClassName("publicacion")[0].innerHTML = xhr.responseText; //eliminamos lo innecesario
scs.evalScript(); //interpretamos todo
}
esta es una de las páginas que cargo con ajax:
Código PHP :
<?php
session_start();
$ultimo=$_GET['ultimo'];
$flag=$_GET['flag'];
require 'BD.php';
include('conDB.php');
include("file_type.php");
$idUserSession = $_SESSION['idUsuario'];
if($flag!="recargar"){
$sql2="SELECT * FROM perfiles";
$result = mysql_query($sql2,$conexion);
$numero = mysql_num_rows($result);
$numero = $numero -1;
//mysql_close();
?>
<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 usuarios,perfiles WHERE usuarios.idUsuario=perfiles.idUsuario ORDER BY idPerfil DESC LIMIT 0,10";
$Lista= mysql_query($sql,$conexion);
$i=1;
while ($fila = mysql_fetch_array($Lista)) {
$Usuario = $fila['Usuario'];
$Publicacion = $fila['Comentario'];
$foto = $fila['Fotos'];
$fileName = $fila['File'];
$imgMostrar = checkFile($fileName);
$idPerfil = $fila['idPerfil'];
$num=$i;
$idUsuari = $fila['idUsuario'];
$Foto = $fila['FotoUser'];
$FotoUs = "perfiles/user/".$Foto."";
//----Mostrar opciones si eres user o no
if ($idUsuari==$idUserSession) {
$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{
$menu = "<div class='menuOp'><ul><li><a><div class='imgOp'></div></a>";
$menu .= "<ul><li><a href='#'>Ver publicaciones del contacto</a></li><li><a href='eliminar.php?elemento='>Acerca del contacto</a></li>";
$menu .= "<li><a href='#'></a></li><li><a href='#''>Ayuda</a></li></ul></li></ul></div>";
}
if($foto=="" && $fileName==""){
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></div>";
//foto y comentario
}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>";
//si solo hay foto
}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 "<img src='uploads/redimensiones/$foto'></div>";
//si hay archivo y comentario
}else if($fileName!="" && $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><a alt='Descargar' href='download.php?file=$fileName'><img id='imgfile' src='$imgMostrar'></a><div>$fileName</div></div>";
}
$i++;
}
?>
<div id="cargador"></div>
<?php
mysql_close();
}else{
$ultimo=$_GET['ultimo'];
$ultimo=$ultimo+1;
$sql="SELECT * FROM usuarios,perfiles WHERE usuarios.idUsuario=perfiles.idUsuario ORDER BY idPerfil DESC LIMIT $ultimo,10";
$Lista= mysql_query($sql,$conexion);
while ($fila = mysql_fetch_array($Lista)) {
$Usuario = $fila['Usuario'];
$Publicacion = $fila['Comentario'];
$foto = $fila['Fotos'];
$fileName = $fila['File'];
$imgMostrar = checkFile($fileName);
$idPerfil = $fila['idPerfil'];
$idUsuari = $fila['idUsuario'];
$Foto = $fila['FotoUser'];
$FotoUs = "perfiles/user/".$Foto."";
$num=$ultimo;
if ($idUsuari==$idUserSession) {
$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{
$menu = "<div class='menuOp'><ul><li><a><div class='imgOp'></div></a>";
$menu .= "<ul><li><a href='#'>Ver publicaciones del contacto</a></li><li><a href='eliminar.php?elemento='>Acerca del contacto</a></li>";
$menu .= "<li><a href='#'></a></li><li><a href='#''>Ayuda</a></li></ul></li></ul></div>";
}
if($foto=="" && $fileName==""){
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></div>";
//foto y comentario
}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>";
//si solo hay foto
}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 "<img src='uploads/redimensiones/$foto'></div>";
//si hay archivo y comentario
}else if($fileName!="" && $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><a alt='Descargar' href='download.php?file=$fileName'><img id='imgfile' src='$imgMostrar'></a><div>$fileName</div></div>";
}
$ultimo++;
}
mysql_close();
}
?>
<script type="text/javascript">
$('.eliminar').click(function(event){
//event.preventDefault();
return confirm("¿Realmente desea eliminar esta publicación?");
});
</script>
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.
No se si el problema es que los scripts se estan duplicando y almacenando mientras cargo más cosas no se me ocurre otra, ahora como lo soluciono, si alguien me ayuda se lo agradecería. Y perdón por lo grande de la publicación pero deseo ser lo más detallado para que no queden dudas.
