[ 7 posts ]

Brendan Vogt

  • Username: bioluminescence
  • Joined: Wed Oct 27, 2010 5:57 am
  • Posts: 76
  • Offline
  • Profile

Doing AJAX call from button click and populating textboxes

Post Posted: Tue Nov 08, 2011 3:19 am
+0-
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 code:

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 :)

Alberto Santini

YUI Contributor

  • Offline
  • Profile

Re: Doing AJAX call from button click and populating textbox

Post Posted: Tue Nov 08, 2011 4:50 am
+0-
Hello Brendan.

Of course I cannot test the following code, but it should be close to your needs:

Code:
Y.on("click", function (e) {
    var url = '/GrantApplication/GetEmployeeInfo';

    Y.io(url, {
        method: "POST",
        data: {
            "employeeNumber": Y.one('#EmployeeNumber').get('value')
        },
        on: {
            success: function (id, o) {
                var data = JSON.parse(o.responseText);

                Y.one('#Title').set('value', data.Title);
                // ...
            }
        }
    }
}, '#btnPrepopulateEmployeeDetails');


Hope that helps,
IceBox

[1] http://www.jsrosettastone.com/

Brendan Vogt

  • Username: bioluminescence
  • Joined: Wed Oct 27, 2010 5:57 am
  • Posts: 76
  • Offline
  • Profile

Re: Doing AJAX call from button click and populating textbox

Post Posted: Tue Nov 08, 2011 5:22 am
+0-
Thanks. It's fine, I can go and fix it if there are issues :) Please tell me, what module would I be using here? I just want to go and do some additional reading of my own :)

Alberto Santini

YUI Contributor

  • Offline
  • Profile

Re: Doing AJAX call from button click and populating textbox

Post Posted: Tue Nov 08, 2011 5:35 am
+1-
Hello Brendan.

I think "node", "io" and "json".

Regards,
IceBox

paolo nesti poggi

YUI Contributor

  • Username: paolo
  • Joined: Sat Mar 14, 2009 9:53 am
  • Posts: 77
  • Location: Roskilde DK
  • GitHub: tribis
  • Gists: tribis
  • Offline
  • Profile

Re: Doing AJAX call from button click and populating textbox

Post Posted: Tue Nov 08, 2011 5:57 am
+0-
to be specific with modules, which is best as of 3.4.1, use node, io-base and json-parse.

If you use PHP on the server you might also consider using the gallery module inlinXHR which is a wrapper around io-base and io-form:
http://yuilibrary.com/gallery/show/inline-xhr
and
http://www.eaktion.com/inlinexhr/

regards, Paolo

paolo nesti poggi

YUI Contributor

  • Username: paolo
  • Joined: Sat Mar 14, 2009 9:53 am
  • Posts: 77
  • Location: Roskilde DK
  • GitHub: tribis
  • Gists: tribis
  • Offline
  • Profile

Re: Doing AJAX call from button click and populating textbox

Post Posted: Tue Nov 08, 2011 9:01 am
+0-
and while we are at comparing, I post here the complete equivalent done with inlineXHR:

Code:
      var xhr = new Y.Base.InlineXhr();
      xhr.setConfig({url: '/GrantApplication/GetEmployeeInfo', mode: 'alert', method: 'GET'});
      
      var data = { employeeNumber: Y.one('#EmployeeNumber').get('value') };      

      var employeeIO = xhr.register(employeeIO,'getEmployee',data);      

      Y.on("click", employeeIO.request, "#btnPrepopulateEmployeeDetails", employeeIO);
      
        /* you would call this function from your PHP "getEmployee()" function, method or Smarty plugin */
      Y.showEmployee = function(data){
         Y.one('#Title').set('value',data.Title);
         /* ... more data ... */
      }

Brendan Vogt

  • Username: bioluminescence
  • Joined: Wed Oct 27, 2010 5:57 am
  • Posts: 76
  • Offline
  • Profile

Re: Doing AJAX call from button click and populating textbox

Post Posted: Wed Nov 09, 2011 5:24 am
+0-
Thanks guys. I opted to go with Alberto's answer. I'm not familiar what XHR is :)
  [ 7 posts ]
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum