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

Question

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.

Translate it with the $.ajax() method or add a loading gif while the waiting the completed transaction. — eouti
– eouti, Commented May 2, 2011 at 7:46
But it seems you are already adding a waiting gif: .html('<img src="ressources/loading.gif" />') and when the content is loaded, it will overwrite the previous content. — Felix Kling
– Felix Kling, Commented May 2, 2011 at 7:50

Felix Kling · Accepted Answer · 2011-05-02 08:02:40Z

1

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.

answered May 2, 2011 at 8:02

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

iain · Accepted Answer · 2011-05-02 07:55:50Z

0

$.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();
    }
});

answered May 2, 2011 at 7:55

iain

1,9951 gold badge16 silver badges21 bronze badges

1 Comment

iain Over a year ago

$('#target') might not be the right target, this may need changed.

JohnP · Accepted Answer · 2011-05-02 07:55:56Z

0

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
}

answered May 2, 2011 at 7:55

JohnP

50k13 gold badges112 silver badges142 bronze badges

Comments

ryyppy · Accepted Answer · 2011-05-02 08:02:47Z

0

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..

answered May 2, 2011 at 8:02

ryyppy

4423 silver badges10 bronze badges

Comments

user447356 · Accepted Answer · 2011-05-02 08:03:35Z

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.

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related