• Jueves 28 de Marzo de 2024, 16:22

Autor Tema:  Problemas con Código en Opera/Firefox  (Leído 2261 veces)

xNeCrOx

  • Nuevo Miembro
  • *
  • Mensajes: 9
    • Ver Perfil
Problemas con Código en Opera/Firefox
« en: Martes 9 de Septiembre de 2008, 16:04 »
0
Holas! soy nuevo en el foro, quisiera saber si me pueden ayudar con un problemita que tengo con un código que encontre en la red, lo que sucede es que solo funciona con Internet Explorer y no me funciona con Opera/Firefox, alguien me podría ayudar a modificarlo para que estos últimos navegadores señalados fucione el código? habia leído algo de getElementById pero no se como ponerlo para que funcione... ya que en document."algo" puse document.getElementById pero nada... pueden ayudarme? les dejo el código

Código: Text
  1. <html>
  2.  
  3. <head>
  4. <title>Selecciona elementos en lista</title>
  5.  
  6. <script LANGUAGE="JavaScript">
  7. <!--
  8.  
  9. function moveVals(n, from, to) {
  10.     if (document.layers) {
  11.         fromObj = document.layers[from];
  12.         to = document.layers[to];
  13.     } else if (document.all) {
  14.         fromObj = document.all(from);
  15.         to = document.all(to);
  16.     }
  17.     if (n == 1 || n == 2) {
  18.         var indTo = to.length-1;
  19.         for (i=fromObj.length-1; i>=0; i--) {
  20.             if (n==1 || fromObj.options[i].selected) {
  21.                 indTo++;
  22.                 to.options[indTo] = new Option(fromObj.options[i].text, fromObj.options[i].value);
  23.                 fromObj.options[i] = null;
  24.             }
  25.         }
  26.     } else if (n == 3 || n == 4) {
  27.         var indFrom = fromObj.length-1;
  28.         for (i=to.length-1; i>=0; i--) {
  29.             if (n==4 || to.options[i].selected) {
  30.                 indFrom++;
  31.                 fromObj.options[indFrom] = new Option(to.options[i].text, to.options[i].value);
  32.                 to.options[i] = null;
  33.             }
  34.         }
  35.     }
  36. }
  37.  
  38. function frmButtons() {
  39.     var select = "chosen";
  40.     var avail = "avail";
  41.     if (document.layers) {
  42.         var sel = document.layers[select];
  43.         var av = document.layers[avail];
  44.     } else if (document.all) {
  45.         var sel = document.all(select);
  46.         var av = document.all(avail);
  47.     }
  48.     if (sel.length <= 0) {
  49.         document.frmAddPro.btnR.disabled = true;
  50.         document.frmAddPro.btnRR.disabled = true;
  51.     } else {
  52.         document.frmAddPro.btnR.disabled = false;
  53.         document.frmAddPro.btnRR.disabled = false;
  54.     }
  55.     if (av.length <= 0) {
  56.         document.frmAddPro.btnL.disabled = true;
  57.         document.frmAddPro.btnLL.disabled = true;
  58.     } else {
  59.         document.frmAddPro.btnL.disabled = false;
  60.         document.frmAddPro.btnLL.disabled = false;
  61.     }
  62. }
  63.  
  64. function deleteFrom() {
  65.     for (i=0; i<document.frmAddPro.elements.length-1; i++) {
  66.         if  (document.frmAddPro.elements[i].tagName.indexOf("SELECT") && document.frmAddPro.elements[i].id.indexOf("av")) {
  67.             alert("Cislo: "+i+" Name: "+document.frmAddPro.elements[i].tagName);
  68.         }
  69.     }
  70. }
  71. -->
  72. </script>
  73. </head>
  74. <body>
  75.  
  76.  
  77.  
  78. <center>
  79. <form NAME="frmAddPro">
  80.   <table height="172">
  81.     <tr>
  82.       <td WIDTH="170" CLASS="selCell" style="background-color: #FFFFFF" height="14">
  83.       Ciudades disponibles:</td>
  84.       <td bgcolor="#FFFFFF" height="14"></td>
  85.       <td WIDTH="170" CLASS="selCell" style="background-color: #FFFFFF" height="14">
  86.       Tu favorita:</td>
  87.     </tr>
  88.     <tr>
  89.       <td height="150"><select MULTIPLE  NAME="avail[]" ID="avail">
  90.       <option>Berlín</option>
  91.       <option>Londres</option>
  92.       <option>Luxemburgo</option>
  93.       <option>Nueva York</option>
  94.       <option>Paris</option>
  95.       <option>Praga</option>
  96.       <option>Tokyo</option>
  97.       </select> </td>
  98.       <td ALIGN="CENTER" VALIGN="CENTER" height="150">
  99.       <input TYPE="button" VALUE=">>"  NAME="btnLL" onClick="moveVals(1, 'avail', 'chosen'); frmButtons(); return false;"><br>
  100.       <input TYPE="button" VALUE=">"  NAME="btnL" onClick="moveVals(2, 'avail', 'chosen'); frmButtons(); return false;"><br>
  101.       <input TYPE="button" VALUE="<"  NAME="btnR" onClick="moveVals(3, 'avail', 'chosen'); frmButtons(); return false;"><br>
  102.       <input TYPE="button" VALUE="<<"  NAME="btnRR" onClick="moveVals(4, 'avail', 'chosen'); frmButtons(); return false;">
  103.       </td>
  104.       <td height="150"><select MULTIPLE  NAME="chosen[]" id="chosen"></select>
  105.       </td>
  106.     </tr>
  107.   </table>
  108. </form>
  109. </center><br>
  110. </body>
  111. </html>
  112.  

shadow_rev

  • Miembro MUY activo
  • ***
  • Mensajes: 397
  • Nacionalidad: co
  • Un SPARTAN no muere en combate
    • Ver Perfil
    • http://shadowrev.blogspot.com
Re: Problemas con Código en Opera/Firefox
« Respuesta #1 en: Martes 9 de Septiembre de 2008, 21:04 »
0
Si no estoy mal, en la función moveVals, ni document.layers ni document.all son un estándar; por eso no es raro que sólo funcione con IE. Comienza buscando un sustituto para esta parte.

En cuanto al funcionamiento del document.getElementById(), tienes que poner a tus elementos un id y llamarlos por medio de ese id, de esa forma accedés a ese elemento por medio de esa función. Te pongo el ejemplo:
Código: Text
  1. <script language="javascript">
  2. <!--
  3. function imprimirContenidoCampo(id_campo_texto) {
  4.   document.getElementById("resultado").innerHTML = document.getElementById(id_campo_texto).value;
  5. }
  6. -->
  7. </script>
  8. <body>
  9.     <input id="campo_texto" type="text" /><br />
  10.     <input type="button" value="imprimir" onclick="imprimirContenidoCampo('campo_texto')" />
  11.     <div id="resultado"></div>
  12. </body>
  13.  

Nota: La propiedad innerHTML no es un estándar W3C (aunque funciona en muchos navegadores, incluidos Opera y Firefox), pero es más sencillo de emplear que usando la estructura del DOM (crear nodos y luego agregarlos)

:suerte:
Volará quien le ponga alas a sus sueños (Candidate for goddess)
Si el mal existe en este mundo, reside en el corazón de la humanidad (Edward D. Morrison - Tales of Phantasia)
Lo único que puedes cambiar del pasado, es lo que sientes por él en el presente (Lockon Stratos - Mobile Suit Gundam 00)
Ingeniero de Sistemas

xNeCrOx

  • Nuevo Miembro
  • *
  • Mensajes: 9
    • Ver Perfil
Re: Problemas con Código en Opera/Firefox
« Respuesta #2 en: Martes 9 de Septiembre de 2008, 22:20 »
0
Gracias, entendí bien que document.layers y document.all para nada son estándar y como IE nunca los ha respetado deseché la posibilidad de usar ese código ahora trabaje en otro que funcionará con mis necesidades. por suerte tenía este código que no recuerdo de donde lo había sacado.

Código: Text
  1. <html>
  2. <head>
  3. <title>Selecciona elementos en la lista</title>
  4.  
  5. </head>
  6.  
  7. <BODY style="font-family: Verdana">
  8. <p align="center"><b>Selecciona elementos en lista 2</b></p>
  9.  
  10. <SCRIPT LANGUAGE="JavaScript">
  11.  
  12. function moveOver()  
  13. {
  14. var boxLength = document.choiceForm.choiceBox.length;
  15. var selectedItem = document.choiceForm.available.selectedIndex;
  16. var selectedText = document.choiceForm.available.options[selectedItem].text;
  17. var selectedValue = document.choiceForm.available.options[selectedItem].value;
  18. var i;
  19. var isNew = true;
  20. if (boxLength != 0) {
  21. for (i = 0; i < boxLength; i++) {
  22. thisitem = document.choiceForm.choiceBox.options[i].text;
  23. if (thisitem == selectedText) {
  24. isNew = false;
  25. break;
  26.       }
  27.    }
  28. }
  29. if (isNew) {
  30. newoption = new Option(selectedText, selectedValue, false, false);
  31. document.choiceForm.choiceBox.options[boxLength] = newoption;
  32. }
  33. document.choiceForm.available.selectedIndex=-1;
  34. }
  35. function removeMe() {
  36. var boxLength = document.choiceForm.choiceBox.length;
  37. arrSelected = new Array();
  38. var count = 0;
  39. for (i = 0; i < boxLength; i++) {
  40. if (document.choiceForm.choiceBox.options[i].selected) {
  41. arrSelected[count] = document.choiceForm.choiceBox.options[i].value;
  42. }
  43. count++;
  44. }
  45. var x;
  46. for (i = 0; i < boxLength; i++) {
  47. for (x = 0; x < arrSelected.length; x++) {
  48. if (document.choiceForm.choiceBox.options[i].value == arrSelected[x]) {
  49. document.choiceForm.choiceBox.options[i] = null;
  50.    }
  51. }
  52. boxLength = document.choiceForm.choiceBox.length;
  53.    }
  54. }
  55. function saveMe() {
  56. var strValues = "";
  57. var boxLength = document.choiceForm.choiceBox.length;
  58. var count = 0;
  59. if (boxLength != 0) {
  60. for (i = 0; i < boxLength; i++) {
  61. if (count == 0) {
  62. strValues = document.choiceForm.choiceBox.options[i].value;
  63. }
  64. else {
  65. strValues = strValues + "," + document.choiceForm.choiceBox.options[i].value;
  66. }
  67. count++;
  68.    }
  69. }
  70. if (strValues.length == 0) {
  71. alert("No has hecho ninguna selección");
  72. }
  73. else {
  74.       onSubmit();
  75.    }
  76. }
  77. //  End -->
  78. </script>
  79. </HEAD>
  80.  
  81. <html>
  82. <head>
  83. <title>Selección de elementos</title>
  84.  
  85. </head>
  86.  
  87.  
  88. <BODY style="font-family: Verdana">
  89.  
  90. <center>
  91. <form name="choiceForm" method="post" action="lista.php">
  92. <table border=0 width="414">
  93. <tr>
  94. <td valign="top" width=227>
  95. <font size="2">Contenido disponible: </font>
  96. <br>
  97. <select name="available" size=10 onchange="moveOver();">
  98. <option value="funcionarios">Funcionarios
  99. <option value="cargo_trabajador">Cargo Trabajador
  100. <option value="actualizar">Actualizaciones de productos
  101. <option value="especificacion">Especificaciones de productos
  102. <option value="historia">Historia de pedidos
  103. <option value="estado_pedido">Estado del pedido
  104. <option value="contactos">Contactos
  105. <option value="calendario">Calendario de eventos
  106. <option value="planificaciones">Planificación
  107. <option value="notas">Notas
  108. </select>
  109. </td>
  110.         <td width="177" valign="top" bordercolor="#CCCCFF"> <font size="2">Tu
  111.           selección: </font> <br>
  112. <select multiple name="choiceBox[]" id="choiceBox" style="width:150;" size="10">
  113. </select>
  114. </td>
  115. </tr>
  116. <tr>
  117. <td height=10 width="390">
  118. <input type="button" value="Eliminar seleccionados" onclick="removeMe();" style="font-size: 8pt"><br>
  119. <input type="submit" value="Obtener valores seleccionados" onclick="saveMe();" style="font-size: 8pt"><br>
  120. <input type="button" value="Seleccionar todos" onclick="selAll(true)" style="font-size: 8pt"><br>
  121. <input type="button" value="Quitar selección" onclick="selAll(false)" style="font-size: 8pt"><br>
  122. </td>
  123. </tr>
  124. </table>
  125. </form>
  126. </center>
  127. <script>
  128. function selAll(_v) {
  129. for(var i=0;i<document.choiceForm.choiceBox.length;i++)
  130.   document.choiceForm.choiceBox[i].selected=_v;
  131. }
  132. </script>
  133. </body>
  134. </html>
  135.  

El asunto ahora es que es solo un ejemplo, ya que quiero que los elementos que vaya a seleccionar sean campos para consultar a una base de datos en MySQL: Por ejemplo, selecciono funcionarios y cargo trabajador... el option value serian las tablas que yo quiero consultar a la base de datos.. o sea funcionarios y cargo_trabajador, al enviarlo a php no se como poder realizar la consulta para que me muestre los datos de dichas tablas que quiero ver...

Esto es lo que tengo en el PHP.

Código: Text
  1. <?php
  2.  
  3. foreach ($_POST['choiceBox'] as $indice => $valor){
  4. echo "indice: ".$indice." => ".$valor."<br>";
  5.  
  6. ?>
  7.  

Con esto demuestro que puedo obtener los valores del select multiple del formulario anterior, pero como hacer para que esos valores, pueda realizarlos en una consulta SQL y que sean las tablas de dicha consulta y asi obtener los datos de esas tablas, asi poder mostrarlas con un echo?...

xNeCrOx

  • Nuevo Miembro
  • *
  • Mensajes: 9
    • Ver Perfil
Re: Problemas con Código en Opera/Firefox
« Respuesta #3 en: Miércoles 10 de Septiembre de 2008, 14:23 »
0
Me auto respondo.. aquí tengo el código funcional para Opera y Firefox... se los dejó.. pero aun quisiera saber como obtener esos datos para procesarlos en MySQL teniendo encuenta que cada dato que escoja del select multiple sean necesariamente tablas de una base de datos.. espero que me puedan ayudar...

Código: Text
  1. Código PHP
  2.  
  3. <html>
  4.  
  5. <head>
  6. <title>Selecciona elementos en lista</title>
  7.  
  8. <script type="text/javascript">
  9. <!--
  10.  
  11. function moveVals(n, from, to) {
  12.         fromObj = document.getElementById(from);
  13.         to =  document.getElementById(to);
  14.     if (n == 1 || n == 2) {
  15.         var indTo = to.length-1;
  16.         for (ii=fromObj.length-1; ii>=0; ii--) {
  17.             if (n==1 || fromObj.options[ii].selected) {
  18.                 indTo++;
  19.                 to.options[indTo] = new Option(fromObj.options[ii].text, fromObj.options[ii].value);
  20.                 fromObj.options[ii] = null;
  21.             }
  22.         }
  23.     } else if (n == 3 || n == 4) {
  24.         var indFrom = fromObj.length-1;
  25.         for (ii=to.length-1; ii>=0; ii--) {
  26.             if (n==4 || to.options[ii].selected) {
  27.                 indFrom++;
  28.                 fromObj.options[indFrom] = new Option(to.options[ii].text, to.options[ii].value);
  29.                 to.options[ii] = null;
  30.             }
  31.         }
  32.     }
  33. }
  34.  
  35. function frmButtons() {
  36.         var sel = document.getElementById("chosen");
  37.         var av = document.getElementById("avail");
  38.     if (sel.length <= 0) {
  39.         document.frmAddPro.btnR.disabled = true;
  40.         document.frmAddPro.btnRR.disabled = true;
  41.     } else {
  42.         document.frmAddPro.btnR.disabled = false;
  43.         document.frmAddPro.btnRR.disabled = false;
  44.     }
  45.     if (av.length <= 0) {
  46.         document.frmAddPro.btnL.disabled = true;
  47.         document.frmAddPro.btnLL.disabled = true;
  48.     } else {
  49.         document.frmAddPro.btnL.disabled = false;
  50.         document.frmAddPro.btnLL.disabled = false;
  51.     }
  52. }
  53.  
  54. function deleteFrom() {
  55.     for (ii=0; ii<document.frmAddPro.elements.length-1; ii++) {
  56.         if  (document.frmAddPro.elements[ii].tagName.indexOf("SELECT") && document.frmAddPro.elements[ii].id.indexOf("av")) {
  57.             alert("Cislo: "+ii+" Name: "+document.frmAddPro.elements[ii].tagName);
  58.         }
  59.     }
  60. }
  61. -->
  62. </script>
  63. </head>
  64. <body>
  65.  
  66.  
  67.  
  68. <center>
  69. <form NAME="frmAddPro">
  70.   <table height="172">
  71.     <tr>
  72.       <td WIDTH="170" CLASS="selCell" style="background-color: #FFFFFF" height="14">
  73.       Ciudades disponibles:</td>
  74.       <td bgcolor="#FFFFFF" height="14"></td>
  75.       <td WIDTH="170" CLASS="selCell" style="background-color: #FFFFFF" height="14">
  76.       Tu favorita:</td>
  77.     </tr>
  78.     <tr>
  79.       <td height="150"><select MULTIPLE  NAME="avail[]" ID="avail">
  80.       <option>Berlín</option>
  81.       <option>Londres</option>
  82.       <option>Luxemburgo</option>
  83.       <option>Nueva York</option>
  84.       <option>Paris</option>
  85.       <option>Praga</option>
  86.       <option>Tokyo</option>
  87.       </select> </td>
  88.       <td ALIGN="CENTER" VALIGN="CENTER" height="150">
  89.       <input TYPE="button" VALUE=">>"  NAME="btnLL" onClick="moveVals(1, 'avail', 'chosen'); frmButtons(); return false;"><br>
  90.       <input TYPE="button" VALUE=">"  NAME="btnL" onClick="moveVals(2, 'avail', 'chosen'); frmButtons(); return false;"><br>
  91.       <input TYPE="button" VALUE="<"  NAME="btnR" onClick="moveVals(3, 'avail', 'chosen'); frmButtons(); return false;"><br>
  92.       <input TYPE="button" VALUE="<<"  NAME="btnRR" onClick="moveVals(4, 'avail', 'chosen'); frmButtons(); return false;">
  93.       </td>
  94.       <td height="150"><select MULTIPLE  NAME="chosen[]" id="chosen"></select>
  95.       </td>
  96.     </tr>
  97.   </table>
  98. </form>
  99. </center><br>
  100. </body>
  101. </html>
  102.  

shadow_rev

  • Miembro MUY activo
  • ***
  • Mensajes: 397
  • Nacionalidad: co
  • Un SPARTAN no muere en combate
    • Ver Perfil
    • http://shadowrev.blogspot.com
Re: Problemas con Código en Opera/Firefox
« Respuesta #4 en: Miércoles 10 de Septiembre de 2008, 16:03 »
0
La verdad no entendí muy bien que es lo que quieres hacer; si el value de los option son los nombres de las tablas, pues con el uso de $_POST[nombre_checkbox][indice] deberías obtenerlos. Te sugiero que traslades la pregunta al foro de PHP, ya que aquí ese tema es offtopic y allá puedes encontrar más ayuda.

:suerte:
Volará quien le ponga alas a sus sueños (Candidate for goddess)
Si el mal existe en este mundo, reside en el corazón de la humanidad (Edward D. Morrison - Tales of Phantasia)
Lo único que puedes cambiar del pasado, es lo que sientes por él en el presente (Lockon Stratos - Mobile Suit Gundam 00)
Ingeniero de Sistemas

xNeCrOx

  • Nuevo Miembro
  • *
  • Mensajes: 9
    • Ver Perfil
Re: Problemas con Código en Opera/Firefox
« Respuesta #5 en: Miércoles 10 de Septiembre de 2008, 16:46 »
0
Ok, Muchas gracias por tu ayuda.. acabo de remitir la pregunta al subforo de PHP.

Saludos!