Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

jQuery load does not get another jquery script after loop WordPress

  • SOLVED

I'm using something like this:

<strong>I enqueued the jQuery like this in functions.php in my theme:</strong>

function my_init() {
if (!is_admin()) {

// Enqueue jQuery
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', false);
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js', array('jquery') );
wp_enqueue_script( 'my-easyTooltip.js', get_template_directory_uri() . '/js/easyTooltip.js', array( 'jquery' ) );
wp_enqueue_script( 'my-functions', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ) );

}
}
add_action('init', 'my_init');

<strong>**The jquery load:**</strong>

jQuery(document).ready(function() {
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').fadeTo(200, 1); });
});

});




<strong>**The Wordpress Loop**</strong>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

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

<div class="post-tip-item-<?php echo $post->ID; ?>" style="display: none;">
post tip content
</div><!-- /#post-tip-item-<?php the_ID(); ?> -->

<script type='text/javascript'>jQuery(document).ready(function() { jQuery('a.post-tip-<?php echo $post->ID; ?>').easyTooltip({ useElement: 'post-tip-item-<?php echo $post->ID; ?>'}); });</script>

<?php endwhile; ?>
<div class="navigation">

<?php posts_nav_link('','','&laquo; Previous Entries') ?>


<?php posts_nav_link('','Next Entries &raquo;','') ?>

</div>
<?php else : ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>


The problem is that after for example the load changes the page and gets the next posts this is not loaded anymore:

<script type='text/javascript'>jQuery(document).ready(function() { jQuery('a.post-tip-<?php echo $post->ID; ?>').easyTooltip({ useElement: 'post-tip-item-<?php echo $post->ID; ?>'}); });</script>

Answers (3)

2011-11-12

designchemical answers:

Hi,

Will it not allow you to set the element using:


<script type='text/javascript'>
jQuery(document).ready(function($) {
$('a.post-tip').easyTooltip({ useElement: $('a.post-tip').next()});
});
</script>

2011-11-12

John Cotton answers:

Should there be a space in this line?

jQuery('#load').fadeTo(200, 0).load(link + ' #load-posts', function(){ jQuery('#load').fadeTo(200, 1); });

Surely that should be
jQuery('#load').fadeTo(200, 0).load(link + '#load-posts', function(){ jQuery('#load').fadeTo(200, 1); });


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.

2011-11-12

Christianto answers:

Hi,

I guess if you're using jQuery.load and pass the url of source with additional expression appended to the URL for example:
"http://yoursite.com/this-is-my-post#load-posts"
instead of just
"http://yoursite.com/this-is-my-post"
The script tag will be stripped out before appended to wrapper.

You can check the explanation in [[LINK href="http://api.jquery.com/load/"]]jQuery.load page[[/LINK]].


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);
});

});