Insert HTML into DIV with Jquery

Question

This is one of my first jquery scripts. I want to expand a DIV and load some external html into it. This is the code I have so far:

http://jsfiddle.net/spadez/uhEgG/5/

This is the code I have:

$(document).ready(function () {
var loadUrl = http://sheldonbrown.com/web_sample1.html

    $("#close").click(function () {
        $("#country_slide").hide();
    });

    $("#country").click(function () {
        $("#country_slide").show();
        $("#country_slide").html(ajax_load).load(loadUrl);
    });

});

The expanding did work but now it doesn't since adding the Ajax code. Can anyone show me hwere I am going wrong, and ideally highlight any thing I am doing wrong. Thank you.

Answer 1

Just replace country click with this

$("#country").click(function () {
        $("#country_slide").show();
        $("#country_slide").load(loadUrl);
    });

and add quotes on url

var loadUrl = "http://sheldonbrown.com/web_sample1.html";

Answer 2

Fixed it for you..

var loadUrl = 'http://sheldonbrown.com/web_sample1.html';

http://jsfiddle.net/APkHN/1/

your URL was not a string, and it was missing an end brace.

Answer 3

put your url inside ''

see it working here --> http://jsfiddle.net/uhEgG/8/

Also, you might need to delegate close like this ( As you are replacing html inside #country_slide which contains your #close )

$("#country_slide").on('click','#close',function () {
        $("#country_slide").hide();
});