Foros del Web - ¿Lo estaré haciendo de la forma incorrecta? (GRACIAS)

Hola a todos. Estoy dando mis primeros pasos en AJAX y me encuentro con un problema que no logro resolver:

Tengo en mi página una lista de items (UL) adentro de una div:

Código:

<?php

  // Conexion BD, consulta MySQL, etc.

?>

<html>

<head>

<title>titulo</title>

<!-- includes de javascript varios -->

</head>

</body>
 

<div id='contenedor_de_listas'>
 

<ul id='listas'>

  <li>

    <ul id='lista_1'>

      <li id='item_n' onmouseout='funcion_de_js(id_item)'></li>

      <li id='item_n' onmouseout='funcion_de_js(id_item)'></li>

      <li id='item_n' onmouseout='funcion_de_js(id_item)'></li>

      <li id='item_n' onmouseout='funcion_de_js(id_item)'></li>

      <li id='item_n' onmouseout='funcion_de_js(id_item)'></li>

    </ul>

  </li>

</ul>
 
 

</div>
 

</body>

</html>

La lista del ejemplo se ve estática, pero en realidad son varias listas cuyos items se levantan de la BD. Los usuarios pueden ordenar los items haciendo drag & drop (scriptaculous).

Cuando el usuario SUELTA un item se actualiza en la BD el orden de la lista via AJAX: Esto funciona perfectamente.

El problema:

Como quiero que se refresque el contenido de la lista al soltar cada item sin que la pagina haga RELOAD, cree un archivo PHP separado parecido a este:

Código PHP:

   <?php
// conexion BD
// pido datos y hago loop

$_respuesta = "<ul id='listas'>";
$_respuesta = "  <li>";
$_respuesta = "    <ul id='lista_1'>";
$_respuesta = "      <li onmouseout='funcion_de_js(id_item)' id='item_n'></li>";
$_respuesta = "      <li onmouseout='funcion_de_js(id_item)' id='item_n'></li>";
$_respuesta = "      <li onmouseout='funcion_de_js(id_item)' id='item_n'></li>";
$_respuesta = "      <li onmouseout='funcion_de_js(id_item)' id='item_n'></li>";
$_respuesta = "      <li onmouseout='funcion_de_js(id_item)' id='item_n'></li>";
$_respuesta = "    </ul>";
$_respuesta = "  </li>";
$_respuesta = "</ul>";

echo $_respuesta;
?>

Y luego un javascript que realiza el request via background y maneja la respuesta de ese request con esta funcion:

Código:



function updateListsDiv() {
 

        if (request.readyState == 4) {

                if (request.status == 200) {
 

                        var resp = request.responseText;
 

                        if (resp) {

document.getElementById("contenedor_de_listas").innerHTML = resp;

                        }
 

                }

        }

}

Finalmente, ahora mi index, en el que originalmente hacia la consulta MySQL y el armado de la lista, tengo dentro de la div contenedora de listas una función Javascript que llama al ajax que hace el request en background al NUEVO archivo.php que actualiza la div contenedora:

Código PHP:

   
<?php
  // Ya no hago consultas aquí
?>
<html>
<head>
<title>titulo</title>
<!-- includes de javascript varios -->
</head>
<body>

<div id='contenedor_de_listas'>

<script language='javascript' type='text/javascript'>
   // Llamo a la funcion que actualiza esta div metiendole la lista
  AJAX_actualizar_lista_contenedora();
</script>

</div>

</body>
</html>

La función AJAX_actualizar_lista_contenedora(); también la llamo, por ejemplo, cuando termino de ordenar una lista, para que se vean datos obtenidos de la base de datos. Es decir, la misma funcion se llama cuando se carga por 1ra vez la página y cuando realizo actualizaciones en la BD.

Todo esto parece funcionar a simple vista bien, pero tengo algunos problemas:
- Firefox me dice que hay basura tras uno de los divs... pero no hay errores de PHP ni algun tipo de respuesta que esté generando basura.

- Internet Explorer no me permite re-ordenar bien las listas

- Algunos eventos de JS de la lista ahora dan pequeños errores también.

La cuestion es que ESTIMO que no estoy haciendo las cosas de la forma correcta... ¿qué consejo me pueden decir teniendo en cuenta este esquema?

Les agardezco mucho y disculpen por tanto texto, quise ser lo más explicativo posible.

GRACIAS!