jQuery blur para verificar que el servicio web coincida y devolver datos para configurar múltiples cuadros de texto

Tengo un cuadro de texto en el que soy el usuario que ingresa un Nombre de proveedor. En el desenfoque, quiero verificar un servicio web para ver si existe el Proveedor, y si lo hace, deseo devolver el ID del Proveedor desde el servicio web y usarlo para rellenar otro cuadro de texto.

El servicio web funciona bien porque lo estoy usando bien en otros lugares (con un código similar para realizar el autocompletado). Devuelve los datos en JSON y se ve así:

 - - 1 Supplier 1   

Este código siguiente es un desastre y no funcionará como está. Espero que ayude a explicar lo que estoy tratando de hacer, y también para que pueda ayudarme a entender lo que estoy haciendo mal y cómo se devuelven y utilizan los datos.

Como punto de partida, obtengo el error de que la “respuesta” no está definida. Puedo ver por qué, pero no entiendo lo suficiente como para saber qué debo hacer para solucionarlo.

  $(document).ready(function () { $("[id$=txtSupplier]").blur(function () { $.ajax({ type: "POST", url: "http://localhost:52350/FabRouting/Webservice/SupplierList.asmx/GetSuppliers", data: "{ 'SupplierSearch': '" + $("[id$=txtSupplier]").val() + "' }", contentType: "application/json; charset=utf-8", dataType: "json", dataFilter: function (data) { return data; }, success: function (data) { response($.map(data.d, function (item) { return { value: item.SupplierName, id: item.SupplierID } })) }, error: function(e){ $("[id$=lblSupplier]").html("Unavailable"); } }); } ); }); 

Una vez que haya funcionado, todavía necesito saber cómo tomar lo que se devuelve y establecer un cuadro de texto, pero probablemente pueda hacerlo si puedo hacer que este código funcione de alguna manera.

Editar

Tengo algunos autocompletados trabajando con este código:

 $(document).ready(function () { $(".cRejectedOnSDRR").autocomplete({ source: function (request, response) { $.ajax({ url: "http://localhost:52350/FabRouting/Webservice/ReportList.asmx/GetReports", data: "{ 'ReportNumberSearch': '" + request.term + "' }", dataType: "json", type: "POST", contentType: "application/json; charset=utf-8", dataFilter: function (data) { return data; }, success: function (data) { response($.map(data.d, function (item) { return { value: item.ReportNumber, id: item.SDRRID } })) }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); } }); }, minLength: 1, select: function (event, ui) { $("[id$=lblRejectedOnSDRRID]").html(ui.item.id); }, }); 

});

Y estaba tratando de usar eso como base para hacer lo que mencioné en la parte superior con el desenfoque. No entiendo lo suficiente cómo simplemente obtener y utilizar los datos devueltos por un servicio web, por lo que estaba intentando realizar una ingeniería inversa del código de autocompletado para ayudarme a entenderlo.

Para empezar, debe activar JSON en su servicio web decorándolo con el [ScriptService] porque ahora devuelve XML, no JSON:

 [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [ScriptService] public class SupplierList: System.Web.Services.WebService { public Suppliers[] GetSuppliers(string supplierSearch) { ... } } 

Luego, debe usar el método JSON.stringify en lugar de la concatenación de cadenas que hizo al crear su parámetro de data en el cliente, lo que garantizará la encoding JSON correcta del parámetro de solicitud:

 data: JSON.stringify({ supplierSearch: $("[id$=txtSupplier]").val() }, 

luego, dentro de su callback success , está usando data.d cual está bien con los servicios web habilitados para JSON, ya que usan la propiedad .d , pero parece que está llamando a alguna función de javascript de response dentro de su $.map que obviamente no existe en su contexto tal como está dentro del contexto de una callback de solicitud AJAX exitosa. Supongo que es una acción muy mala de copiar-pegar sin entender lo que significa el código de su parte de algún ejemplo de complemento de autocompletado de jQuery UI que usa esta función pero que no tiene sentido en su escenario.

Entonces, sí, el mensaje de error que está recibiendo en este momento tiene mucho sentido. No ha definido la función de response y, sin embargo, está intentando invocarla.

Si desea utilizar el complemento de autocompletado de jQuery, esa no es la forma correcta de usarlo. No debes suscribirte a ningún evento borroso. Deberías leer la documentación para ejemplos. Pero ni siquiera estoy seguro de lo que estás tratando de lograr.

Así que esto es lo que podría intentar si quiere conectar este complemento con su servicio web:

 $(document).ready(function () { $('[id$=txtSupplier]').autocomplete({ source: function(request, response) { $.ajax({ url: 'http://localhost:52350/FabRouting/Webservice/SupplierList.asmx/GetSuppliers', data: JSON.stringify({ supplierSearch: request.term }, contentType: 'application/json; charset=utf-8', success: function(data) { response($.map(data.d, function(item) { return { label: item.SupplierID, value: item.SupplierName } })); } }); }, minLength: 2 }); }); 

Como se hace aquí :

 var SupplierID = $(data).find("SupplierID").text(); 

Majid tiene razón, a menos que serialice su XML a JSON esto no funcionará, sin embargo, no creo que su error se deba a esto. ¿Has mirado en GenericHandlers ?

Bueno, finalmente me di cuenta. Estaba bastante seguro de que estaba en el camino equivocado, pero no sabía qué estaba haciendo mal o cómo acceder a los datos devueltos por el servicio web. Darin me ayudó a que luchara un poco más con el código y no se rindiera. No creo que entendiera completamente lo que quería hacer, pero entendió que estaba tratando de usar un código que no entendía 🙂 Sí utilicé su sugerencia de cadena en mi resultado final, pero funcionó sin eso como bueno … él solo mencionaba esto como una mejor opción que el código que estaba usando para ese propósito que estoy asumiendo.

Finalmente, comencé a descubrir la syntax correcta, también conocida como data.d.SupplierID, pero a pesar de que parecía estar funcionando para otras personas en la web, aún no devolvía lo que estaba buscando. Finalmente me encontré con alguien que estaba usando el índice – aka: data.d [0] .SupplierID y finalmente comenzó a funcionar para mí. Me preguntaba por el índice por un tiempo, pero no entendía cómo manejarlo.

Aquí está el código de trabajo final:

  $(document).ready(function () { $("[id$=txtSupplier]").blur(function () { $.ajax({ type: "POST", url: "http://localhost:52350/FabRouting/Webservice/SupplierList.asmx/CheckSupplier", data: JSON.stringify({ SupplierSearch: $("[id$=txtSupplier]").val() }), contentType: "application/json; charset=utf-8", dataType: "json", success: function(data){ if (data.d.length == 0) { $("[id$=lblSupplierID]").html("0"); } else { $("[id$=lblSupplierID]").html(data.d[0].SupplierID); } }, error: function(e){ $("[id$=lblSupplierID]").html("0"); } }); } ); }); 

Agregué la instrucción if para verificar los nulos porque no estaba causando un error cuando no se encontraron resultados, por lo que no pude manejarlo en la función de error. Supongo que esto es por diseño porque una consulta SQL que devuelve un valor nulo no es necesariamente un error, solo es algo con lo que debo lidiar. Si alguien tiene una forma mejor (o correcta) de manejar esto, hágamelo saber.