Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Usar variable javascript en Jquery en el mismo documento

Estas en el tema de Usar variable javascript en Jquery en el mismo documento en el foro de Jquery en Foros del Web. Estimados compañeros de antemano muchas gracias por su apoyo. mi duda es la siguiente (ya que es el primer programa que hago con jquery). Tengo ...
  #1 (permalink)  
Antiguo 05/10/2014, 17:33
 
Fecha de Ingreso: diciembre-2011
Mensajes: 90
Antigüedad: 12 años, 3 meses
Puntos: 0
Usar variable javascript en Jquery en el mismo documento

Estimados compañeros de antemano muchas gracias por su apoyo.

mi duda es la siguiente (ya que es el primer programa que hago con jquery).
Tengo el archivo .js con mis funciones JS y jQuery, y al inicio declaro mis variables js y algunas son van cambiando por ejemplo la variable "campos":

Código Javascript:
Ver original
  1. var campos = 0;
  2. var cuenta = 0;
  3. var ancho = 0;
  4. var largo = 0;
  5. var medida = "";
  6.  
  7. //y la variable "campos" cambia cada que agregamos un nuevo campo
  8.        
  9. //Funcion agregar campos de categoria
  10. function agregarCampo(){
  11. campos = campos + 1;  //AQUI CAMBIA
  12.  
  13. var NvoCampo= document.createElement("div");
  14.     NvoCampo.id= "divcampo_"+(campos);
  15.  
  16.     NvoCampo.innerHTML=
  17. "<table  width='80%' >" +
  18. '  <tr>'+
  19. '    <td height="30" colspan="2" bgcolor="#FAFAFA" class="Estilo2"><strong>'+campos+' Elemento de la orden de trabajo</strong></td>'+
  20. '   <td width="23%" height="30" align="center" bgcolor="#FAFAFA" class="Estilo2">'+
  21. "        <a href='JavaScript:quitarCampo(" + campos +");'> Quitar </a>" +
  22. '  </tr>'+
  23. '  <tr>'+
  24. '    <td colspan="3" class="Estilo2">Tipo de categor&iacute;a:'+
  25. '      <select name="categoria'+campos+'" id="categoria'+campos+'" onchange="JavaScript:agregarCampoS();">'+
  26. '        <option selected="selected">Seleccione</option>'+
  27. '        <option value="1">UNO</option>'+
  28. '        <option value="2">DOS</option>'+
  29. '      </select></td>'+
  30. '  </tr>'+
  31. '<tr>'+
  32. '  <td colspan="3" class="Estilo2">'+
  33. "<div id='contenido"+campos+"'></div>" +
  34. '  </td>'+
  35. '</tr>'
  36. "</table>";
  37.  
  38.     var contenedor= document.getElementById("contenedorcampos");
  39.     contenedor.appendChild(NvoCampo);
  40.  
  41. }

el problema es que mas adelante quiero usar esa variable en:

Código Javascript:
Ver original
  1. //jQuery
  2. $(document).ready(function (){
  3.     alert('CAMPOS: '+campos);
  4.  
  5. //Campos dependientes
  6.  
  7.    $("#categoria"+campos).change(function () {
  8.            $("#categoria"+campos+" option:selected").each(function () {
  9.             id_category = $(this).val();
  10.             $.post("subcategories.php", { id_category: id_category }, function(data){
  11.                 $("#parte"+campos).html(data);
  12.             });            
  13.         });
  14.    })  
  15. });

pero no me detecta la variable "campos", en alert me arroja valor "0", que estoy haciendo mal???

muchas gracias por su apoyo!!!

Última edición por yamsita; 05/10/2014 a las 17:37 Razón: error en el codigo
  #2 (permalink)  
Antiguo 05/10/2014, 18:22
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Usar variable javascript en Jquery en el mismo documento

La segunda parte del código (la que está hecha con métodos de jQuery) no va a servir pues ese cambio solo afectará al elemento cuyo id sea igua a "categoria0" pues es el valor inicial de la variable. Aunque incrementes el valor de campo en procesos posteriores, este no variará en la declaración inicial de dicho bloque, por eso es que nunca surtirá efecto.

Veo que erróneamente intentas asignar una función al evento onchange de cada lista. La idea es buena, pero debes de hacerlo así:

Código HTML:
Ver original
  1. onchange="agregarCampoS(this)"

Y en dicha función, lo recibes y tratas así:

Código Javascript:
Ver original
  1. function agregarCampoS(elemento){
  2.     $(elemento).el_método_que_desees();
  3.     //El resto de instrucciones
  4. }

Supongo que el segundo bloque de código contiene las instrucciones de la función que intentas invocar pues veo que deben de ejecutarse al producirse el evento change en la lista. Intenta adecuar lo que deseas hacer con lo que te he explicado y nos cuentas cómo te fue. Y por favor, no vayas a solamente copiar y pegar, analiza cada línea.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 05/10/2014, 19:12
 
Fecha de Ingreso: diciembre-2011
Mensajes: 90
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Usar variable javascript en Jquery en el mismo documento

Hola Alexis88 muchas gracias por tu respuesta,

Ya lo adapte como me comentas y realmente me cuesta un poco de trabajo ya que no había empleado jQuery anteriormente, pero en verdad me interesa mucho saberlo.

Agregue lo siguiente, y efectivamente ya me toma el valor de la variable "campos":

Código Javascript:
Ver original
  1. var campos = 0;
  2. var cuenta = 0;
  3. var ancho = 0;
  4. var largo = 0;
  5. var medida = "";
  6. var calculo='Area';
  7.  
  8. //Función agregar campos de categoría y partes
  9. function agregarCampoS(elemento){
  10.  
  11. //Aquí lo agregue!  
  12. $(elemento).change(function () {
  13.             alert('CAMPOS: '+campos);  //Ya imprime el valor de campos
  14.             id_category = $(this).val();
  15.             $.post("subcategories.php", {
  16.                 id_category: id_category }, function(data){
  17.                 $("#parte"+campos).html(data);
  18.             });  
  19.    })
  20.    
  21.     posicion=document.getElementById('categoria'+campos).options.selectedIndex;
  22.     posicion2 = document.getElementById('categoria'+campos).options[posicion].text;
  23.     container = document.getElementById('contenido'+campos) ;
  24.  
  25.  
  26. if(posicion2=="Moldura" || (posicion2=='Tipo de reparacion')){
  27.     container.innerHTML=
  28. "<table  width='80%' >" +
  29. '<tr>'+
  30. '  <td colspan="3" class="Estilo2">N&uacute;mero de parte:'+
  31. '  <select name="parte'+campos+'" id="parte'+campos+'" onchange="JavaScript:fncSumarPerimetro(campos);"></select></td>'+
  32. '</tr>'+
  33. '  <tr>'+
  34. '    <td colspan="3" class="Estilo2"><strong>Medidas</strong></td>'+
  35. '  </tr>'+
  36. '  <tr class="Estilo2">'+
  37. '    <td width="44%">Perimetro: <input name="medida_u'+ campos +'" type="text" id="medida_u'+ campos +'" size="5" disabled/> </td>'+
  38. '    <td width="20%">cm</td>'+
  39. '    <td>&nbsp;</td>'+
  40. '  </tr>'+
  41. '  <tr class="Estilo2">'+
  42. '    <td colspan="3">Precio unitario: $ <input name="precio_u'+ campos +'" type="text" id="precio_u'+ campos +'" size="10" disabled/> pesos</td>'+
  43. '  </tr>'+
  44. '  <tr>'+
  45. '   <td colspan="3" class="Estilo2 Estilo5">'+
  46. "-------------------------------------------------------------------------" +
  47. '  </tr>'+
  48. "</table>";
  49.     var contenedor2= document.getElementById("contenedorcampos2"+campos);
  50.     contenedor2.appendChild(NvoCampo2);
  51.    
  52. }if((posicion2=='Maria Luisa') || (posicion2=='Vidrio') || (posicion2=='Bastidor'  || (posicion2=='Macosel'))){
  53. container = document.getElementById('contenido'+campos) ;  
  54. //NvoCampo2= document.createElement("div");
  55.    
  56.     container.innerHTML=
  57. "<table  width='80%' >" +
  58. '  <tr>'+
  59. '    <td colspan="3" class="Estilo2"><strong>Medidas de los margenes</strong></td>'+
  60. '  </tr>'+
  61. '  <tr class="Estilo2">'+
  62. '    <td>Superior:'+
  63. ' <input name="superior" type="text" id="superior'+ campos +'" size="3" /> cm'+
  64. ' </td>'+
  65. ' <td colspan="2">Izquierdo:'+
  66. '<input name="izquierdo" type="text" id="izquierdo'+ campos +'" size="3" />cm</td>'+
  67. '  </tr>'+
  68. '  <tr class="Estilo2">'+
  69. '    <td>Inferior:'+
  70. '&nbsp;&nbsp;'+
  71. ' <input name="inferior" type="text" id="inferior'+ campos +'" size="3" /> cm</td>'+
  72. ' <td colspan="2">Derecho:'+
  73. '<input name="derecho" type="text" id="derecho'+ campos +'" size="3" /> cm'+
  74. '  </tr>'+
  75. '<tr>'+
  76. '  <td colspan="3" class="Estilo2">N&uacute;mero de parte:'+
  77. '  <select name="parte'+campos+'" id="parte'+campos+'" onchange="JavaScript:fncSumarArea();"></select></td>'+
  78. '</tr>'+
  79. '  <tr class="Estilo2">'+
  80. '    <td width="54%">Área: <input name="medida_u'+ campos +'" type="text" id="medida_u'+ campos +'" size="5" disabled/> '+
  81. ' cm<sup>2</sup></td>'+
  82. '    <td width="10%"></td>'+
  83. '    <td width="36%">&nbsp;</td>'+
  84. '  </tr>'+
  85. '  <tr class="Estilo2">'+
  86. '    <td colspan="3">Precio unitario: $ <input name="precio_u'+ campos +'" type="text" id="precio_u'+ campos +'" size="10" disabled/> pesos</td>'+
  87. '  </tr>'+
  88. '  <tr>'+
  89. '   <td colspan="3" class="Estilo2 Estilo5">'+
  90. "-------------------------------------------------------------------------" +
  91. '  </tr>'+
  92. "</table>";
  93.     var contenedor2= document.getElementById("contenedorcampos2"+ campos);
  94.     contenedor2.appendChild(NvoCampo2);
  95. }
  96.    
  97. }
  98.        
  99. //Funcion agregar campos de categoria y partes
  100. function agregarCampo(){
  101. campos = campos + 1;
  102.  
  103. var NvoCampo= document.createElement("div");
  104.     NvoCampo.id= "divcampo_"+(campos);
  105.  
  106.     NvoCampo.innerHTML=
  107. "<table  width='80%' >" +
  108. '  <tr>'+
  109. '    <td height="30" colspan="2" bgcolor="#FAFAFA" class="Estilo2"><strong>'+campos+' Elemento de la orden de trabajo</strong></td>'+
  110. '   <td width="23%" height="30" align="center" bgcolor="#FAFAFA" class="Estilo2">'+
  111. "        <a href='JavaScript:quitarCampo(" + campos +");'> Quitar </a>" +
  112. '  </tr>'+
  113. '  <tr>'+
  114. '    <td colspan="3" class="Estilo2">Tipo de categor&iacute;a:'+
  115. '      <select name="categoria'+campos+'" id="categoria'+campos+'" onchange="agregarCampoS(this)">'+
  116. '        <option value="1">Maria Luisa</option>'+
  117. '        <option value="2">Moldura</option>'+
  118. '      </select></td>'+
  119. '  </tr>'+
  120. '<tr>'+//  bgcolor="#CC0066"
  121. '  <td colspan="3" class="Estilo2">'+
  122. "<div id='contenido"+campos+"'></div>" +
  123. '  </td>'+
  124. '</tr>'
  125. "</table>";
  126.  
  127.     var contenedor= document.getElementById("contenedorcampos");
  128.     contenedor.appendChild(NvoCampo);
  129.  
  130.  
  131. }
  132.  
  133. //Funcion para quitar elementos
  134. function quitarCampo(iddiv){
  135.   var eliminar = document.getElementById("divcampo_" + iddiv);
  136.   var contenedor= document.getElementById("contenedorcampos");
  137.   contenedor.removeChild(eliminar);
  138.  
  139. }

sin embargo, pasa algo raro ya que cuando cambio por primera vez el select ("categoria"+campos) no se muestra el Alert, después si cambio nuevamente el valor del select el "Alert" se muestra 2 veces y si vuelvo a cambiar el valor del select aparece una vez mas, osea 3, y así sucesivamente.

aparte no ejecuta el archivo "subcategories.php":

Código PHP:
<?php

$conexion 
= new mysqli('localhost''''''');

$id_category $_POST['id_category'];

$result $conexion->query("SELECT * FROM clientes WHERE tienda = ".$id_category);
if (
$result->num_rows 0) {
    while (
$row $result->fetch_assoc()) {                
        
$html .= '<option value="'.$row['id'].'">'.$row['nombre'].'</option>';
    }
}
echo 
$html;
?>
en verdad agradezco mucho tu ayuda!!
muchas gracias!
  #4 (permalink)  
Antiguo 05/10/2014, 20:18
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Usar variable javascript en Jquery en el mismo documento

Fíjate en la consola (en Chrome, F12 y luego 'Console') si se muestra algún mensaje de error al realizar el primer cambio que mencionas.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #5 (permalink)  
Antiguo 06/10/2014, 00:22
 
Fecha de Ingreso: diciembre-2011
Mensajes: 90
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Usar variable javascript en Jquery en el mismo documento

Gracias Alex,

en verdad creo que necesito leer un poco mas por que no le entiendo, sabrás de algún manual que pueda ayudarme?

de antemano muchas gracias!

Yamil
  #6 (permalink)  
Antiguo 06/10/2014, 00:36
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Usar variable javascript en Jquery en el mismo documento

Lo que te pedí es que te fijaras en la consola si se está mostrando algún mensaje de error al momento de ejecutar la función (la primera vez, cuando no se muestra el mensaje de alerta). Es una de las maneras utilizadas para localizar la existencia de errores en nuestro código. Simplemente pulsa la tecla F12, luego de esto, se abrirá un panel en la parte inferior del navegador. En ella habrá una serie de opciones en la parte superior, siendo la última de ella una de nombre 'Console'. Pulsa sobre esta opción y ejecuta la función; si existe algún error, ahí se mostrará mediante un mensaje.

Y con respecto a lo otro, este es un buen libro para aprender sobre jQuery.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #7 (permalink)  
Antiguo 06/10/2014, 01:25
 
Fecha de Ingreso: diciembre-2011
Mensajes: 90
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Usar variable javascript en Jquery en el mismo documento

ALEX.... Mil gracias por los tips, la paciencia y el libro.

Efectivamente salían varios errores, sin embargo lo arregle con una función de auto-completado:

Código Javascript:
Ver original
  1. <input name="parte'+campos+'" type="text" id="parte'+campos+'" placeholder="No. de parte" size="8" onfocus="catalogo(this);"/>
  2. <div id="partes"></div>
  3.  
  4. function catalogo(){
  5.        
  6.  //Al escribr dentro del input parte
  7.   $("#parte"+campos).keypress(function(){
  8.         //Obtenemos el value del input
  9.         var partesi = $('#parte'+campos).val();        
  10.         var dataString = 'partesi='+partesi;
  11.  
  12.         //Le pasamos el valor del input al ajax
  13.         $.ajax({
  14.             type: "POST",
  15.             url: "../Administracion/autocomplete2.php",
  16.             data: dataString,
  17.             success: function(data) {
  18.                 //Escribimos las sugerencias que nos manda la consulta
  19.                 $('#partes').fadeIn(1000).html(data);
  20.                 //Al hacer click en algua de las sugerencias
  21.                 $('.partes-element').click(function(){
  22.                     //Obtenemos la id unica de la sugerencia pulsada
  23.                     var id = $(this).attr('id');
  24.                     //Editamos el valor del input con data de la sugerencia pulsada
  25.                     $('#parte'+campos).val($('#'+id).attr('nombre'));
  26.                     $('#precio'+campos).val($('#'+id).attr('id'));
  27.                     //Hacemos desaparecer el resto de sugerencias
  28.                     $('#partes').fadeOut(1000);
  29.                 });              
  30.             }
  31.         });
  32.     });      
  33. }

y este es el autocomplete:

Código PHP:
<?php
header
'Content-type: text/html; charset=iso-8859-1' );
include (
"conexion.php");

$base 'dbase';
mysql_select_db($base) or die('No pudo seleccionarse la BD.');
 
$search $_POST['partesi'];

$query_services mysql_query("SELECT * FROM catalogo WHERE (uno like '%".$search."%')||(dos like '%".$search."%')");
if(!
$query_services){die('Could not connect: ' mysql_error());}

while (
$row_services mysql_fetch_array($query_services)) {
  
    echo 
'<div class="item"><a class="partes-element" 
    nombre="'
.$row_services['uno'].'" 
    id="'
.$row_services['dos'].'">'.$row_services['uno'].'</a></div>';
}
?>
Me sirvió mucho comprobarlo en 'Console', en verdad muchas gracias por todo! y revisare el otro código para implementarlo también
Un abrazo


Etiquetas: javascript, usar, variable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:46.