Insert HTML using jQuery

Question

I have two pieces of code, first of all I have my code which toggles open a div with an included close button:

$(document).ready(function () {


    $('#country').click(function () {
        $("#country_slide").slideToggle();
    });

    $('#close').click(function (e) {
        e.preventDefault();
        $('#country_slide').slideToggle();
    });

});

Then I also have my Ajax code which is designed to fire when the div has been opened:

$(function () {
    $('#country_link').on('click', function () {
        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/ajax/test.html',
            timeout: 5000,
            beforeSend: function () {
                $('.loader').show();
            },
            success: function (data, textStatus) {
                $("#country_slide").html(data);
                alert('request successful');
            },
            error: function (xhr, textStatus, errorThrown) {
//                $("#country_slide").hide('fast');
//                alert('request failed');                
            },
            complete: function () {
                $('.loader').hide();
            },
        });
        return false;
    });
});

What I am stuck with now is, how do I make the ajax only execute when the div is being opened? Because I am working with a toggle and close button it seems difficult to work out what the click is doing, whether it is opening it or closing it.

I guess my options are to have some kind of flag or alternatively have some "if" code, so if class is equal to .hidden then do not execute. I haven't been able to integrate either of these solutions and I am unsure if either of them is the proper way to achieve this.

What exactly is the issue you're having? Can you post a little HTML? Is #country_link inside of #country, or no? If it's not, it would make sense to either have a variable that declares whether it's available for use. But if you have a link that doesn't do something sometimes, you should indicate that to the user somehow. — Colin DeClue
– Colin DeClue, Commented Jun 6, 2013 at 14:07
You could bind data to the element (e.g. loaded) to the div when it's loaded, so next time you click on the element it doesn't has to load again. — Broxzier
– Broxzier, Commented Jun 6, 2013 at 14:19

tymeJV · Accepted Answer · 2013-06-06 14:09:34Z

1

Include the check as part of your slide function:

$("#country_slide").slideToggle(function() {
    if ($(this).is(":visible")) {
        alert("im visible!");
    }
});

Demo: http://jsfiddle.net/tymeJV/uhEgG/28/

answered Jun 6, 2013 at 14:09

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

4 Comments

Broxzier Over a year ago

This will run the ajax request every time you open the div.

Jimmy Over a year ago

Yes I can see this problem happening

tymeJV Over a year ago

Thought this was what you wanted... "how do I make the ajax only execute when the div is being opened?"

Broxzier Over a year ago

Indeed, that's why I didn't downvote, but also don't want to upvote because requesting the same page over and over again seems useless to me.

PSR · Accepted Answer · 2013-06-06 14:07:47Z

1

if($("#country_slide").is(":visible")) 
  //call ajax

answered Jun 6, 2013 at 14:07

PSR

40.4k43 gold badges115 silver badges154 bronze badges

Comments

Broxzier · Accepted Answer · 2013-06-06 14:38:25Z

1

This code adds data to the element, to check if it's already loaded next time you click on it.

Currently I am not able to test it, so it may contain errors.

$(function () {
    $('#country_link').on('click', function (e) {
        // Prevent from following the link, if there is some sort of error in
        // the code before 'return false' it would still follow the link.
        e.preventDefault();

        // Get $link because 'this' is something else in the ajax request.
        var $link = $(this);
        // Exit if the data is loaded already
        if ($link.data('loaded') === true)
            return false;

        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/ajax/test.html',
            timeout: 5000,
            beforeSend: function () {
                $('.loader').show();
            },
            success: function (data, textStatus) {
                $("#country_slide").html(data);
                alert('request successful');
                // If successful, bind 'loaded' in the data
                $link.data('loaded', true)
            },
            error: function (xhr, textStatus, errorThrown) {
//                $("#country_slide").hide('fast');
//                alert('request failed');
            },
            complete: function () {
                $('.loader').hide();
            },
        });
    });
});

edited Jun 6, 2013 at 14:38

answered Jun 6, 2013 at 14:25

Broxzier

2,95920 silver badges37 bronze badges

4 Comments

Jimmy Over a year ago

Thank you for the help. This is your code in action but when you click the link nothing happens and nothing comes up in console either, so I can;t figure out where it's getting stuck jsfiddle.net/spadez/uhEgG/34

Broxzier Over a year ago

Ah, you're welcome. That fiddle has no element with class loader, and I also noticed I had something wrong in the code. !== true should be === true, because it SHOULD exit when it's true. Hope this helps.

Jimmy Over a year ago

So how exactly does this work, it loads it up for the first time, but then since it is already loaded, it won't then reload it next time it will just pull it from the cache?

Broxzier Over a year ago

@Jimmy The content will still be inside the div, it isn't removed. If you plan to use the same div for multiple ajax requests you couls store the results in an array.

Collectives™ on Stack Overflow

Insert HTML using jQuery

3 Answers 3

4 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related