jquery load with variable

Question

With the following script I load a HTML document into a div-container and show it. With the variable "x" I avoid that the document is reloaded with every click on the button.

The function to hide the container is missing here, as it has nothing to do with my question.

x = 0;
$('.button').click(function () {
    if (x == 0){
        $('.box').load('article.html', function () {
            x = 1;
            $('.box').fadeIn();
        });
    }else{
        $('.box').fadeIn();
    }
});

My question is, how do I have to change the script, if I have more buttons that load different documents?

The variable "x" has to work individually for all the buttons. Is there something like "this.variable" or am I wrong and I have to come up with something completely different?

lbstr · Accepted Answer · 2012-11-16 21:30:41Z

1

I would define the document to load in a data attribute. For example:

<span class="button" data-doc="article.html">Load article</span>

Then:

$('.button').click(function(){
    var $this = $(this),
        $box = $('.box'),
        loaded = $this.data('loaded'),
        doc;

    if (loaded) { 
        $box.fadeIn();
        return; 
    }

    doc = $this.data('doc');

    $box.load(doc, function () {
        // mark it as being loaded
        $this.data('loaded', true);
        $box.fadeIn();
    });
});

edited Nov 16, 2012 at 21:30

answered Nov 16, 2012 at 20:46

lbstr

2,84220 silver badges29 bronze badges

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

2 Comments

netS Over a year ago

Thanks for this solution. I've never worked with the data attribute so far.

lbstr Over a year ago

you're welcome! I've found it to be very handy. jQuery will even deserialize json that you put in there (example).

jtheman · Accepted Answer · 2012-11-16 21:31:04Z

0

Using jQuery one() event handler you only use an event handler once.

$('.button').one('click', function () {
    $('.box').load('article.html');
});
$('.button').click(function () {
   $('.box').fadeIn();
});

answered Nov 16, 2012 at 21:31

jtheman

7,5013 gold badges32 silver badges40 bronze badges

1 Comment

netS Over a year ago

Didn't know there is one() in jquery. It's interesting but I think in my case it's not the right choice because I won't be able to load the content of button 1 again after I clicked on another button and the box contains other content.

Collectives™ on Stack Overflow

jquery load with variable

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related