jQuery load does not get another jquery script after loop WordPress

fnarp comments:

If I remove the space from here + ' #load-posts' and make it + '#load-posts' it works and loads the script, but loads the entire PAGE inside the #load div!

John Cotton comments:

Well, of course, what loads is entirely down to you and what you code in the PHP file!

The link you've got in the href is the permalink so what will load is the whole page (with the header and footer and whatever else you have in your PHP code).

If you want just the content - do you want just the content? - then you need to do something different. For a start, having '#' in the link will make no difference to what happens server side, since the server won't see that. If you want to pass parameters to the server you need to use '?' and make a query string.

I'm guessing that you want to have some nice degradation with the permalink working as normal if no javascript is run but the JS changing things to load within the page when it can.

If I were you, I'd use an [[LINK href="http://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)"]]ajax call[[/LINK]], passing it a post is and load the content that way.

So your loop would have this in:

<a data="<?php the_ID(); ?>" href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="post-tip-<?php the_ID(); ?>"><?php echo substr($post->post_title,0,15); ?></a>

and your js this:

var id = jQuery(this).attr('data');

with an ajax call something like this:


var data = new Object();
data.action = 'whatever_your_ajax_func_is';
data.id = id;

jQuery.post('<?php echo admin_url('admin-ajax.php'); ?>?r=' +Math.floor(Math.random()*10000),
data,
function(response) {
// some response action
});


You might want to use jQuery.load instead of .post if what you return from the server is pure HTML.....

fnarp comments:

It will be nice if you can wrap this up as an example, I've tried but no success!

John Cotton comments:

There is a good example on the link I gave you - have you tried that?

The only thing missing from the the code I gave you is the php which is as simple as this (in your functions file):


<?php
add_action('wp_ajax_my_post_returner', 'my_post_returner');
add_action('wp_ajax_nopriv_my_post_returner', 'my_post_returner');
function my_post_returner() {
$post = get_post( $_GET['id'] );

echo $post->post_content;
exit();
}
?>

You could call this with js like this:


jQuery(document).ready(function() {

jQuery('.navigation a').live('click', function(e){

e.preventDefault();

var data = new Object();

data.action = 'my_post_returner'';
data.id = jQuery(this).attr('id');


jQuery('#load').load('<?php echo admin_url('admin-ajax.php'); ?>?r=' +Math.floor(Math.random()*10000),
data);

});
});




That would put the content of the post in the html element with id load.

fnarp comments:

I tried this code but do not works.

Christianto comments:

Please look at the note on jQuery.load page section "Loading Page Fragments"...
Its the <script> tag won't be included...

Maybe you can initialize the tooltip inside jQuery.load callback, of course by changing the id to class that not to specific..

jQuery('.navigation a').live('click', function(e){

e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#load').fadeTo(200, 0).load(link + ' #load-posts', function(){
jQuery('#load a.post-tips').easyTooltip({ useElement: jQuery(this).next()});
jQuery('#load').fadeTo(200, 1);
});

});