div es necesario?

[doylelives]

Hola a todos!
Siempre vi, en todos los ejemplos de ajax, que el objeto en cuestión (en mi caso un <select>) está dentro de tags de <div>.
Ahora tengo algunos problemitas en la integración, en php no usé DIVs, es por eso que tengo los problemas??
Porque cuando se ejecuta ajax me borra unos select y un cuadro de texto.
Gracias!

[David]

Sin ver el código que estás usando es difícil saber cuál es la causa del problema.

[doylelives]

Bueno querias codigo?
en el php principal:

Código HTML:

<select name="select1" id="select1" onChange="cargaContenido(this.id)" class="cat1">
 <option value="0" selected>(ninguna)</option><?
while ( $select_reg = mysql_fetch_array($select_res) ) {?>
	<option value=<?=$select_reg[cat_id]?>><?=$select_reg[cat_name]?></option><? 							} ?>
 </select> 

en javascript:
idSelectDestino es el id del 2º select que quiera actualizar con ajax
selectDestino es el objeto del 2º select

Código HTML:

ajax.open("GET", "procesoSelect.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);
ajax.onreadystatechange=function() { 
if (ajax.readyState==1){
     // Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
     selectDestino.length=0;
     var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
     selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true;	
     }
     if (ajax.readyState==4){
         selectDestino.parentNode.innerHTML=ajax.responseText;
     } 
}
ajax.send(null);

Cabe destacar que actualiza correctamente el 2º select pero me borra otros elementos de mi formulario.
Porque ya que innerhtml solo deberia actuar sobre selectDestino?
Gracias!

[doylelives]

Mmmmmhhhh sabes que me di cuenta que el <p></p> siguiente abarca desde el 2º select hasta el ultimo text que me borró???
Y resulta que los siguientes elementos que no borró estan fuera de ese parrafo!
Te pregunto porque no conozco el comportamiento de ajax lo aprendi muy por encima.
Codigo en cuestión:

Código PHP:

 <p><span class="popupTitle"><strong>Categor&iacute;a 2</strong></span><strong>:</strong>  
                                  <? $sql_cat2 = " SELECT * FROM category2 WHERE prev_cat = ".$_GET[cat1]."  
                                                     AND public = 1 ORDER BY cat_name ASC "; 
                                     $res_cat2 = mysql_query($sql_cat2); 
                                     //debbug echo $sql_cat2; 
                                    ?> 
                                  <br> 
                                  <input name="cat2" type="hidden" value="<?=$_GET[cat2]; ?>">                                   
                                  <select disabled="disabled" name="select2" id="select2"> 
                                    <option value="0">Selecciona opci&oacute;n...</option> 
                                  </select> 
                                  <br><br> 
                                  <span class="popupTitle"><strong>Categor&iacute;a 3 </strong></span><strong>:</strong> 
                                  <? $sql_cat3 = " SELECT * FROM category3 WHERE prev_cat = ".$_GET[cat2]."  
                                                     AND public = 1 ORDER BY cat_name ASC "; 
                                     $res_cat3 = mysql_query($sql_cat3); 
                                     //debbug echo $sql_cat3; 
                                    ?> 
                                  <br> 
                                  <input name="cat3" type="hidden" value="<?=$_GET[cat3]; ?>"> 
                                  <select disabled="disabled" name="select3" id="select3"> 
                                    <option value="0">Selecciona opci&oacute;n...</option> 
                                </select> 
                                  <br> 
                                  <br> 
                                  <span class="popupTitle"><strong>Categor&iacute;a 4 </strong></span><strong>:</strong> 
                                  <? $sql_cat4 = " SELECT * FROM category4 WHERE prev_cat = ".$_GET[cat3]."  
                                                     AND public = 1 ORDER BY cat_name ASC "; 
                                     $res_cat4 = mysql_query($sql_cat4); 
                                     //debbug echo $sql_cat4; 
                                    ?> 
                                  <br> 
                                  <input name="cat4" type="hidden" value="<?=$_GET[cat4]; ?>"> 
                                  <select name="filtrocat4" class="cat1" id="cat4" onChange="MM_jumpMenu('parent',this,10)"> 
                                    <option value="altaProducts.php?cat1=<?=$_GET[cat1];?>" selected>(ninguna)</option> 
                                    <? 
                                    while ( $row_cat4 = mysql_fetch_array($res_cat4) ) { 
                                    ?> 
                                    <option value="<?  
                                            if ( $_GET[cat4] == $row_cat4[cat_id] ) { 
                                                echo $row_cat4[cat_id]; 
                                            } else { 
                                                echo 'altaProducts.php?cat1='.$_GET[cat1].'&cat2='.$_GET[cat2].'&cat3='.$_GET[cat3].'&cat4='.$row_cat4[cat_id]; 
                                            } 
                                            ?>" 
 
                                            <? 
                                            if ( $_GET[cat4] == $row_cat4[cat_id] ) { 
                                                echo 'selected'; 
                                            }?> title="<?=$row_cat4['cat_name'];?>"> 
                                    <?=substr($row_cat4['cat_name'],0,42);?> 
                                    </option> 
                                    <? 
                                    } ?> 
                                  </select> 
                                  <br> 
                                  <br> 
                                  <span class="popupTitle"><strong>Categor&iacute;a 5 </strong></span><strong>:</strong> 
                                  <? $sql_cat5 = " SELECT * FROM category5 WHERE prev_cat = ".$_GET[cat4]."  
                                                     AND public = 1 ORDER BY cat_name ASC "; 
                                     $res_cat5 = mysql_query($sql_cat5); 
                                     //debug echo $sql_cat5; 
                                    ?> 
                                  <br> 
                                  <select name="cat5" class="cat1" id="cat5"> 
                                    <option value="" selected>(ninguna)</option> 
                                    <? 
                                    while ( $row_cat5 = mysql_fetch_array($res_cat5) ) { 
                                        ?> 
                                    <option value="<?=$row_cat5[cat_id]; ?>" title="<?=$row_cat4['cat_name'];?>"> <? echo substr($row_cat5['cat_name'],0,42); ?> </option> 
                                    <? 
                                    } ?> 
                                  </select> 
                                  <br> 
                                  <br> 
                                   
                                   
                                   
                                   <strong>C&oacute;digo del Producto:</strong><br> 
                                  <input name="code" type="text" id="code" size="20" maxlength="12"> 
                                  <br>                                  <br>                                   
                                  <strong>Nombre:</strong><br> 
                                  <input name="name" type="text" id="name" size="45"> 
                                </p>  

Please!! quedó del viernes jaja.
la propiedad responseText vuelca el contenido en el objeto select pero borra otros tags de html. Que tiene de especial ese parrafo <p> ? ya que todo su contenido desaparece misteriosamente?!

[venkman]

Estás haciendo:

Código javascript:

selectDestino.parentNode.innerHTML= blablabla
 

No tiene que ver con el responseText ni con la llamada por AJAX ni nada. Sólo tiene que ver con esa línea. Esa línea dice:

Para el selectDestino, coge su nodo padre (es decir, el nodo en el que está contenido ese select), y cambia todo lo que haya dentro (innerHTML) de ese nodo por blablabla.

Concretando más, siguiendo el trozo de HTML que has puesto, el nodo padre del <select> es precisamente ese <p> que comentas. Así que lo que ocurre es lo que dices y es completamente natural, porque ocurre lo que le estás pidiendo que haga: meter lo que sea (el responseText) en el <p>.


Esto enlaza con tu otra pregunta esa de "es necesario meter las cosas en un <div>?". La respuesta a esa pregunta es "no, necesario no es, pero si haces las cosas como lo estás haciendo (con esa línea del parentNode) entonces querrás poner el div para que funcione como esperas que funcione". La explicación:

Tienes actualmente:

Código:

<p>...<select></select>...</p>

Ahí el parentNode es el <p> y estás cambiando todo el contenido de ese <p>. Si pones un <div>:

Código:

<p>...<div><select></select></div>...</p>

Entonces el parentNode del <select> es el <div> y sólo cambiarás el contenido de ese <div>.

Pero esto no quiere decir que sea necesario. Sólo quiere decir que tal como estás haciendo tú las cosas entonces querrás tener ese <div> ahí para que funcione como tú esperas que funcione. Hay otras formas de hacerlo, sin el <div> o con él. Depende de cómo hagas las cosas tendrás que ponerlas de un modo u otro para que funcionen como quieres.

[doylelives]

Gracias venkman!!!
Como aprendi ajax con puro copy/paste eso nunca lo entendi y lo pase por alto.
Me acabas de resolver una de las dudas mas grandes que tenia en ajax!!
Gracias de nuevo!!!!

[venkman]

Pues lo siento mucho. Aprender con copy/paste a mi no me parece una forma de aprender. Sinceramente y sin ánimo de molestar, te recomendaría que trataras de aprender de verdad, al menos con tutoriales, guías, libros...

:)

[doylelives]

Si tienes razon, es mala práctica (ahora me doy cuenta) de ahora en adelante prometo leer algo de teoria antes de la practica. Gracias