How to trigger or call jquery load function multiple times?

Question

I need a little help. I'm struggling with some problem for a while. I need to call jquery load function every time i click on a button. To trigger load function I suppose I need to refresh that particular div or load that div again.

My goal is:

when I click on the button I want loading-div to be shown and I want .image-container to load again. I suppose that should trigger jquery load function that will hide loading-div when .image-container loads.

This is my code:

$(".image-container").load(function(){
   $( "#loading-div" ).hide();
});

$("#button").on('click', function(){
   $( "#loading-div" ).show();
   $(".image-container").load("index.php"); // load again div that sholud trigger upper function
});

since it was already loaded .. It may need a callback??

Zak
– Zak

2016-01-03 02:23:59 +00:00
Commented Jan 3, 2016 at 2:23 — Zak
– Zak, Commented Jan 3, 2016 at 2:23

11thdimension · Accepted Answer · 2016-01-03 02:24:43Z

3

Try this

$("#button").on('click', function(){
    $( "#loading-div" ).show();
    $(".image-container").load("index.php", function () {
        $( "#loading-div" ).hide();
    });
});

answered Jan 3, 2016 at 2:24

11thdimension

10.7k4 gold badges40 silver badges74 bronze badges

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

1 Comment

bobby Over a year ago

it only shows div but it doesnt hide it. I have put alert above hide function and it doesnt call it

mahekj · Accepted Answer · 2016-01-03 02:20:49Z

0

suppose I want to Load data from the server to the particular div tag continuously. forthat i use setinterval jquery method. example:

setinterval(function(){
$("div1").load("url","data you want to send to your  server");                      
                      },1000);

note: load method work only for 'get' method.in above code second parameter of load is optional.

answered Jan 3, 2016 at 2:20

mahekj

112 bronze badges

Comments

ankhzet · Accepted Answer · 2016-01-03 02:34:17Z

0

Mmm, just separate desired pre/post-load logic from handlers?

function loadSome(el, data) {
   $("#loading-div").show();
   el.load(data, function () {
     $("#loading-div").hide();
   });
}

function loadImage() {
    loadSome($(".image-container"), "index.php");
}

loadImage();
$("#button").on('click', function(){
    loadImage();
});

Or in more jQuery-way:

jQuery.fn.progressedLoad = function (data, progressElement) {
    $(progressElement).show();
    // add more complex load-progress logic here...

    return this.load(data, function() {
        $(progressElement).hide();
    });
}

...

$(".image-container").progressedLoad(
    {"url": "index.php"}, 
    $("#loading-div")
);

edited Jan 3, 2016 at 2:34

answered Jan 3, 2016 at 2:29

ankhzet

2,5991 gold badge27 silver badges36 bronze badges

4 Comments

bobby Over a year ago

i get the same result as in above answer, it only shows but it doesn hide loading-div

ankhzet Over a year ago

1) is desired content loaded into .image-container, or it just shows #loading-div and then do nothing? 2) which version of jQuery you using? .load() can have different parameters list and can behave like .on("load", function(){}) in some usecases in jQuery versions prior to 1.9

bobby Over a year ago

1) every time i click on button content of .image-container changes, but sometimes it last few seconds, so i created function that will show #loading-div until loads finish 2) jquery-2.1.3

ankhzet Over a year ago

Its odd, as it works fine for me. Well... so: 1) whats in console? any errors on load? 2) is #loading-div inside .image-container or maybe its changing in some other way, so $("#loading-div") reference becomes invalid? have you tried $(".image-container").progressedLoad({"url": "index.php"}, "#loading-div"); instead? 3) is there possibly param-list difference? have you tried $(".image-container").progressedLoad("index.php", "#loading-div"); as well? 4) have you tried to create minimal reproducible example on something like jsFiddle?

Collectives™ on Stack Overflow

How to trigger or call jquery load function multiple times?

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related