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?

Remove the space before the # in your URL. What do your console say? — sjdaws, Feb 27 '13 at 08:14
The space is supposed to be there, read the manual for load() — powerbuoy, Feb 27 '13 at 08:15
The space actually gets the right element from the returned data, and is totally valid. — adeneo, Feb 27 '13 at 08:16
Why is this downvoted? The OP shows every sign of having made an effort and clearly describes the problem. — T.J. Crowder, Feb 27 '13 at 08: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, Feb 27 '13 at 08:16
@KD: Not according to the question: *"...pull the content of a post in my forum (hosted on the same domain)..."* — T.J. Crowder, Feb 27 '13 at 08:17
@s.lenders `//` is fine. It means use the same protocol as the page, whether it be `http://` or `https://` — sjdaws, Feb 27 '13 at 08:17
@s.lenders: No, it doesn't. By leaving off the protocol, you make the `script` tag friendly to both `http` and `https`. More: [*Skipping the protocol*](http://blog.niftysnippets.org/2011/01/skipping-protocol.html) — T.J. Crowder, Feb 27 '13 at 08:17
@sjdaws well then explain why i've use that before and then jQuery libary doesn't get loaded — s.lenders, Feb 27 '13 at 08:18
@s.lenders - you probably did it on a local server. `//` works fine, and is recommended by Google! — adeneo, Feb 27 '13 at 08:19
@s.lenders: It wouldn't work if you loaded the HTML file directly, e.g., from a `file:` protocol. Other than that, it works. — T.J. Crowder, Feb 27 '13 at 08:19
Add a callback handler. Something like `alert( "page was called to." );` and check if it is being fired or not. — hjpotter92, Feb 27 '13 at 08:20

score 10 · Accepted Answer · answered Feb 27 '13 at 08:17

10

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 '13 at 08:17

rajesh kakawat

10,826
1
21
40

2

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 Feb 27 '13 at 08:18
1

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. – TW_ Feb 27 '13 at 08:23
1

@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 `
` tag, and not use `ready`. The `div` will exist then. That's what both Google and Yahoo recommend.
– T.J. Crowder Feb 27 '13 at 08:39

score 1 · Answer 2 · edited Jul 27 '18 at 04:00

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 '18 at 04:00

Jee Mok

6,157
8
47
80

answered Jul 26 '18 at 22:33

Rhys Lees

11
1

score 0 · Answer 3 · answered Feb 27 '13 at 08:20

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 '13 at 08:20

sjdaws

3,466
16
20

1

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. – T.J. Crowder Feb 27 '13 at 08:22

score -1 · Answer 4 · edited Aug 09 '18 at 08:02

-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 09 '18 at 08:02

SaschaM78

4,376
4
33
42

answered Feb 27 '13 at 08:29

Tsimtsum

981
9
27

jQuery .load() not working

4 Answers4

Linked