Inserting HTML with jQuery document.ready

Question

Hello. I'm a beginner at jQuery and I'm trying to insert a Facebook like button through the jQuery document.ready function.

My external Javascript file (loaded after the jQuery script) has the following code:

$(document).ready(function(){

if ($('#fb_btn').length) {
  var fb_code = "";

  fb_code += "<iframe src=\"http://www.facebook.com/plugins/like.php?href=" + escape(document.URL) +"&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:450px; height:80px;\" allowTransparency=\"true\" >";

  $('#fb_btn').prepend(fb_code);
}

});

My HTML code for where I want the button is

<span id="fb_btn"></span>

Currently, nothing seems to load into the span.

I'm trying to use this instead of inserting the code directly because inserting directly slows down the page down a bit too much.

Thanks.

Answer 1

Brian, the errors you're getting on your page seem to be related to the absence of the $ variable. Are you sure you're running your $(document).ready() only after you load your jQuery scripts? Remember...Javascript runs from top to bottom, so if you load your jQuery script after you run anything on the $ or jQuery variables, you will get object undefined errors.

Then, to reiterate what others have said, you should probably close that html string with </iframe> and put the iframe in a block-level element.

Answer 2

I think I just fixed the problem by updating the jQuery on my site. It was version 1.4.2. By using Version 1.4.3, everything seems to work fine.

Either that or there was something modified incorrectly with the jQuery I had.

Thanks for your help everyone.