CODEWITHSUNDEEP
jqueryajax
eouti
eouti

Reputation: 5658

Jquery Ajax : .load() & $.ajax()


this is my jquery code to call in ajax a representation of a switch. It works, but it takes about 20s to load, so I would like to add a loading gif to wait (while the XHR). I don't know how to do with the .load() method, I've just seen for the $.ajax() method. If someone could explain me how to display a gif with my method, or translate my code to the $.ajax() method.

$(document).ready(function() {

        $('input:checkbox').change(function(){
        var nom = $(this).attr("value");
        if ( $(this).is(':checked') ) {
          var target_url = "cgi-bin/switch.pl?param=" + $(this).attr('value');
          $('<div id="target_' + $(this).attr('value')+ '"></div>').load(target_url).appendTo($('#target'));
        }
        else {
          $('div#target_' + $(this).attr('value')).remove();
        }
    });

Thanks,
Bye.

Upvotes: 0

Views: 484

Answers (5)

Shadow Wizzard
Shadow Wizzard

Reputation: 66398

Here is optimized code that should first show the loading gif then the loaded contents:

$('input:checkbox').change(function(){
    var nom = $(this).attr("value");
    var id = "target_" + nom;
    var oDiv = $(id);
    if ( $(this).is(':checked') ) {
        var target_url = "cgi-bin/switch.pl?param=" + nom;
        if (oDiv.length == 0) {
            $('#target').append('<div id="' + id + '"></div>');
            oDiv = $(id);
        }
        oDiv.html('<img src="ressources/loading.gif" />');
        oDiv.load(target_url);
    }
    else {
        oDiv.remove();
    }
});

Note that you can store the value once into local variable (like you did already) and use that variable later.

Upvotes: 0

ryyppy
ryyppy

Reputation: 442

If you want to show a loading-gif, when a ajax-request ist working, why you don´t try the .ajaxStart() - Handler?

for instance you got a img with a loading-animation-gif with id "loading":

<html>
   <body>
      <img src="images/loading.gif" id="loading"/>
      <!-- some weird AJAX-Actions right here, etc. -->
      <script type="text/javascript">
         $("#loading").ajaxStart(function(){
             $(this).show();
         });
      </script>
   </body>
</html>

Whenever a Ajax-Call is raised, your Animation-IMG will be shown. Maybe you put your content in some own divs and hide it in your ajaxStart-Handler, to make it more straight-forward, maybe..

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 817128

You just have to make a minor change to your code:

$('<div id="target_' + $(this).val() + '"></div>')
    .html('<img src="ressources/loading.gif" />') 
    .load(target_url)
    .appendTo('#target');

In your original code (now edited), you are creating two independent divs.

Upvotes: 1

JohnP
JohnP

Reputation: 50029

You can still do this with .load(). You just need to put a loading indicator before you make the call, and then hide the loading indicator by giving your .load() method a callback (hideLoadingIndicator in my example).

if ( $(this).is(':checked') ) {
          var target_url = "cgi-bin/switch.pl?param=" + $(this).attr('value');

          //put your loading indicator code here 

          $('<div id="target_' + $(this).attr('value')+ '"></div>')
                 .load(target_url, {}, hideLoadingIndicator)
                 .appendTo($('#target')); //note callback

           ..
           ..

function hideLoadingIndicator() {
  //code to hide loading indicator
}

Upvotes: 0

iain
iain

Reputation: 1935

$.get() is what you want, just a short alias for $.ajax()

$(document).ready(function() {
    $('input:checkbox').change(function(){
    var nom = $(this).attr("value");
    if ( $(this).is(':checked') ) {
      var target_url = "cgi-bin/switch.pl?param=" + $(this).attr('value');
      $.get(target_url, function(data){
        $('#target').html(data);
      });
    }
    else {
      $('div#target_' + $(this).attr('value')).remove();
    }
});

Upvotes: 0

Related Questions