CODEWITHSUNDEEP
jquery
curtis
curtis

Reputation: 109

how to call an ajax url when a checkbox is selected

Using jQuery what is the best way to call a URL Via ajax and update a <ul> list with the data that is returned? While the data is being fetched from the url, I would also like to show a "loading" spinner.

the URL is local to my application and will return back a json response. When the checkbox is checkmarked, I'd like to call the URL and pass a parameter. e.g. /return/students?q=someparm

Upvotes: 0

Views: 2261

Answers (2)

Arthur Neves
Arthur Neves

Reputation: 12128

<span class="spinner" style="display: none"><img src="spinner.gif" /></span>

$('#checkboxId').change(function() {
   $('spinner').show();
   $.ajax({
      url: "/return/students?q=someparm",
      success: function(data){
         // modify list based on data
      },
      complete: function(){ $('spinner').hide(); }
   });
   // code to show loading spinner (is executed instantly after ajax request,
   // not waiting for success to be executed)
});

http://api.jquery.com/hide/

http://api.jquery.com/show/

Upvotes: 0

didi_X8
didi_X8

Reputation: 5068

Should be possible with change event
The code could look somehow like this: 

$('#checkboxId').change(function() {
   $.ajax({
      url: "/return/students?q=someparm",
      success: function(data){
         // modify list based on data
      }
   });
   // code to show loading spinner (is executed instantly after ajax request,
   // not waiting for success to be executed)
});

Upvotes: 1

Related Questions