Preventing .load() if already loaded?

Question

I have several buttons on a page. Each button loads a different partial "view" and uses the jQuery .load() method.

It works great but I noticed that if I keep clicking on this particular button, it keeps loading the partial view over and over until I stop. I am sure I could eventually crash the site (no good!).

I tried to cache it (by decorating the controller method and duration, etc) but it didn't work. I suspect that is because I am loading this view via button clicking.

How can I prevent repeating the load of this "view" without the user even knowing?

This is my jQuery/Javascript:

//"Select Area" button - click event
    $(".btnAreaDiv .btn-myClass").click(function () {

        switch (this.id) {
            case "btnMyButton":
                    $('#myDiv').load('_MyPartialView'); //to-do: only load me, if I haven't been loaded?
                break;
            //more code etc., more button handling
        }
    }

This is the contents of _MyPartialView.cshtml:

@{
    Layout = null;
}

<div class="row">
    <div class="col-md-6">
        <div class="row" style="width:97%">
            <div class="col-md-12" style="border:2px solid #c5c5c5"><span id="lblMySelector">My Selector</span></div>
        </div>
    </div>
    <div class="col-md-6"></div>
</div>

<div class="row nopadding checkboxDiv mySelector">
    <div class="col-md-12 nopadding">
        <input id="myCheckBox" type="checkbox" /><label for="myCheckBox">Include all/label> <br />
    </div>
</div>

And of course the ActionResult method in my controller:

public ActionResult _MyPartialView()
{
    return View();
}

I have tried this, but it didn't work:

switch (this.id) {
    case "btnMyButton":
        if (!$('#lblMySelector').length) {

            console.log('label not found', $('#lblMySelector').length);

            $('#myDiv').load('_MyPartialView'); 

        }
        break;

Answer 1

Let's assume you have some markup similar to this:

<button type="button" class="load-some-stuff" id="btnOne">One</button>
<button type="button" class="load-some-stuff" id="btnTwo">Two</button>
<button type="button" class="load-some-stuff" id="btnThree">Three</button>

And that you're doing something like this:

$(function(){

    $('.load-some-stuff').on('click', function(e){

        switch(this.id)
        {
            case 'btnOne':
                $('#some-container').load('example.com');
            break;

            case 'btnTwo':
                $('#some-container').load('example.com');
            break;

            case 'btnThree':
                $('#some-container').load('example.com');
            break;
        }

    });

});

If you don't want this to happen more than once, use off to remove the click event from the button:

$(function(){

    $('.load-some-stuff').on('click', function(e){
        // the current button
        var _this = $(this);

        switch(this.id)
        {
            case 'btnOne':
                $('#some-container').load('example.com', function(){
                    _this.off('click'); 
                });
            break;

            case 'btnTwo':
                $('#some-container').load('example.com', function(){
                    _this.off('click'); 
                });
            break;

            case 'btnThree':
                $('#some-container').load('example.com', function(){
                    _this.off('click'); 
                });
            break;
        }

    });

});

You could change where you use the off function; I placed it in the callback to load on the off chance that the load fails (the callback is only called for a successful response code).

Answer 2

You can disable button when clicked and enable when needed again (ex. when data was loaded). You can also set .data on clicked button to flag that was clicked and no more loading is needed.

    $(".btnAreaDiv .btn-myClass").click(function () {
    switch (this.id) {
        case "btnMyButton":
                if ($(this).data('loaded') == undefined) {
                    $(this).data('loaded', 1);
                    $('#myDiv').load('_MyPartialView');
                }
            break;
        //more code etc., more button handling
    }
}

you can also use .attr if you like ;)

Answer 3

To cache data you can use .clone() method as like in this answer. You can make object to every possible request ex.

var cache = {};

and after receiving data store it into your cache var:

var cacher = function(name) {
    return function(response) {
        cache[name] = response;
    }
};

$("#myDiv").load('_MyPartialView', cacher('_MyPartialView'));