jquery .load() function only working the first time

Question

So I have a website I am working on just as a personal website that uses jQuery and jQuery UI

Previously I have been using hidden html code and just using jquery to show it. But its making my html file messy so I wanted to use jquery's .load() to do the same thing but from an external file.

Right now, its set to a .click function.

For my hidden html it shows it every time when I click a particular element.When you click on a different element it. It hides the first one. I am doing it by having a div with 2 classes. The problem is when I tried to load html into a hidden div, and then show it and hide it, it only worked the first time.

Enough talk, here is my code. #1 works , #2 only works on the first click. And leaves imagearea blank every time after.

$(".jquery").click(function(){

    clearImageArea();
    hideThumbnails(5);
    showThumbnails();
    $("#1").click(function(){

        $(".imagearea").html(js);
        $(".jscode").show(1000);
        $(".title").text("Extending jQuery");
    });
    $("#2").click(function(){
          $(".jquery2").empty();
          $(".jquery2").load("jqueryEx.html");


          var jquery2 =  $(".jquery2");
          $(".imagearea").html(jquery2);
          $(".jquery2").show(1000);
          $(".title").text("Extending Jquery Example");
      });


  });

now my hidden stuff in my html file

First my html and js code is loaded into here from jqueryEx.html and is being hidden elsewhere in my javascript via $(".hidden").hide(); and loaded then into into imagearea via .html() and shown via .show()

      <div class="jquery2 hidden">

      </div>

My other div looks like this which is put into imagearea by clicking on #1

    <div class="jscode hidden">
       <div class="block">

//lots of js code escaped out into html

        </div> <!-- end of block-->    
     </div>

elsewhere in my JS code at the beginning I have var js=$(".jscode"); to load it into the js variable you saw earlier.

if you want to see an out of date example of what I am working on go to www.3realsoft.com (only cs and js work on skills)

if you want to see any additional parts of my code, just ask. Most of it is there on my website though.

`.load()` uses AJAX, which is asynchronous. Anything that depends on the DOM elements that are loaded must be done in the callback function. — Barmar, Sep 21 '13 at 14:19

score 1 · Accepted Answer · edited Jul 03 '18 at 07:15

I got to this item in my search results, when I was trying to have a button both load and refresh the content, and the load was working but the refresh was not working.

Here's a shorter version of the solution, setting Cache to false was the key. Solution found over at this other link, but I'm posting this concept here because if Google dropped me in this item, others looking for the same will also probably find themselves here. Props to John Millikin, make sure to go over to his answer and upvote him: Stop jQuery .load response from being cached

<script type="text/javascript">
    $(document).ready(function () {

        $.ajaxSetup({
            // Disable caching of AJAX responses
            cache: false
        });

        $('.detail-expand').click(function () {

            var detailRowElement = $(this).closest('.session-row-tr').next();
            var detailElement = detailRowElement.find('.detail-row-div');
            var sessionId = detailElement.data("sessionId");

            detailElement.empty();
            detailElement.load('/Admin/WebLogPartial/' + sessionId, function () {
                $.bootstrapSortable(true, 'reversed');
            });

            detailRowElement.show();
        });

    });
</script>

score 0 · Answer 2 · answered Sep 21 '13 at 14:24

0

Anything that depends on the HTML being loaded must be done in the callback function, because the first A in AJAX stands for asynchronous.

$("#2").click(function(){
    $(".jquery2").empty();
    $(".jquery2").load("jqueryEx.html", function() {
        var jquery2 =  $(".jquery2");
        $(".imagearea").html(jquery2);
        $(".jquery2").show(1000);
        $(".title").text("Extending Jquery Example");
    });
});

I'm not really sure what you're trying to do with .html(jquery2), since the argument to .html() is supposed to be a string, not a jQuery object. Maybe you meant:

var jquery2 = $(".jquery2").html();

answered Sep 21 '13 at 14:24

Barmar

741,623
53
500
612

Well, it does cleaner job of loading it. But once imagearea is filled with something else, it never works again if #2 is clicked. – Alexander Ryan Baggett Sep 21 '13 at 16:31
using var jquery2 = $(".jquery2").html(); loads the text 2 times. once in the imagearea and it skips the .show(), the second in the top left corner (not the imagearea) with the .show() working correctly – Alexander Ryan Baggett Sep 21 '13 at 16:36
1

Ahh, it's not documented, but `.html(jqueryObject)` is equivalent to `.empty().append(jqueryObject)`. So it moves the DOM element, rather than copying the contents. I suggest you rewrite with the documented calls, instead of depending on unspecified behavior. – Barmar Sep 21 '13 at 16:50
I think the problem is that when you do `$(".imagearea").html(jquery2)`, it moves the entire `.jquery2` DIV inside the `.imagearea` DIV, so it's not in the proper place the next time you run the handler. I think you just want to move the contents, not the whole DIV. – Barmar Sep 21 '13 at 16:55

jquery .load() function only working the first time

2 Answers2

Linked