Question

I have a button on my site which, when clicked on, should load html inside a div container.

I’m using the following code for the button:

<div id="nextnr1"><a href = "#">Next&gt;&gt;</a></div>

The following code to execute the loading when someone clicks on the div:

<script type="text/javascript">
    $(document).ready(function() {
        $("#nextnr1").mousedown(function() {
            $("#Container").load("wrappers.php?currenttab=1&shift=1");
        });
    });​
</script>

This is the code for the container where the HTML is loaded into:

<div id="Container"></div>

The problem is that all of the above code is working most of the time. Only once in a while the function .load is not doing his job. This is for similar circumstance because it is about the same page.

I checked that when there is a click the function was called so: $(document).ready and $("#nextnr1").mousedown(function() {..} are doing their job. Only .load is NOT doing its job because I checked that there was no HTTP request sent to the server.

If anyone can help me out with this problem I would be very very thankful.

UPDATE 1

I tried the message box (see code below) and it shows that when the load was not executed it also didn’t show the message box Load was performed. I also saw that after 2/3 minutes suddenly the message box showed up and it reloaded! However it does work but sometimes there is a huge delay.

$(document).ready(function() {
   $("#renextnr2").click(function() {
      $("#Container").load("wrappers.php?currenttab=2&shift=1", function() {
           alert("Load was performed.");
      });
   });
});

Answer 1

I added a randon number at the end of the URL which solved the problem.