Problema con Elementos (creo es DOM)

Covids0020 · #1 (**permalink**) 30/03/2006, 08:31

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&iacute;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&oacute;.');
        }
        
        // 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&oacute;.');
        }
        
        // 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&oacute;.');
        }
        
        // 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... ;)

Covids0020 · #2 (**permalink**) 01/04/2006, 11:26

Gracias a todos!....... ggg xD =P

Ya está arreglado, no usaba debidamente el Ajax.Request, no eran los parametros adecuados... :S
Esa función no usa ningún indicador de elemento en sus variables a diferencia de Ajax.Updater (ese fue mi error). Había que pasarlo como opción en las funciones de respuesta... por ejemplo.

También personalizé las funciones de respuesta en el functions.php.
new Ajax.Request(url, options);new Ajax.Updater(container, url, options);

Así que ajusté la función y usé un Element.Updater para mostrar los datos en vez de un innerHTML.

Ahí queda... por si sirve ;)

Código PHP:

  // $n_func: Nombre_de_la_Funcion.
// $element_id: ID de donde se mostrarán los Datos.
// $ajurl: Origen de los Datos.
// $format: Formato HTML con la imagen que activará el JS.

// Antes, Texto, Despues.
function AjaxRequest($n_func,$element_id,$ajurl,$format="") {

// Imagenes Usadas (Opcional):
$img_loading = get_bloginfo('template_url')."/img/loading3.gif";
$img_mostrar = get_bloginfo('template_url')."/img/display_element.png";
$img_cerrar = get_bloginfo('template_url')."/img/close_element.png";

if(is_string($format))
{
  $arr_format = explode(",",$format);
}

$pre = $arr_format[0];
$texto = $arr_format[1];
$pos = $arr_format[2];

echo "
        <script>

        // Cargando:
        var loadingFunc$element_id = function($n_func) {
        Effect.Appear('loading_$element_id');
        }

        // Hecha (Precargo para no ralentizar el render cuando esté completa):
        var successFunc$element_id = function($n_func) {
        Element.update('$element_id',$n_func.responseText);
        }
        
        // Completa (Efectos):
        var handlerFunc$element_id = function($n_func) {
        new Effect.BlindDown('$element_id');
        Element.hide('ver_$element_id');
        Element.hide('loading_$element_id');
        Effect.Appear('ocultar_$element_id', {duration: 2.0});
        }
        
        // Error:
        var errFunc$element_id = function($n_func) {
        alert('Error ' + $n_func.status + ' -- ' + $n_func.statusText);
        }
        
        </script>
";
// Código impreso que mostrará las imagenes pertinentes así como el formato XHTML.
echo "
        $pre $texto 
        <img onclick=\"new Ajax.Request('$ajurl',{method: 'post', onLoading:loadingFunc$element_id, onSuccess:successFunc$element_id,  onComplete:handlerFunc$element_id, onFailure:errFunc$element_id}); return false;\" 
        src=\"$img_mostrar\" alt=\"Mostrar $element_id\" id=\"ver_$element_id\" />
        
        <img onclick=\"new Effect.BlindUp('$element_id'); Element.show('ver_$element_id'); Element.hide('ocultar_$element_id'); return false;\" 
        src=\"$img_cerrar\" alt=\"Esconder $element_id\" id=\"ocultar_$element_id\" 
        style=\"display: none;\" />
        $pos
        
        <div id=\"loading_$element_id\" style=\"display: none\" />
          <img src=\"$img_loading\" alt=\"Cargando...\" />
        </div>
        
        <ul id=\"$element_id\" style=\"display: none\"></ul>
";

}