jQuery .load() not working

Question

On my website, I'm trying to pull the content of a post in my forum (hosted on the same domain) and display it in a div on the homepage, using jQuery.

Here's the code for the header:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

<script type="text/javascript">
jQuery("#contain").load("http://examplepage.com/forum/showthread.php?tid=NN #pid_NN");
</script>

Then, there's the div I'd like to display the post:

<div id="contain"></div>

Things to consider:

• The library loads just fine.
• If I enter any other code, it works (like testing alert(1);).
• The console doesn't report any errors.
• The div stays blank; in fact, it doesn't even show. It is there, though.

What am I doing wrong?

Solution 1

your code should be something like this

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

js code

 <script type="text/javascript">
   jQuery(document).ready(function(){
       jQuery("#contain").load("http://examplepage.com/forum/showthread.php?tid=NN #pid_NN");
   });
</script>

Solution 2

.load can pass your GET params seperate:

.load("link to php", "http://examplepage.com/forum/showthread.php", "tid=NN#pid_NN")

Comments

[T.J. Crowder]

Actually, the second part of this is a possibility. @TW_, is your script tag after your div in the HTML? If not, move it there (or use ready as above, but that's really not necessary if you control where your script tag goes).

[T.J. Crowder]

You don't need to use ready. You can just put the script tag doing the load after the div. And in fact, that's the better approach. ready is really only for code where you don't control where the script tag goes.

[TW_]

Sweet! Thanks a lot; it never occurred to me that jquery itself needed to be invoked separately. I'm new to this stuff. :) Consider the answer accepted in a few minutes.

[T.J. Crowder]

@TW_: jQuery doesn't need to be "invoked" separately. What the ready above does is delay execution of your load until all of the HTML has been parsed and the DOM elements created. Your code was running before the div was created, and so jQuery couldn't find the div (as it didn't exist yet). While you can use ready to handle that, if you're in control of where your script tag goes, it's better to just put it at the bottom of the page, just before the </body> tag, and not use ready. The div will exist then. That's what both Google and Yahoo recommend.