CodeHobo

JoeFletch

• jQuery.ajax(parameters)
• Initiate Web Method on the server
  These are both the same step, calling $.ajax automatically initiates the web service call.

Great! Thanks for the feedback. I have updated the original post so that it is clearer.

CodeHobo

One thing to watch out for (and I see this a lot) is that ,as you pointed out, ajax is asynchronous by default. So don't put any code you want to fire after the $.ajax call, instead put it in a success handler. Code immediately after the ajax call will fire , even if the web service hasn't completed. However, code in the success handler will only fire when the web service response has come back. For example:

//bind an event handler to the javascript click event of "btnSearch
$("#btnSearch").click(function(){


  $.ajax({
    url: 'ajax/test.asmx',
    success: function(data) {

      // This is only updated when the response return. This is where you want to update the UI
      $('.result').html(data);
      alert('Load was performed.');

    }
  });

  // This is executed immediately. You don't want to update the ui here.
  someMethod();

});

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});

Noted and understood.

CodeHobo

Another thing, in terms of updating the ui. Take a look at JSRender. 
https://github.com/BorisMoore/jsrender

It allows you to pass the results of your webservice to a template and makes dynamically adding elements to an html page much cleaner (and easier).

Interesting! I'll check this out.

Thanks for the detailed reply!