problema con innerHTML y borrar texto (span anidados)

Mandete · #1 (**permalink**) 13/02/2008, 15:12

Tengo desplegables anidados, al pinchar en un botón añade filas (y sus dependientes) y al pulsar en otro elimina la fila que toca (y sus dependientes). El caso es que añade bien, pero al borrar si quiero borrar la fila 3 y las q dependen de ella, me borra la 3 y todas las que tenía por debajo. Debe ser porque se estén anidando los span, pero por más que lo miro no encuentro el fallo, podéis ayudarme?.

Con las siguientes 2 funciones añado las filas (patron, nanda, noc y nic, nic depende de las 3 anteriores, noc de las 2 y nanda de patrón sólamente).

Código:

function addPatron(str)
{

num_patron = parseInt(str)

while(document.getElementById(num_patron+1))
{
//alert(num_patron+"existe, probemos con "+(num_patron+1))
num_patron++
}
//alert(num_patron+" no existe")

var url="addPatron.php"
//url = url + str
xmlHttp.onreadystatechange=patronAdded
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function patronAdded()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 {
   var v = xmlHttp.responseText.split('#') //separas lo de antes del = y lo dedespués y se inserta en v[o] y v[1]
   var i = v[0].split('*') //Separas lo que hay antes y después de cada "," insertándolo en posiciones del vector s
   var t = v[1].split('*') //Separas lo que hay antes y después de cada "," insertándolo en posiciones del vector s   
  
   var sHTML = "<div class='Patron'><div  class='PatronControl'>PATRON</div><select class='SelectPatron' name='patron"+(num_patron+1)+"' id='patron"+(num_patron+1)+"' onchange='nanda(this.value,this.id)'><option>Elige Patron</option>"
   
   for (number in t) //recorremos todo el vector s con el iterador number
   {
       sHTML = sHTML + "<option value="+i[number]+">"
       sHTML = sHTML + t[number]
       sHTML = sHTML + "</option>"
   }
   
   sHTML = sHTML + "</select><div class='Puntuacion'>evaluación al ingreso: <select class='SelectForm' name='pa"+num_patron+"_in' style=' width:40px;'><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div><div class='Puntuacion'>evaluación al alta: <select class='SelectForm' name='pa"+num_patron+"_al' style=' width:40px;'><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div><div class='DeletePatron' id='"+(num_patron+1)+"' onclick='borrarPatron(this.id)'></div><div class='AddPatron' id='"+(num_patron+1)+"' onclick='addPatron(this.id)'></div></div>"
   
   sHTML = sHTML + "<div class='Namda'><div class='NamdaControl'>NAMDA</div><span id='p"+(num_patron+1)+"_1'><select class='SelectPatron' name='nanda"+(num_patron+1)+"_1' id='nanda"+(num_patron+1)+"_1'></select><div class='Puntuacion'>evaluación al ingreso: <select class='SelectForm' name='na1_in' style=' width:40px;'><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div><div class='Puntuacion'>evaluación al alta: <select class='SelectForm' name='na1_al' style=' width:40px;'><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div></span><div class='DeleteNamda'></div><div class='AddNamda' id='"+(num_patron+1)+"_"+"1' onclick='addNanda(this.id)'></div></div>"
//   sHTML = sHTML + (globalID+1)
//   sHTML = sHTML + "'>"

  sHTML = sHTML + "<div class='Noc'><div  class='NocControl'>NOC</div><span id='p"+(num_patron+1)+"_1_1'><select class='SelectPatron' name='noc1' id='noc1'></select><div class='Puntuacion'>evaluación al ingreso: <select class='SelectForm' name='no1_in' style=' width:40px;'><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div><div class='Puntuacion'>evaluación al alta: <select class='SelectForm' name='no1_al' style=' width:40px;'><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div></span><div class='DeleteNoc'></div><div class='AddNoc'></div></div>"
    
  sHTML = sHTML + "<div class='Nic'><div  class='NicControl'>NIC</div><span id='p"+(num_patron+1)+"_1_1_1'><select class='SelectPatron' name='nic1' id='nic1'></select><div class='Puntuacion'><label><input type='checkbox' id='nic1_verbal' name='nic1_verbal' checked='checked' />verbal</label><label><input type='checkbox' id='nic1_escrito' name='nic1_escrito' />escrito</label><label><input type='checkbox' id='nic1_observado' name='nic1_observado' />observado</label></div></span><div class='DeleteNic'></div><div class='AddNic'></div></div><span id='nic"+(num_patron+1)+"_1_1_1'><span id='noc"+(num_patron+1)+"_1_1'><span id='nan"+(num_patron+1)+"_1'></span></span></span></span><span id='pat"+(num_patron+1)+"'>"

    document.getElementById("pat"+num_patron).innerHTML=sHTML
    
    num_patron = num_patron + 1
    alert(num_patron)
 }
}

Y aquí el código donde están los span para insertar

Código HTML:

    <div class="LayoutPatron">
    
         <div class="Patron">
             <div  class="PatronControl">PATRON</div>
            <?php 
            $conexion=mysql_connect("","","") or die("Problemas en la conexion primera");
            mysql_select_db("codigos_patrones",$conexion) or die("Problemas en la seleccion de la base de datos");     
            $result = mysql_query("SELECT * FROM `pattern`", $conexion);
            mysql_close($conexion); 
            ?>
            <select class="SelectPatron" name="patron1" id="patron1" onchange="nanda(this.value,this.id)">
            <option selected>Elige patrón</option>
            <?php while ($r=mysql_fetch_array($result)) {
                    $id_patron1=$r['Id'];
                    $patron1=utf8_encode($r['Text']);?>
                            <option value="<?php echo $id_patron1;?>"><?php echo $patron1;?></option>
                    <?php } ?>
            </select>
            
             <div class="DeletePatron" id="1" onclick="borrarPatron(this.id)"></div>
             <div class="AddPatron" id="1" onclick="addPatron(this.id)"></div>
         </div>
         
     <?php/* for($nan=1;$nan<=$postnan1;$nan++){ */?>  
       
         <div class="Namda">
          
            <div  class="NamdaControl">NAMDA</div>
            <span id="p1_1">
            <select class="SelectPatron" id="nanda1_1"></select>

            </span>
            <div class="DeleteNamda"></div>
            <div class="AddNamda" id="1_1" onclick="addNanda(this.id)"></div>
             
 </div>
 
          <?php/* }*/ ?>
          <!-- fin for de nanda -->
  
      <div class="Noc">
             <div  class="NocControl">NOC</div>
             <span id="p1_1_1">
             <select class="SelectPatron"></select>
             
              </span>
              <div class="DeleteNoc"></div>
              <div class="AddNoc" id="1_1_1" onclick="infoNoc(this.id)"></div>
                  
         </div>
         
         <div class="Nic">
             <div  class="NicControl">NIC</div>
             <span id="p1_1_1_1">
            <select class="SelectPatron"></select>
             
             </span>
             <div class="DeleteNic"></div>
             <div class="AddNic" id="1_1_1_1" ></div>

  
       </div>
       <span id=nic1_1_1_1> <!-- lugar donde añadiremos un nic entero al hacer click-->
       </span>
       <span id=noc1_1_1> <!-- lugar donde añadiremos un noc entero al hacer click-->
       </span>
       <span id=nan1_1> <!-- lugar donde añadiremos un nanda entero al hacer click-->
       </span>
       <span id=pat1> <!-- lugar donde añadiremos un patron entero al hacer click-->
       </span>
       
            
    </div>

Mandete · #2 (**permalink**) 17/02/2008, 06:59

Ok, creo que el error es que innerHTML analiza el texto que le asignas, y si faltan por cerrar etiquetas, las cierra. Así pues, los span que abro pero no cierro, queriendo que se cerraran con el código que ya existía antes, las cierra el innerHTML. Podría servir meter todo el código como hago ahora pero la parte final de spans con DOM?. Es decir meter esto con DOM:

Código:

<span id='nic"+(num_patron+1)+"_1_1_1'><span id='noc"+(num_patron+1)+"_1_1'><span id='nan"+(num_patron+1)+"_1'></span></span></span></span><span id='pat"+(num_patron+1)+"'>

Podríais indicarme como sería con DOM? No lo he tocado nunca. Y si podría funcionar asi. Gracias

MaBoRaK · #3 (**permalink**) 20/02/2008, 13:15

loading............

Ohhh.. amigo tu código hace sangrar mis ojos jejejeje.
Veo que usas muuuuuuuuuuchos, pero MUCHOS divs y span, las cuales no tienen ni ID ... o sea solo estan de adorno. Y bueno el problema que dices, te dá porque no estas cerrando correctamente los elementos que creaste.

Para que veas mejor donde no cerraste los elementos te recomiendo usar el INSPECTOR DOM de Mozilla. o bien la extensión para mosilla VIEW SOURCE CHART.

Es todo lo que puedo decirte, lo demás.... solo Deus sabe.

connection closed.

Mandete · #4 (**permalink**) 20/02/2008, 15:16

Ya lo solucioné, aunque tuve que echar mano de la función insertAdjacementHTML, que sólo es compatible con IE.

Sabéis de algún modo de hacer algo similar para Mozilla? He encontrado varios prototipados para hacer una función con el mismo nombre que haga lo mismo en Mozilla, pero ninguna de ellas me ha funcionado.