Question

I have a text box that I am the user enters a Supplier Name into. On the blur I want to check a webservice to see if the Supplier exists, and if it does I would like to return the Supplier ID from the webservice and use it to populate another text box.

The webservice is working fine because I am using it fine in other places (with similar code to do autocomplete) It returns the data in JSON and looks like this:

<?xml version="1.0" encoding="UTF-8"?>
-<ArrayOfSuppliers xmlns="http://tempuri.org/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> 
  -<Suppliers> 
       <SupplierID>1</SupplierID> 
       <SupplierName>Supplier 1</SupplierName> 
   </Suppliers> 
 </ArrayOfSuppliers>

This following code is a mess, and will not work as it is. I hope that it helps explain what I am trying to do, and also so you can help me to understand what I am doing wrong and how the data is returned and usable.

As a starting point I am getting an error that ‘response’ is undefined. I can see why, but I don’t understand enough to know what I need to do to fix it.

   $(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");              
             }
         });
        }
        );
    });

After I get this working I still need to know how to take what is returned and set a text box, but I can probably work my way through that if I can get this code to somewhat function.

Edit

I have some autocomplete working with this code:

$(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);
    },
});

});

And was trying to use that as a basis to do what I mentioned at the top with the blur. I don’t understand enough how to simply get and use the data returned from a webservice so I was trying to reverse engineer the autocomplete code to help myself understand it.

Answer 1

Well I finally figured it out. I was pretty sure I was on the wrong path but I didn’t know what I was doing wrong or how to access the data returned from the web service. Darin was helpful it getting me to fight some more with the code and not give up. I don’t think he fully understood what I wanted to do, but did understand that I was trying to use code that I didn’t understand 🙂 I did use his stringify suggestion in my final result, but it was working without it as well… he was just mentioning this as a better option than the code I was using for that purpose I am assuming.

I finally started to figure out the correct syntax – aka: data.d.SupplierID but even though that seemed to be working for other people on the web it would still not return what I was looking for. I finally came across someone that was using the index – aka: data.d[0].SupplierID and it finally started to work for me. I was wondering about the index for a while but didn’t understand how to handle it.

Here is the final working code:

    $(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");
             }
         });
        }
        );
    });

I added the if statement to check for nulls because it was not causing an error when no results were found so I couldn’t handle it in the error function. I am assuming this is by design because a SQL query returning null is not necessarily an error, just something I need to deal with. If anyone has a better (or correct) way to handle this please let me know.