Tema: Problema con ASP y Ajax
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/04/2010, 13:53
darkmcloud
 
Fecha de Ingreso: octubre-2007
Mensajes: 191
Antigüedad: 16 años, 7 meses
Puntos: 0
Problema con ASP y Ajax
Buenas amigos de foros del web....tengo el siguiente problema.....resulta que tengo un formulario donde mediante ajax utilizo autocompletar para sugerir los modelos de productos que se encuentran almacenados....de ahí todo bien....el problema es que cuando el formulario tiene más de una "línea de venta" no funciona el autocompletar....
Esta es la imagen del formulario:



En este ejemplo...solo para la primera línea.. o sea la del CSR 80200 funciona el autocompletar....pero al seguir con el resto de los registros de abajo (del campo modelo) no funciona.....

Este es el código del formulario:

Ingreso.asp
Código ASP: 
Ver original
  1. <%
  2.  
  3.     if Not IsEmpty(Request("distribuidor")) then
  4. DISTRIBUIDOR = Request("distribuidor")
  5.     end if
  6.  
  7.     if Not IsEmpty(Request("loc")) then
  8. LOC             = Request("loc")
  9.     end if
  10.     
  11.     if Not IsEmpty(Request("guia_d")) then
  12. GUIA_D = Request("guia_d")
  13.     end if
  14.     
  15.     if Not IsEmpty(Request("cod_auto")) then
  16. COD_AUTO = Request("cod_auto")
  17.     end if
  18.     
  19.  
  20. CANTIDAD    =Trim ( cdbl(Request("cantidad")) )
  21.  
  22. CSR_INI        =Trim ( cdbl(Request("csr_ini")) )
  23.  
  24. Actual     = date()
  25.  
  26. Set Cnn = Server.CreateObject( "ADODB.Connection" )
  27. Set RS = Server.CreateObject( "ADODB.Recordset" )
  28. Cnn.Open Session("cnx")
  29.  
  30. strSQL="SELECT distribuidor FROM Distribuidores where idDistribuidor='"&distribuidor&"'"
  31. set rs = Cnn.Execute(strSQL)
  32.  
  33. distribuidor = rs.Fields("distribuidor") 
  34.  
  35. strSQL = "SELECT  ( "&CSR_INI&" + "&CANTIDAD&")-1  as CONTADOR"
  36. set rs= Cnn.Execute(strSQL)
  37.  
  38. %>
  39. <style type="text/css">
  40. <!--
  41. body {
  42.     background-image: url(../inventario/images/2x1900.jpg);
  43. }
  44. -->
  45.  
  46. #contenedor div.seleccionado {font-weight:bold; background:#F0F0F0; color:#black;}
  47. #contenedor div.deseleccionado {background:#FFFFFF; color:#000000;}
  48. #contenedor div{font:11px verdana; color:#000000; cursor:pointer; text-align:left; padding:2px 5px;}
  49.  
  50. .capa {
  51. background: #FFFFFF;
  52. border:1px solid rgb(120,120,120);
  53. width: 150px;
  54. _width: 250px;
  55. text-align: left;
  56. position: absolute;
  57. top: 30px;
  58. _top:38px;
  59. left: 117px;
  60. _left: 119px;
  61. }
  62. </style>
  63. <script type="text/javascript">
  64. var SelUsuario = {
  65.  
  66. Evento: function (elemento,nomevento,funcion) {
  67.   if (elemento.attachEvent)
  68.   {
  69.       var f=function(){
  70.         funcion.call(elemento,window.event);
  71.     }
  72.     elemento.attachEvent('on'+nomevento,f);
  73.     return true;
  74.   }
  75.   else  
  76.     if (elemento.addEventListener)
  77.     {
  78.       elemento.addEventListener(nomevento,funcion,false);
  79.       return true;
  80.     }
  81.     else
  82.       return false;
  83. },
  84.  
  85.  
  86.  
  87. init: function(){
  88. var elem1 = document.getElementById("txt");
  89. var elem2 = document.getElementById("contenedor");
  90.         SelUsuario.Evento(elem1, 'keyup', SelUsuario.Empieza);
  91.         SelUsuario.Evento(elem2, 'mouseover', SelUsuario.Seleccionar);
  92.         SelUsuario.Evento(elem1, 'keydown', SelUsuario.Pegar2);
  93.         SelUsuario.Evento(window, 'click', SelUsuario.Cerrar);
  94.     },
  95.  
  96.  
  97.  
  98.  
  99. creaAjax: function (){
  100.     var ajaxs = ["Msxml2.XMLHTTP","Msxml2.XMLHTTP.4.0","Msxml2.XMLH TTP.5.0","Msxml2.XMLHTTP.3.0","Microsoft.XMLHTTP"];
  101.     var ajax = false;
  102.     for(var i=0 ; !ajax && i<ajaxs.length ; i++){
  103.         try{ 
  104.             ajax = new ActiveXObject(ajaxs[i]);   // Internet Explorer
  105.         }
  106.         catch(e) { 
  107.             ajax = false; 
  108.         }
  109.     }
  110.     if(!ajax && typeof XMLHttpRequest!='undefined') {
  111.         ajax = new XMLHttpRequest();  // Firefox, Opera 8.0+, Safari
  112.     }
  113.     return ajax;
  114. },
  115.  
  116. Empieza: function (ev) {
  117. var str = document.getElementById(this.id).value;
  118. var obj = document.getElementById("contenedor");
  119. var ref = obj.getElementsByTagName('DIV');
  120. var keyCode = document.layers ? ev.which : document.all ? event.keyCode : document.getElementById ? ev.keyCode : 0;
  121.  
  122.  
  123.  if (keyCode == 40) {
  124. //alert("flecha abajo")
  125.     SelUsuario.BajaOpt ()
  126.  } else if (keyCode == 38) {
  127. //alert("flecha arriba")
  128.     SelUsuario.SubeOpt ()
  129.  
  130.  
  131.  
  132.  
  133. } else if (keyCode == 13) {
  134.  
  135. for (var i = 0; i <= ref.length-1; i++) {
  136. if (ref[i].className == "seleccionado") { 
  137.  
  138.         document.getElementById("txt").value = ref[i].id;
  139.         if (obj.style.display == "block"); obj.style.display= "none";
  140.         break;
  141.         }
  142.  
  143.     }
  144.  
  145.     try{ // DOM;
  146.         ev.preventDefault();
  147.         }catch(e){ // iexplore;
  148.         ev.returnValue = false;
  149.         }
  150.  
  151. } else {
  152.  
  153.     if (str.length < 2) { 
  154.         //obj.innerHTML = "";
  155.         if (obj.style.display == "none")  obj.style.display= "none";
  156.                 else obj.style.display= "none"; 
  157.         return;
  158.     }
  159.     ajax = SelUsuario.creaAjax()
  160.     if (ajax==null) {
  161.         alert ("Tu navegador no soporta Ajax");
  162.         return;
  163.      } 
  164. var url="sugest/SelecUsuarios.asp?q="+escape(str);
  165.     ajax.open("GET",url,true);
  166.     ajax.onreadystatechange = SelUsuario.Despliega;
  167.     //ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  168.             ajax.send(null);
  169.             return
  170. }
  171. },
  172.  
  173.  
  174.  
  175. Despliega: function () { 
  176. var obj = document.getElementById("contenedor");
  177.     
  178.         if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3) {
  179.                                         obj.innerHTML = "<p align='center'><img src='../images/cargando.gif' border='0px' widht='15px' height='15px'/></p>";
  180.             obj.style.display= "block";
  181.                 }
  182.  
  183.                 else if (ajax.readyState==4) {
  184.             if (ajax.status==200) {
  185.             obj.innerHTML = unescape(ajax.responseText);
  186.  
  187.             }else {
  188.                                     obj.innerHTML = "<p>Se ha producido un error</p>";
  189.             }
  190.  
  191.         if (obj.style.display == "none")  obj.style.display= "block";
  192.         }
  193. },
  194.  
  195.  
  196.  
  197. Seleccionar: function () {
  198. var ref = document.getElementById(this.id).getElementsByTagName('DIV');
  199. //alert(ref);
  200. for (var i = 0; i < ref.length; i++) {
  201.  
  202. SelUsuario.Evento(ref[i], 'click', function() {
  203. SelUsuario.Pegar(this.id);
  204. //alert(this.id);
  205. })   
  206.  
  207.  
  208. SelUsuario.Evento(ref[i], 'mouseover',  function() {
  209. SelUsuario.Marcar(this.id);
  210. })
  211.  
  212. //SelUsuario.Evento(ref[i], 'mouseout',  function() {
  213. //SelUsuario.DesMarcar(this.id);
  214. //})
  215. }
  216. },
  217.  
  218.  
  219.  
  220. Pegar: function (valor) {
  221. //alert("el val " +valor);
  222. var obj = document.getElementById("contenedor")
  223.         document.getElementById("txt").value = valor;
  224.                 if (obj.style.display == "block"); obj.style.display= "none";       
  225. },
  226.  
  227.  
  228. Pegar2: function (ev) {
  229. var obj = document.getElementById("contenedor")
  230. var ref = obj.getElementsByTagName('DIV');
  231. var keyCode = document.layers ? ev.which : document.all ? event.keyCode : document.getElementById ? ev.keyCode : 0;
  232.  
  233. // enter 13 tab 9
  234. if ((keyCode == 13) || (keyCode == 9)) {
  235. //alert("enter")
  236.  
  237. for (var i = 0; i <= ref.length-1; i++) {
  238. if (ref[i].className == "seleccionado") { 
  239.  
  240.         document.getElementById("txt").value = ref[i].id;
  241.         //window.focus();
  242.         if (obj.style.display == "block"); obj.style.display= "none";
  243. break;
  244. //alert(ref[i].id);
  245.  
  246.  
  247. }
  248. }
  249.  
  250. if (keyCode == 13) {
  251.     try{ // DOM;
  252.         ev.preventDefault();
  253.         }catch(e){ // iexplore;
  254.         ev.returnValue = false;
  255.         }
  256. }
  257.  
  258.  
  259. }   
  260. },
  261.  
  262.  
  263.  
  264.  
  265.  
  266. BajaOpt: function() {
  267. var ref = document.getElementById("contenedor").getElementsByTagName('DIV');
  268. for (var i = 0; i <= ref.length-1; i++) {
  269. if (ref[i].className == "seleccionado") { 
  270. ref[i].className = "deseleccionado";
  271. if (i < ref.length-1){
  272. i++;
  273. }else{
  274. i = 0;
  275. }
  276. //alert("Largo: " +(ref.length-1)+ " Valor: " +i);
  277. ref[i].className = "seleccionado"
  278. }
  279. }
  280. },
  281.  
  282.  
  283. SubeOpt: function() {
  284. var ref = document.getElementById("contenedor").getElementsByTagName('DIV');
  285. for (var i = 0; i <= ref.length-1; i++) {
  286. if (ref[i].className == "seleccionado") { 
  287. ref[i].className = "deseleccionado";
  288. if (i < ref.length && i > 0){
  289. i--;
  290. }else{
  291. i = ref.length-1;
  292. }
  293. //alert("Largo: " +(ref.length-1)+ " Valor: " +i);
  294. ref[i].className = "seleccionado"
  295. }
  296. }
  297. },
  298.  
  299.  
  300.  
  301. Marcar: function (id) {
  302. var selecionado = document.getElementById(id);
  303. var ref = document.getElementById("contenedor").getElementsByTagName('DIV');
  304. for (var i = 0; i <= ref.length-1; i++) {
  305. if (ref[i].id != id) { 
  306. ref[i].className = "deseleccionado";
  307. selecionado.className = "seleccionado";
  308. } 
  309. }
  310. },
  311.  
  312. //DesMarcar: function (id) {
  313. //var ref = document.getElementById(id);
  314. //alert(ref);
  315. //ref.className = "deseleccionado"
  316. //alert("el " +id);         
  317. //},
  318.  
  319.  
  320. Cerrar: function () {   
  321. var obj = document.getElementById("contenedor")
  322.             if (obj.style.display == "block"); obj.style.display= "none";   
  323.     
  324. }
  325. }
  326.  
  327. SelUsuario.Evento(window, 'load', SelUsuario.init); 
  328. </script> 
  329. <form>
  330. <table width="430" height="103" border="1" align="center" bordercolor="#0000FF">
  331. <tr>
  332. <td width="213"><p>Distribuidor: <%=response.write (""&DISTRIBUIDOR&"") %></p>
  333. <p>Local: <%=response.write (""&LOC&"") %></p>
  334. <p>Fecha: <%=response.write (""&ACTUAL&"") %></p></td>
  335. <td width="130"><p>Gu&iacute;a de Despacho </p><p>N&ordm;: <%=response.write (""&GUIA_D&"") %></p></td>
  336. </tr>
  337. </table>
  338. <p align="center">&nbsp;</p>
  339.  
  340. <%For cuen = ""&CSR_INI&"" To ""&rs("CONTADOR")&"" Step 1%>
  341. <table width="351" border="1" align="center" bordercolor="#0000FF">
  342.  
  343. <tr>
  344. <td>Sel</td>   
  345. <td width="36">Csr:</td>
  346. <td width="70">Modelo:</td>
  347. <td width="47">Serie:</td>
  348. <td width="170">Comentarios:</td>
  349. </tr>
  350. <tr>
  351. <td width="21"><input type="checkbox" name="cod" value="" tabindex="1" ></td> 
  352. <td height="55"><input name="csr" readonly="readonly" size="3" value=<%=response.write (""&cuen&"") %> tabindex="2"></td>
  353. <td><input type="text" name="txt" id="txt" value="" autocomplete="off" tabindex="3"></td>
  354. <div id="contenedor" class="capa" class="vink" style="margin:5px 0px 0px 10px">
  355. <div id="contenedor" class="capa" style="display:none;"></div></div> 
  356.  
  357. <td><input  name="serie" tabindex="4"></td>
  358. <td><textarea name="comentarios" cols="30" rows="3" wrap="VIRTUAL" tabindex="5"></textarea></td>
  359. </tr>
  360.  
  361. </table>
  362. <%next%>
  363. <p align="center">&nbsp;</p>
  364. </form>