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

Consulta base de datos con AJAX y PHP

Tengo un problema no logro realizar una consulta a base de datos mediante un formulario utilizando AJAX, la página no me muestra nada... Encontré un ejemplo en la red pero utiliza una lista desplegable en donde realiza una consulta a la base de datos...
1 respuesta

Paginador con php mysql y ajax

Que tal tengo el siguiente código de un paginador y listador de noticias, que no le puedo complementar con un leer más, está hecho con php, mysql y ajax, a ver si me puedes dar una mano gracias <?php require('dbconexion.php'); $RegistrosAMostrar=3;...
1 respuesta

Llenar arreglo desde formulario

Gusto en saludarte, tengo un problema que no he podido solucionar, tengo un formulario con 2 cajas de texto más un botón, en donde el usuario deberá ingresar los códigos del productos que desea comprar más la cantidad y al presionar el botón estos...
1 respuesta

Validar datos en base de datos

Tengo un problemita con un formulario los datos ingresan bien a la base de datos esta todo prefecto pero el problema es que hay usuarios que se registran más de 2 veces lo que quiero hacer es que cuendo se registre le salga un mensaje de que su...
3 respuestas

Php a excel

Soy novata en php y estoy desarrollando una aplicación que a la hora de mostrar un listado debe contar con un botón que permita exportar dicho listado a una hoja Excel.
2 respuestas

No entiendo el error de MySQL en el código de la validación de una consulta

Tengo el siguiente caja de texto que quiero validar dela siguiente forma Ingreso ip: <html> <head> <title>//</title> <script> function chk_usuario(){ var pos_url = 'run.php'; var nombre = document.getElementById('ip').value; var req = new...
1 respuesta

Error en la multiplicacion de varias filas

Tengo un problema con el siguiente codigo. La funcion multiplica solo se ejecuta para la primera fila, pero a medida que ingreso nuevas filas no se ejecuta los mismo me sucede con el combo box que esta en la columna de tipo de gasto Necesito que me...
1 respuesta

Tomar una o más variables en select mysql

Por más que busco y re busco, no logro entender la manera de tomar una o más variables de un form para un select en mysql. Ya sé que esta pregunta la han hecho antes, pero precisamente he seguido todos los ejemplos y respuestas dadas aquí mismo y no...
1 respuesta

Combos dinámicos combinados

Trabajo con Dreamweaver Ultradev en php y mysql y necesito relacionar tres Combos dinámicos, de forma tal que al seleccionar un valor del primero muestre como resultado un conjunto de valores del segundo y a su vez del tercero Ejemplo ComboPais=...
1 respuesta

Validación de campos vacíos en Php

Quiero preguntarte de que manera en php puedo hacer la validación de que un usuario no deje campos vacíos al momento de insertar de registros a una base de datos, pues tengo el siguiente código : if($Nombre4 == ""){ echo "<script>alert(\"Debes de...
1 respuesta