Wenas de nuevo... cuanto tiempo jiji.
En fin, el caso es que he empezado un poco con AJAX y ya estoy haciendo cosillas que como es evidente no me salen ggg.
Quiero hacer un desplegable de unos listados... pero el primer listado se me abre en el segundo "elemento" y el segundo funciona bien, sé casi seguro que es de sintaxis mía o algún error de DOM que cometo.
Lo mismo al ser elementos hijos de otro que quizás cause ese fallo aún teniendo id's distintos.. bueno, fuera rollos porque lo que vale es esto:
Archivo
XHTML (index.php): Código HTML:
<!-- FILES list -->
<div id="listas">
<?php
AjaxRequest("req_cat","Lista de Categorias","/*Server*//ad/list_cat.php","<h3>Categorías<h3>");
?>
<ul id="Lista de Categorias"></ul> <!-- Aquí se volcará la Respuesta a "req_cat" -->
<?php
AjaxRequest("req_fil","Lista de Archivos","/*Server*//ad/list_fil.php","<h3>Archivos<h3>");
?>
<ul id="Lista de Archivos"></ul> <!-- Aquí se volcará la Respuesta a "req_fil" -->
<!-- Pues la lista de categorias me aparece aquí abajo en la lista: Lista de Archivos -->
</div>
<!-- end FILES list --> Pues eso, la Lista de Categorías me aparece abajo aunque funciona bien...
He probado a usar solo <div> entre otras cosas y nada...
Funcion
AjaxRequest en
PHP (Omitid el parametro $format por ahora =P ):
Código PHP:
// $n_func: Nombre_de_la_Funcion.
// $output: ID de donde se mostrarán los Datos.
// $ajurl: Origen de los Datos.
// $format: Formato HTML después del script (Array):
// Antes, Texto, Despues.
function AjaxRequest($n_func,$output,$ajurl,$format="") {
echo "
<script>
// Fallo General:
function failure($n_func) {
alert('Error 404: location \"' + $n_func.statusText + '\" no se encontró.');
}
// Fallo 404:
function failure404($n_func) {
alert('Error: location \"' + $n_func.status + ' -- ' + $n_func.statusText);
}
// Completa:
function Complete($n_func)
{
$('$output').innerHTML = $n_func.responseText;
Element.hide('loading_$output');
Element.show('$output');
new Effect.Highlight('$output');
Element.hide('Mostrar $output');
Element.show('Esconder $output');
}
var opt = {
// Use POST
method: 'post',
// Datos
postBody: '$ajurl',
// Complete:
onComplete: function($n_func){ Complete($n_func) },
// Error 404
on404: function($n_func){ failure404($n_func) },
// Otros Errores
onFailure: function($n_func){ failure($n_func) }
}
</script>
<img onclick=\"Element.show('loading_$output');new Ajax.Request('$ajurl', opt); return false;\"
src=\"".get_bloginfo('template_url')."/img/display_element.png\" alt=\"Mostrar $output\" id=\"Mostrar $output\" />
<img onclick=\"Element.hide('$output'); Element.show('Mostrar $output'); Element.hide('Esconder $output'); return false;\"
src=\"".get_bloginfo('template_url')."/img/close_element.png\" alt=\"Esconder $output\" id=\"Esconder $output\"
style=\"display: none;\" /> $format
<div id=\"loading_$output\" style=\"display: none\" />
<img src=\"".get_bloginfo('template_url')."/img/loading.gif\" alt=\"Cargando\" />
</div>
";
}
Antes que los pequeños detalles sobre la gestión de errores de la respuesta AJAX y tal..., sino es relativo claro, me gustaría saber porqué el listado superior se me abre en la "
Lista de Archivos" en lugar de en el <ul> con id "
Lista de Categorías"... es más, esa primera lista aunque funca se me queda colgada en la imagen "loading"...
El PHP parece estar bien, o sea la función va bien así que supongo será algún lio con el DOM, los ids de los elementos y las herencias... digo yo :S
La función arroja este código, que probado directamente en XHTML ocurre exactamente igual, es este... sé que ya es mucho tocho... sorry
:
Código HTML:
<!-- FILES list -->
<div id="listas">
<script>
// Fallo General:
function failure(req_cat) {
alert('Error 404: location "' + req_cat.statusText + '" no se encontró.');
}
// Fallo 404:
function failure404(req_cat) {
alert('Error: location "' + req_cat.status + ' -- ' + req_cat.statusText);
}
// Completa:
function Complete(req_cat)
{
$('Lista de Categorias').innerHTML = req_cat.responseText;
Element.hide('loading_Lista de Categorias');
Element.show('Lista de Categorias');
new Effect.Highlight('Lista de Categorias');
Element.hide('Mostrar Lista de Categorias');
Element.show('Esconder Lista de Categorias');
}
var opt = {
// Use POST
method: 'post',
// Datos
postBody: 'http://localhost/blog2/wp-content/themes/covi/ad/list_cat.php',
// Complete:
onComplete: function(req_cat){ Complete(req_cat) },
// Error 404
on404: function(req_cat){ failure404(req_cat) },
// Otros Errores
onFailure: function(req_cat){ failure(req_cat) }
}
</script>
<img onclick="Element.show('loading_Lista de Categorias');new Ajax.Request('http://localhost/blog2/wp-content/themes/covi/ad/list_cat.php', opt); return false;" src="http://localhost/blog2/wp-content/themes/covi/img/display_element.png" alt="Mostrar Lista de Categorias" id="Mostrar Lista de Categorias">
<img onclick="Element.hide('Lista de Categorias'); Element.show('Mostrar Lista de Categorias'); Element.hide('Esconder Lista de Categorias'); return false;" src="http://localhost/blog2/wp-content/themes/covi/img/close_element.png" alt="Esconder Lista de Categorias" id="Esconder Lista de Categorias" style="display: none;"> <h3>Categorías</h3>
<div id="loading_Lista de Categorias" style="display: none;">
<img src="http://localhost/blog2/wp-content/themes/covi/img/loading.gif" alt="Cargando">
</div>
<ul id="Lista de Categorias"></ul>
<script>
// Fallo General:
function failure(req_fil) {
alert('Error 404: location "' + req_fil.statusText + '" no se encontró.');
}
// Fallo 404:
function failure404(req_fil) {
alert('Error: location "' + req_fil.status + ' -- ' + req_fil.statusText);
}
// Completa:
function Complete(req_fil)
{
$('Lista de Archivos').innerHTML = req_fil.responseText;
Element.hide('loading_Lista de Archivos');
Element.show('Lista de Archivos');
new Effect.Highlight('Lista de Archivos');
Element.hide('Mostrar Lista de Archivos');
Element.show('Esconder Lista de Archivos');
}
var opt = {
// Use POST
method: 'post',
// Datos
postBody: 'http://localhost/blog2/wp-content/themes/covi/ad/list_fil.php',
// Complete:
onComplete: function(req_fil){ Complete(req_fil) },
// Error 404
on404: function(req_fil){ failure404(req_fil) },
// Otros Errores
onFailure: function(req_fil){ failure(req_fil) }
}
</script>
<img onclick="Element.show('loading_Lista de Archivos');new Ajax.Request('http://localhost/blog2/wp-content/themes/covi/ad/list_fil.php', opt); return false;" src="http://localhost/blog2/wp-content/themes/covi/img/display_element.png" alt="Mostrar Lista de Archivos" id="Mostrar Lista de Archivos">
<img onclick="Element.hide('Lista de Archivos'); Element.show('Mostrar Lista de Archivos'); Element.hide('Esconder Lista de Archivos'); return false;" src="http://localhost/blog2/wp-content/themes/covi/img/close_element.png" alt="Esconder Lista de Archivos" id="Esconder Lista de Archivos" style="display: none;"> <h3>Archivos</h3>
<div id="loading_Lista de Archivos" style="display: none;">
<img src="http://localhost/blog2/wp-content/themes/covi/img/loading.gif" alt="Cargando">
</div>
<ul id="Lista de Archivos"></ul>
</div>
<!-- end FILES list --> Por cierto, uso
prototype y
scriptaculous.
Desde ya muchísimas gracias por la ayuda... ;)