Problema con efecto Accordion en AJAX

Tengo un problema con el efecto Accordion en AJAX, cuento con un archivo el cual realiza una consulta y la muestra dentro de la misma página, utilizando AJAx, en esta misma página en los resultados mostrados quiero que se muestre el efecto, pero el efecto no se realiza, pienso que el error esta dentro de la capa de resultado no se puede llamar a otra función o script, ya que lo he probado fuera de esta capa y funciona correctamente, no se si este sea el problema.
Aquí muestro parte del código de la página...!
Aquí todos los scripts que utilizo.. Y los css a los que hago referencia..
<link rel="STYLESHEET" type="text/css" href="estilo.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>
<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
<div id="apDiv1">
<table width="662" border="0" align="left">
<tr>
<td width="542"> 
<!-- Aqui comienza el codigo para realizar el efecto del Accordion-->
<div id="accordion">
<dl class="accordion" id="slider">
<div id="resultado">
En esta capa muestro el resultado arrojado de la consulta
</div>
</dl>
        </div>
<!--Aqui el script que hace que el efecto recorra hacia arriba o abajo-->
<script type="text/javascript">
            var slider1=new accordion.slider("slider1");
            slider1.init("slider");
            var slider2=new accordion.slider("slider2");
            slider2.init("slider2",0,"open");
        </script>
</td>
</tr>
</table>
</div>
            <?php
            include 'calendario.php';
            ?></p>
Archivo ajax.js
function nuevoAjax(){
 var xmlhttp=false;
  try {
   xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
   try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (E) {
    xmlhttp = false;
   }
   }
 if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
   xmlhttp = new XMLHttpRequest();
 }
 return xmlhttp;
}
function enviarDatosConsulta(dia,mes,ano){
    contenedor = document.getElementById('resultado');
    ajax=nuevoAjax();
 ajax.open("POST", "mostrar_resultados.php",true);
        ajax.onreadystatechange=function() {
  if (ajax.readyState==4) {
   contenedor.innerHTML = ajax.responseText
  }
 }
        ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 ajax.send("dia="+dia+"&nuevo_mes="+mes+"&nuevo_ano="+ano)
}

2 respuestas

Respuesta
1
Al parecer la pregunta esta repetida,
Pero que tienes en :
"mostrar_resultados.php", ¿Es decir que es lo que vas a mostrar? Algunas veces suceden problemas con los tags div / span / etc, presiento que es por ahí el error.
Hola, disculpa es que en ese momento fallo mi conexión y no me percate si ya la había enviado... En el archivo de "mostrar_resultados.php" no tengo más que la consulta que realizo a la BD y la impresión de los resultados.. aquí el código:
<?php
require 'ConexionBD.php';
$conexion = new ConexionBD();
$conexion->conectar();
if(isset ($_POST['dia'])) {
    if($_POST['dia']<10)
        $dia_sel="0".$_POST['dia'];
    else
        $dia_sel=$_POST['dia'];
    if($_POST['nuevo_mes']<10)
        $mes_sel="0".$_POST['nuevo_mes'];
    else
        $mes_sel=$_POST['nuevo_mes'];
    $fecha =$_POST['nuevo_ano']."-".$mes_sel."-".$dia_sel;
    //$query = "SELECT * FROM programacion WHERE Fecha='$fecha'";
 $query = "     SELECT programacion.Idprogramacion,programacion.Hora AS Hora, programacion.Nombre AS Nombre, programas.Categoria AS Categoria,
                       Programas. Descripción AS Descripción, programas. Barra AS Barra, programas. Video AS Video, programas. Imagen AS Imagen
                FROM programacion, programas
                WHERE programacion.Nombre = programas.Nombre AND Fecha ='$fecha' ORDER BY Idprogramacion";
    $result = @mysql_query($query);
    $numero_filas = mysql_num_rows($result);
    if ($numero_filas==0)
        echo "No hay Programas en esta fecha";
    else {
        ?>
<table width="434" border="0" align="center" >
<tr>
<td width="59">Hora:</td>
<td width="59">Nombre:</td>
</tr>
        <?php
            while($row = mysql_fetch_array($result)) {
                echo "
<tr style=background-color:#f9f9f9 onmouseover=this.style.backgroundColor='#FF8500' onmouseout=this.style.backgroundColor='#f9f9f9'>
";
                echo "
<td>".$row['Hora']."</td>
";
                echo "
<td>".$row['Nombre']."</td>
";
                echo "
</tr>
";
            }
            ?>
</table>
        <?php
    }
}
?>
Gracias, espero puedas ayudarme..!
Muy bien, entonces si no realizas lo del efecto, ¿la información si se muestra?
¿El problema es unicamente con el menú de acordeón correcto?,
Te recomiendo eliminar los tags php, para esto, ya que eso lo estas dejando como html, y necesita todo estar como php: agregale el echo y corrige las comillas:
if ($numero_filas==0)
        echo "No hay Programas en esta fecha";
    else {
echo '
<table width="434" border="0" align="center" >
<tr>
<td width="59">Hora:</td>
<td width="59">Nombre:</td>
</tr>
';
     while($row = mysql_fetch_array($result)) {
                Echo "...
Disculpa te envíe un código equivocado.. =s bueno como veras tengo ya muchas versiones intentando hacer que funicone, pero no se deja...=( el código es el siguiente:
<?php
require 'ConexionBD.php';
$conexion = new ConexionBD();
$conexion->conectar();
if(isset ($_POST['dia'])) {
    if($_POST['dia']<10)
        $dia_sel="0".$_POST['dia'];
    else
        $dia_sel=$_POST['dia'];
    if($_POST['nuevo_mes']<10)
        $mes_sel="0".$_POST['nuevo_mes'];
    else
        $mes_sel=$_POST['nuevo_mes'];
    $fecha =$_POST['nuevo_ano']."-".$mes_sel."-".$dia_sel;
    //$query = "SELECT * FROM programacion WHERE Fecha='$fecha'";
 $query = "     SELECT programacion.Idprogramacion,programacion.Hora AS Hora, programacion.Nombre AS Nombre, programas.Categoria AS Categoria,
                       programas.Descripcion AS Descripcion,programas.Barra AS Barra,programas.Video AS Video
                FROM programacion, programas
                WHERE programacion.Nombre = programas.Nombre AND Fecha ='$fecha' ORDER BY Idprogramacion";
    $result = @mysql_query($query);
    $numero_filas = mysql_num_rows($result);
    if ($numero_filas==0)
        echo "No hay Programas en esta fecha";
    else {
         while($row = mysql_fetch_array($result)) {
                        ?>
                <dt><?php echo $row['Hora']; ?>  || <?php echo $row['Nombre']; ?> </dt>
                <dd>
                    <span>
<table>
<tr>
<td width="87">Categoria:</td>
<td width="137"> <?php echo $row['Categoria'];?></td>
</tr>
<tr>
<td>Descripcion:</td>
<td> <?php echo $row['Descripcion'];?></td>
</tr>
<tr>
<td>Barra:</td>
<td> <?php echo $row['Barra'];?></td>
</tr>
</table>
<table>
<tr>
<td width="225"><center> <video src="VIDEOS/<?php echo $row['Video'];?>" width="320" height="240" controls autoplay></video></center></td>
</tr>
</table>
                    </span>
                </dd>
                        <?php
                    }
    }
}
?>
Ahí van incluidas las etiquetas <dd> y<dt> que utiliza el Accordion.. supongo que el procedimiento que me indicaste anteriormente es el mismo aquí..!
Gracias amigo..!
La recomendación es la misma, TODO manéjalo con el php, no dejes HTML suelto, todo almacenalo en las etiquetas de PHP, con los echos...
Te comento esto ya que muchas veces el explorador y dependiendo versiones, tipo de explorador y configuraciones de usuario, los tags sueltos de html no se combinan correctamente con php, y mucho menos el javascript, por lo que es un error bastante común el que te comento.
Hola..!
Ya lo probé así y no me funciono.. voy a revisar bien todo, para ver si no se me esta colando algún errorcillo por ahí..!
Gracias, te comento después los resultados..!
Pruébalo tal como te lo digo
Ya que en los menús desplegables en javascripts, hay conflictos con el uso de span, divs, tables, para ajax
Que tal amigo..!
Te comento.. sigue igual sin funcionar... ya revise bien y no entiendo el porque...
Saludos..!
¿Cuál fue tu último código que intentaste, cambiaste finalmente lo del HTML?
Si, todos los tags de HTML los metí dentro del echo.. pero no funciono...=(
Estoy pensando seriamente en no hacerlo con AJAX, solamente utilizar PHP y mostrar ahí mismo los resultados de la consulta...=(
Amigo pégame el ultimo código que tengas, para darle una revisada parte por parte, intenta no mostrar toda la tabla completa, intenta a mostrar una sola palabra en el echo. Para ver si es problema del ajax, o del php
Bien, agradezco tu interés en verdad..!
mostrar_resultados.php
<?php
require 'ConexionBD.php';
$conexion = new ConexionBD();
$conexion->conectar();
if(isset ($_POST['dia'])) {
    if($_POST['dia']<10)
        $dia_sel="0".$_POST['dia'];
    else
        $dia_sel=$_POST['dia'];
    if($_POST['nuevo_mes']<10)
        $mes_sel="0".$_POST['nuevo_mes'];
    else
        $mes_sel=$_POST['nuevo_mes'];
    $fecha =$_POST['nuevo_ano']."-".$mes_sel."-".$dia_sel;
    //$query = "SELECT * FROM programacion WHERE Fecha='$fecha'";
    $query = "     SELECT programacion.Idprogramacion,programacion.Hora AS Hora, programacion.Nombre AS Nombre, programas.Categoria AS Categoria,
                       Programas. Descripción AS Descripción, programas. Barra AS Barra, programas. Video AS Video, programas. Imagen AS Imagen
                FROM programacion, programas
                WHERE programacion.Nombre = programas.Nombre AND Fecha ='$fecha' ORDER BY Idprogramacion";
    $result = @mysql_query($query);
    $numero_filas = mysql_num_rows($result);
    if ($numero_filas==0)
        echo "No hay Programas en esta fecha";
    else {
        while($row = mysql_fetch_array($result)) {
            echo "
    <dt>$row[Hora]  || $row[Nombre]</dt>
                   <dd>
                      <span>
<table>
<tr>
<td width='87'>Categoria:</td>
<td width='137'>$row[Categoria]></td>
</tr>
<tr>
<td>Descripcion:</td>
<td>$row[Descripcion]</td>
</tr>
<tr>
<td>Barra:</td>
<td>$row[Barra]</td>
</tr>
</table>
<table>
<tr>
<td width='225'><center> <video src='VIDEOS/<?php echo $row[Video]' width='320' height='240' controls autoplay></video></center></td>
</tr>
</table>
                    </span>
                </dd>
            ";
        }
    }
}
Lo que tengo en la principal: Programacion.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Programacion</title>
<link rel="STYLESHEET" type="text/css" href="estilo.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>
<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
<style type="text/css">
            <!--
            #apDiv1 {
                position:absolute;
                left:145px;
                top:241px;
                width:660px;
                height:56px;
                z-index:1;
            }
            -->
        </style>
</head>
<body>
<div id="apDiv1">
<table width="662" border="0" align="left">
<tr>
<td width="542"> 
<div id="accordion">
            <dl class="accordion" id="slider">
<div id="resultado">    Hola..como estas..!!!</div>
</dl>
        </div>
<script type="text/javascript">
            var slider1=new accordion.slider("slider1");
            slider1.init("slider");
            var slider2=new accordion.slider("slider2");
            slider2.init("slider2",0,"open");
        </script>
</td>
</tr>
</table>
</div>
<div align="center"><img src="../../KWFIGG/images/headerKW.png" width="950" height="108"><br>
        </div>
<p>
            <?php
            include 'calendario.php';
            ?></p>
<table border="0" align="center">
<tr>
<td width="654"></td>
<td width="296">
<div id="calendario" />
                    <?php
                    if (!$HTTP_POST_VARS && !$HTTP_GET_VARS) {
                        $tiempo_actual = time();
                        $mes = date("n", $tiempo_actual);
                        $ano = date("Y", $tiempo_actual);
                        $diaActual = date("j", $tiempo_actual);
                        ?>
<script type="text/javascript">enviarDatosConsulta(<?echo $diaActual;?>,<?echo $mes;?>,<?echo $ano;?>)</script>
                        <?php
                    }else {
                        $mes = $nuevo_mes;
                        $ano = $nuevo_ano;
                    }
                    mostrar_calendario($mes,$ano);
                    ?>
                </td>
</tr>
</table>
<p> </p>
<p> </p>
</body>
</html>
$result = @mysql_query($query);
Amigo deberías quitarle el @
Una pregunta, ¿ahorita así hasta donde esta funcionando?, ¿Qué aparece?, ¿Qué te regresa el ajax?
Bien, muestra bien los resultados de la consulta.. el único problema que tengo es con el Accordion me lo muestra abierto... y no se cierra..!
Debería de aparecer cerrado y al momento de darle clic abrirse para mostrar la demás información...
He ahí mi problema...=(
Podría ser el javascript del accordion, que este por ejemplo con el evento "onchange" y por eso al recibir un cambio en el accordion, lo abra, si por ejemplo en vez de imprimir el echo con todo lo que trae la consulta, simplemente pones
echo 'opcion1';
?
Nop..sigue igual.. no sale...=(
creo que podria ser el metodo como dices...!!=s
Saludos amigo espero hayas completado con tu acordeón
www.krowmx.com
Lamentablemente no pude.. me di por vencido y le quite el AJAX.. solo utilice PHP.. te agradezco tu tiempo y atención...!
=)
Espero tu calificación!
Saludos!
WWW.KROWMX.COM
Respuesta
1
¿El efecto que quieres conseguir es que el script se ejecute cuando haga la consulta ajax?
Si ésto es así, necesitas crear una función y llamarla después de la línea:
contenedor.innerHTML = ajax.responseText
Porque tal y como muestras en el ejemplo, el script se ejecuta cuando se carga la página, no cuando realiza la consulta.
Como falta parte del códgio del Accordion no te puedo ayudar en mucho más.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas