Jquery simple ajax - Insert html

Question

When a div is opnened i want to load html content into it via ajax. This is the code im working with:

$(document).ready(function () {


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

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

});

The code I think I need is this:

    $.ajaxSetup ({  
        cache: false  
    });  
    var ajax_load = "Loading...";
    var loadUrl = "www.test.com/site.html";  
    $("#load_basic").click(function(){  
        $("#country_slide").html(ajax_load).load(loadUrl);  
    })

How can I make it work to make it load up when the div is opened by the code above, firstly because it is setup for a click function not a toggle function, and second, because the toggle doesn't seem to be able to distinguish if the div is open or not.

Adil Shaikh · Accepted Answer · 2013-06-05 19:35:22Z

1

to make it load up when the div is opened by the code above

$("#country_slide").slideToggle(function(){
  if($(this).is(':visible')){
    $("#country_slide").html(ajax_load).load(loadUrl);
  }
});

edited Jun 5, 2013 at 19:35

answered Jun 5, 2013 at 19:30

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

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

1 Comment

PSL Over a year ago

Also Probably Close needs to have the event delegated as countryslide's content is updated... and close is with in that.

Sushanth -- · Accepted Answer · 2013-06-05 19:29:46Z

1

Try to delegate the events.. Looks like the element is not yet available in the DOm when the event is bound

Replace

$('#country').click(function () {

with

$(staticContainer).on('click', '#country', function () {

staticContainer is the element which is already in your DOM when the event is bound and the ancestor of country

answered Jun 5, 2013 at 19:29

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Comments

Jonathan · Accepted Answer · 2013-06-05 19:36:08Z

1

Either store the slide state in a variable or in a data attribute liek this:

<div id="country_slide" data-state="1">

And make something like this:

$('#country').click(function () {
        $("#country_slide").slideToggle();
        if ($("#country_slide").attr("data-state") == 0)
            $("#country_slide").html(ajax_load).load(loadUrl); 
    });

answered Jun 5, 2013 at 19:36

Jonathan

9,1924 gold badges47 silver badges82 bronze badges

Collectives™ on Stack Overflow

Jquery simple ajax - Insert html

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related