Foros del Web » Programando para Internet » Jquery »

ajax y jquery

Estas en el tema de ajax y jquery en el foro de Jquery en Foros del Web. mmm digamos que soy un poco nuevo usando javascript y con el paso del tiempo me e dado cuenta que con jquery se puede simplificar ...
  #1 (permalink)  
Antiguo 08/06/2012, 08:38
Avatar de danielnv18  
Fecha de Ingreso: junio-2012
Mensajes: 19
Antigüedad: 12 años, 4 meses
Puntos: 0
ajax y jquery

mmm digamos que soy un poco nuevo usando javascript y con el paso del tiempo me e dado cuenta que con jquery se puede simplificar muchos del codigo de javascript en unas cuantas linea asi que les pido ayuda a hacer mas simple este codigo con jquery


Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.     function pruebas(str, divID){
  3.         if (str.length==0){
  4.             document.getElementById("pCode").innerHTML="";
  5.             return;
  6.         }if (window.XMLHttpRequest){
  7.             xmlHttp=new XMLHttpRequest();
  8.         }else{
  9.             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  10.         }
  11.         var url2="security/codename.php?C=" + str;
  12.         url2 = url2 + "&amp;sid="+Math.random();
  13.         var url="security/results.php?R=" + str;
  14.         url=url+"&amp;sid="+Math.random();
  15.         xmlHttp.open("GET",url,false);
  16.         xmlHttp.send();
  17.         document.getElementById("results").innerHTML=xmlHttp.responseText;
  18.  
  19.         xmlHttp.open("GET",url2,false);
  20.         xmlHttp.send();
  21.         document.getElementById("pName").value=xmlHttp.responseText;
  22.     }
  23.  
  24. function code(str, divID){
  25.         if (str.length==0){
  26.             document.getElementById("pName").innerHTML="";
  27.             return;
  28.         }if (window.XMLHttpRequest){
  29.             xmlHttp=new XMLHttpRequest();
  30.         }else{
  31.             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  32.         }
  33.        
  34.         var url="security/codename.php?N=" + str;
  35.         url=url+"&amp;sid="+Math.random();
  36.         xmlHttp.open("GET",url,false);
  37.         xmlHttp.send();
  38.         document.getElementById("pCode").value =xmlHttp.responseText;
  39.  
  40.         var url2="security/results.php?R=" + xmlHttp.responseText;
  41.         url2=url2+"&amp;sid="+Math.random();
  42.         xmlHttp.open("GET",url2,false);
  43.         xmlHttp.send();
  44.         document.getElementById("results").innerHTML=xmlHttp.responseText;
  45.     }

y lo tengo con ese form

Código HTML:
<label for="pCode">Codigo:</label>
<input type="text" id="pCode" name="pCode" class="required" value="" onkeyup="pruebas(this.value)" ></br>
<label for="pName">Nombre:</label>
<input type="text" id="pName" name="pName" class="required" value="" onkeyup="code(this.value)">

<div id="results" class="required"></div> 

eso en resumidas cuentas lo que hace es que cada producto tiene nombre y codigo y cuando digita el nombre se autocompleta el codigo y viceversa ademas de crear una tabla segun el codigo correspondiente al producto

como hago ese mismo codigo nada mas que con jquery?
  #2 (permalink)  
Antiguo 08/06/2012, 16:12
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 13 años, 6 meses
Puntos: 344
Respuesta: ajax y jquery

Buenas,

El código sería algo así, te lo hago de una función y ya miras tú como hacerlo en la otra. Mirate la documentación, que ahí viene todo.

Código Javascript:
Ver original
  1. function pruebas(str, divID){
  2.    
  3.  
  4.         if (str.length==0){
  5.             $("#pCode").empty();
  6.             return;            
  7.         }        
  8.        
  9.         var url="security/results.php";
  10.         var url2="security/codename.php";
  11.        
  12.         $.ajax({
  13.   type: "GET",
  14.   url: url,
  15.   data: { R: str, sid: Math.random()},
  16.   success: function(data) {
  17.     $('#results').html(data);  
  18.   }
  19. });
  20.        
  21.         $.ajax({
  22.   type: "GET",
  23.   url: url2,
  24.   data: { C: str, sid: Math.random()},
  25.   success: function(data) {
  26.     $('#pName').html(data);  
  27.   }
  28. });
  29. }&#8203;

Las llamadas con ajax es mejor hacerlas asincrónicas, no sincronas como las estás haciendo tú, porque si las haces síncronas, el navegador se congela mientras dura la petición.

Saludos.

Etiquetas: ajax, javascript
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 19:24.