asp.net webservice jquery populate textbox

Question

I want to get 3 values from a web service by providing current URL and current user. My webservice accepts 2 parameter URL and user. Web service works fine.

Now I want to put this 3 values in 3 different textboxes using jquery.in txtOrgCity = city, in txtPin = pin, in txtCountry = country

bellow is code for txtOrgCity

$(document).ready(function () {
            $('#txtOrgCity').val({
                source: function (request, response) {
                    $.ajax({
                        url: '../lead_hunter.asmx/GetOrgCity',
                        method: 'post',
                        contentType: 'application/json;charset=utf-8',
                        data: JSON.stringify({ url: "http://srv3.testsrv.com/homepage", user: "testuser@testsrv.com" }),
                        dataType: 'json',
                        success: function (data) {
                            response(data.d);

                        },
                        error: function (err) {
                            alert(err);
                        }
                    });

when I run it gives me [object object] in text box.

How do I define to grab City for txtOrgCity, pin for txtOrgPin, country for txtOrgCountry in response(data.d).?

and do I need to duplicate the same code for other 2 text boxes or any better way.?

Given code is just for some txtbox autocomplete and it works perfectly so I just wanted it to modify a bit for my need. $('#txtOrgCity').val was $('#txtOrgCity').autocomplete

Any help would be appreciated.

-- Thanks

Answer 1

Instead of $('#txtOrgCity').val({})

In your .ready function make the AJAX call first. Store d.OrgCity, d.OrgPin & d.OrgCountry into some local JavaScript variables. In the Ajax call success use these values to deposit into textboxes like

$('#txtOrgCity').val(d.OrgCity)

Answer 2

I recommend that you open this up in google chrome. Open up your developer tools (press f12) and, open up resources and select the page you are currently working on. Then use the find box to search for your javascript method which fires the ajax and put a break point inside the success part of your ajax call. Now run your code and wait to hit the break point. Now you can see what is inside your data.d object. Do not resume and keep debugging. Open up your console tab and type data.d. you should see an intelicence option box with all the variables inside your data.d object. You should see the variable for city, pin and country in whatever way you named them when you deserialized your data and returned it as json to your ajax call.

If, for example, you write data.d.city in your console it should write out the corresponding value. The same goes for any other json variable your service passed back to the browser.

With that information it is easy enough to use jquery and do what you want with the data. So in the succes part of your ajax call you can write:

 $("#txtOrgCity").val(data.d.city);
 $("#txtPin").val(data.d.pin);
 $("#txtCountry").val(data.d.country);

ps im writting on a phone.

For your example you should not write out the same code two more times. Do not call ajax inside a jquery .val(), that is wrong. Make a new function which handles your ajax, call it from the page load or anywhere you need :

 function loadData(//put your user parameter in here if you need){
 $.ajax({
                    url: '../lead_hunter.asmx/GetOrgCity',
                    method: 'post',
                    contentType: 'application/json;charset=utf-8',
                    data: JSON.stringify({ url: "http://srv3.testsrv.com/homepage", user: "testuser@testsrv.com" }),
                    dataType: 'json',
                    success: function (data) {                   
                         $("#txtOrgCity").val(data.d.city);
                         $("#txtPin").val(data.d.pin);
                         $("#txtCountry").val(data.d.country);                               
                     },
                    error: function (err) {
                        //welldone for handling your error message. Many people neglect this. As a developer that is like coding blindly. At the very least you can console.log(err); if you don't want the user to see
                        alert(err);
                    }
                });
 }

Answer 3

You are after JSON.stringify(). So where you specify your .val() You want .val(JSON.stringify());