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?

The space is supposed to be there, read the manual for load() — powerbuoy
– powerbuoy, Commented Feb 27, 2013 at 8:15
Why is this downvoted? The OP shows every sign of having made an effort and clearly describes the problem. — T.J. Crowder
– T.J. Crowder, Commented Feb 27, 2013 at 8:16
//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js needs to be http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js — s.lenders
– s.lenders, Commented Feb 27, 2013 at 8:16
@s.lenders // is fine. It means use the same protocol as the page, whether it be http:// or https:// — sjdaws
– sjdaws, Commented Feb 27, 2013 at 8:17

rajesh kakawat · Accepted Answer · 2013-02-27 08:17:36Z

12

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>

answered Feb 27, 2013 at 8:17

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

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

4 Comments

T.J. Crowder Over a year ago

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).

TW_ Over a year ago

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 Over a year ago

@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.

sifr_dot_in Over a year ago

jQuery(document).ready(function(){}); was a reminder. thumps up

Jee Mok · Accepted Answer · 2018-07-27 04:00:39Z

1

.load can pass your GET params seperate:

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

edited Jul 27, 2018 at 4:00

Jee Mok

6,6068 gold badges54 silver badges83 bronze badges

answered Jul 26, 2018 at 22:33

Rhys Lees

111 bronze badge

Comments

sjdaws · Accepted Answer · 2013-02-27 08:20:26Z

0

You need a closing </script> tag on your jQuery include, and you need to wait for dom load.

JS

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

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

HTML

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

answered Feb 27, 2013 at 8:20

sjdaws

3,55619 silver badges21 bronze badges

1 Comment

T.J. Crowder Over a year ago

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.

SaschaM78 · Accepted Answer · 2018-08-09 08:02:08Z

-1

Check this code. you should use ">*" after container id to load content specific container on the page.

jQuery('#contain').load("http://example.com/pageurl #somecontaineronpage >*",function(){
      //after loading completion code goes here                      
});

Hope, this will help

edited Aug 9, 2018 at 8:02

SaschaM78

4,5074 gold badges36 silver badges46 bronze badges

answered Feb 27, 2013 at 8:29

Tsimtsum

1,02110 silver badges27 bronze badges

Collectives™ on Stack Overflow

jQuery .load() not working

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related