CODEWITHSUNDEEP
javascriptjqueryajax
Pit Digger
Pit Digger

Reputation: 9800

Load Html Content if not exist JQuery AJAX

I have a page with 3 buttons. >Logos >Banners >Footer

When any of these 3 buttons clicked it does jquery post to a page which returns HTML content in response and I set innerhtml of a div from that returned content . I want to do this so that If I clicked Logo and than went to Banner and come back on Logo it should not request for content again as its already loaded when clicked 1st time.

Thanks .

Upvotes: 1

Views: 1158

Answers (6)

andres descalzo
andres descalzo

Reputation: 14967

try this:

HTML:

<a href="#" class="menu" data="logos" type="hidde-class">logos</a><br />
<a href="#" class="menu" data="banner" type="remover-class">banner</a><br />
<a href="#" class="menu" data="footer" type="remover-class">footer</a><br />

<div id="container"></div>

JS:

$(".menu").bind("click", function(event) {

    event.stopPropagation();

    var 
       data = $(this).attr("data");
       type = $(this).attr("type");

    if ($("#container").find(".logos").length > 0 && data == "logos") {
        $("#container").find(".logos").show();
        return false; 
    }

    var htmlappend = $("<div></div>")
                          .addClass(type)
                          .addClass(data);

    $("#container").find(".remover-class").remove();
    $("#container").find(".hidde-class").hide();

    $("#container").append(htmlappend);

    $("#container").find("." + data).load("file_" + data + "_.html");

    return false;

});

Upvotes: 0

Ady Ngom
Ady Ngom

Reputation: 1302

Mark nailed it .one() will save extra line of codes and many checks hassle. I used it in a similar case. An optimized way to call that if they are wrapped in a parent container which I highly suggest will be:

$('#id_of_parent_container').find('button').one("click", function () {
    //get the id of the button that was clicked and do the ajax load accordingly
});

Upvotes: 0

hunter
hunter

Reputation: 63542

You could dump the returned html into a variable and then check if the variable is null before doing another ajax call

var logos = null;
var banners = null;
var footer = null;

$(".logos").click(function(){
    if (logos == null) // do ajax and save to logos variable
    else $("div").html(logos)
});

Upvotes: 0

James Kyburz
James Kyburz

Reputation: 14503

I would unbind the click event when clicked to prevent further load requests

$('#button').click(function(e) {
    e.preventDefault();
    $('#button').unbind('click');
    $('#result').load('ajax/test.html ' + 'someid', function() {
      //load callback
    });
});

or use one.click which is a better answer than this :)

Upvotes: 0

cdeszaq
cdeszaq

Reputation: 31300

In the logic of the click handler, look for the content having been loaded. One way would be to see if you can find a particular element that comes in with the content.

Another would be to set a data- attribute on the elements with the click handler and look for the value of that attribute.

For example:

$(".myElements").click(function() {
        if ($(this).attr("data-loaded") == false {
            // TODO: Do ajax load

            // Flag the elements so we don't load again
            $(".myElements").attr("data-loaded", true);
        }
    });

The benefit of storing the state in the data- attribute is that you don't have to use global variables and the data is stored within the DOM, rather than only in javascript. You can also use this to control script behavior with the HTML output by the server if you have a dynamic page.

Upvotes: 1

Mark Coleman
Mark Coleman

Reputation: 40863

Sounds like to be the perfect candidate for .one()

$(".someItem").one("click", function(){
  //do your post and load the html
});

Using one will allow for the event handler to trigger once per element.

Upvotes: 1

Related Questions