innerHTML borra el contenido de otros divs

kakashilopez · #1 (**permalink**) 21/06/2012, 19:06

Hola a todos es pero y me podais a yudar con mi problemita

por que mi innerHTML se aplica a todo mi formulario y no solo al div que le asigne

resulta que estoy leyendo condigo xml en javascript y el problema biene cuando intento asignar los datos recividos en mi div con la id="display" con el siguiente codigo

funcion leer evento preskey

Código Javascript:

Ver original/*esperando a que el documento este cargado para poder acceder al evento 
*pres key para realizar la busqueda
*/
$(document).ready(function(){
    $(".busca").keyup(function() //se crea la funcioin keyup
    {   
        var texto = $(this).val();  //lee contenido de  
        buscar(texto);   //llamo a la funcion para crear la url
    });
});

funcion para crear URL

Código Javascript:

Ver originalvar xmlhttp;
var xmlDoc;
function buscar(txt)
{   
    var url="search.php?palabra="+txt; //asigno el valor a mi url
    envia(url,1);   //llamo al funcion para enviar datos
}

funcion para ENVIAR datos a PHP

Código Javascript:

Ver originalfunction envia(url,x)
{
    // exploradores sportados IE7+, Firefox, Chrome, Opera, Safari
    if(window.XMLHttpRequest)
         { xmlhttp=new XMLHttpRequest();    }
    else
         { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
    xmlhttp.open("GET",url,false); //envia los datos
    xmlhttp.send(null);
    switch (x)
         {  
         case 1:    recive();   break; //llama a la funcion para recivir los datos
         default:     alert("default");     break;
         }  
}

funcion que RECIVE el XML desde el PHP

Código Javascript:

Ver originalfunction recive()
{
    xmlDoc=xmlhttp.responseXML;
    var x=xmlDoc.getElementsByTagName("padre");
    var y=xmlDoc.getElementsByTagName("hijo");
    var a=document.getElementById("display");
    for(j=0;j<x.length;j++)
    {
        for(i=0;i<y.length;i++)
        {
            a.innerHTML=document.write(x[j].getElementsByTagName("age")[i].childNodes[0].nodeValue);                
        }
    }   
}

Código Javascript:

Ver originaljQuery(function($){//funcion jquery que muestra el mensaje "Buscar amigos..." en la caja de texto
   $("#caja_busqueda").Watermark("Buscar amigos...");
   });

todo esto funciona correctamente pero al insertar los datos desde el innerHTML en el DIV me borra los divs anterores a el

mi index.html es el siguiente

Código HTML:

<html>
<head>
<link href="css.css" rel="stylesheet" >
<script language="JavaScript" src="jquery-1.5.1.min.js"></script>
<script language="JavaScript" src="jquery.watermarkinput.js"></script>
<script language="javascript" src="js.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin título</title>
</head>
<body>
<form action="usuario_completo.php" method="get">

 <div style=" width:100%; padding-left:3px; padding-right:3px; " id="txt">
  <input type="text" class="busca" id="caja_busqueda" name="clave" /><br />
</div> 

<div id="display"><!--aqui deveria de mostrarme el resultado de la busqueda--></div>

</form><p>
</body>
</html>

pero lo unico que me muestra es el resultado eliminando mi campo texto dentro del div con la id="caja_busqueda"

maycolalvarez · #2 (**permalink**) 22/06/2012, 09:30

tiene MUCHAS inconsistencias en el código:

1 - usa innerHTML pero aplica document.write sin la debida apertura del flujo HTML, lo que reemplaza TODO el lienzo HTML, si usa innerHTML no hace falta usar las funciones de control de flujo, es decir document.write

2 - usa FW jQuery y hace Peticiones AJAX manuales, no tiene sentido teniendo en cuenta el fabuloso wrapper de AJAX que tiene jQuery ¿para que reinventar la rueda?

3 - hace uso de peticiones ajax sincronas, jQuery también lo permite, aunque en dicho caso puede que el navegador no responda mientas no termine la conexión, en tal caso debe usar asincrono

4 - consulte las políticas del foro

kakashilopez · #3 (**permalink**) 22/06/2012, 10:51

maycolalvareze me lo has aclarado vastante

es que apenas hase sinco dias empece con esto de javascript y estoy casi en blanco en el tema pero

solo falta aprender

gracias

kakashilopez · #4 (**permalink**) 22/06/2012, 11:52

segui tu consejo muchas gracias

lo realise todo con jquery y todo funciona perfectamente

de antemano gracias