CODEWITHSUNDEEP
jqueryasp.net-mvcajaxasp.net-mvc-3yui
Brendan Vogt
Brendan Vogt

Reputation: 26048

YUI 3 Doing an AJAX call from a button click and populating textboxes

I am using ASP.NET MVC 3 with Razor. And I am using YUI 3.4.1.

I have a web page with a button on it with textboxes. When the user clicks on a button I do a AJAX call to the database and then the textboxes are filled with the returned data (on the same page as this button). It is currently being done using jQuery. Below is the code, how would I do the same thing using YUI 3.4.1? What do I need to look into and are there are already samples available?

Here is the current code:

$('#btnPrepopulateEmployeeDetails').click(function () {
     var url = '/GrantApplication/GetEmployeeInfo';
     var data = { employeeNumber: $('#EmployeeNumber').val() };

     $.getJSON(url, data, function (data) {
          $('#Title').val(data.Title);
          $('#FirstName').val(data.NickName);
          $('#LastName').val(data.Surname);
          $('#BranchNumber').val(data.BranchID);
          $('#WorkTelephoneNumber').val(data.TellO);
          $('#CellphoneNumber').val(data.TellC);
     });
});

btnPrepopulateEmployeeDetails is the id of the button tag. Title thru CellphoneNumber are all textboxes that need to be populated.

I appreciated all feedback :)

Upvotes: 1

Views: 2980

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1039200

It would have been nice to show what you have tried so far and what difficulties you have encountered. As far as samples are concerned the documentation is pretty abundant on them. Suffice to read.

Anyway:

Y.on('load', function (e) {
    Y.one('#btnPrepopulateEmployeeDetails').on('click', function (evt) {
        evt.preventDefault();
        var data = { employeeNumber: Y.one('#EmployeeNumber').get('value') };
        Y.io('/GrantApplication/GetEmployeeInfo', {
            method: 'GET',
            data: data,
            on: {
                success: function (id, result) {
                    var json = Y.JSON.parse(result.responseText);
                    Y.one('#Title').set('value', json.Title);
                    Y.one('#FirstName').set('value', json.NickName);
                    Y.one('#LastName').set('value', json.Surname);
                    Y.one('#BranchNumber').set('value', json.BranchID);
                    Y.one('#WorkTelephoneNumber').set('value', json.TellO);
                    Y.one('#CellphoneNumber').set('value', json.TellC);
                }
            }
        });
    });
});

Upvotes: 5

Related Questions