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

wordpress+jquery issue WordPress

  • SOLVED

I have the code working if i add this via javascript <script> tags , with adding googles hosted jquery, vs not working when doing it via wp_enqueue_script.

anyone want to give it a try?


// works without wp_enqueue_script()

$(function() {
var paged = 1;
var maxpages = 100;
if(paged==maxpages)$("#more").css({display:'none'});
$('#more').click(function(e) {
e.preventDefault();
paged++;
var uri = './?paged=' + paged;
$(this).text('Loading...');
$.ajax({
url : uri,
complete : function(data) {},
success : function(data,status) {
var foo = $(data).find('.post');
$(foo).each(function(n){
});
$(foo).hide().appendTo('.posts').fadeIn();
$('#more').text('more');
if(paged==maxpages) {
$('#more').css({display: 'none'});
}
$.scrollTo($(foo),700);
},
error : function(data,status) {}
});
});
});

// fails with wp_enqueue_script()

jQuery(function($) {
var paged = 1;
var maxpages = 100;
if(paged==maxpages)jQuery("#more").css({display:'none'});
jQuery('#more').click(function(e) {
e.preventDefault();
paged++;
var uri = './?paged=' + paged;
jQuery(this).text('Loading...');
jQuery.ajax({
url : uri,
complete : function(data) {},
success : function(data,status) {
var foo = jQuery(data).find('.post');
jQuery(foo).each(function(n){
});
jQuery(foo).hide().appendTo('.posts').fadeIn();
jQuery('#more').text('more');
if(paged==maxpages) {
jQuery('#more').css({display: 'none'});
}
jQuery.scrollTo(jQuery(foo),700);
},
error : function(data,status) {}
});
});
});



here is the working copy when adding via the footer

http://90mb.com/

here is the section where i am trying to get it to work.


function ajax_more_init()
{
wp_enqueue_script('jquery');
wp_register_style('ajax_more_css', plugin_dir_url(__FILE__) . 'css/more.css');
wp_enqueue_style('ajax_more_css');
wp_register_script('ajax_more_scroll', plugin_dir_url(__FILE__) . 'js/jquery.scrollTo-min.js', array('jquery'), '1.0');
wp_enqueue_script('ajax_more_scroll');
wp_register_script('ajax_more', plugin_dir_url(__FILE__) . 'js/more.js', array('jquery'), '1.0');
wp_enqueue_script('ajax_more');

}

add_action('init','ajax_more_init');


Answers (5)

2011-02-11

Andrzej answers:

can you attach a zipped HTML output of your page when using wp_enqueue_script and it's not working? Or just change live to not working version?


Andrzej comments:

Hmm, there seems to be <div class="posts" /> missing where the jQuery is trying to append the grabbed code.

Can you please turn on the working version again? :) Need to check few things.

Thanks

2011-02-11

Edouard Duplessis answers:

the init is loading before the id of the page... or any loop

http://codex.wordpress.org/Plugin_API/Action_Reference

2011-02-11

Sənan Quliyev answers:

You change the .js place from code.... for example not this... it is wrong:

<script src="1.js" type="text/javascript"></script>
<script src="2.js" type="text/javascript"></script>



it is true:

<script src="2.js" type="text/javascript"></script>
<script src="1.js" type="text/javascript"></script>



if you want solve this problem contact with me...

2011-02-11

Victor Teixeira answers:

We need to see the non working version.

When you call the jquery function like this "jQuery(function($) {", you should use $ instead of jQuery inside the function:


jQuery(function($) {

var paged = 1;

var maxpages = 100;

if(paged==maxpages) $("#more").css({display:'none'});

$('#more').click(function(e) {

e.preventDefault();

paged++;

var uri = './?paged=' + paged;

$(this).text('Loading...');

$.ajax({

url : uri,

complete : function(data) {},

success : function(data,status) {

var foo = $(data).find('.post');

$(foo).each(function(n){

});

$(foo).hide().appendTo('.posts').fadeIn();

$('#more').text('more');

if(paged==maxpages) {

$('#more').css({display: 'none'});

}

$.scrollTo($(foo),700);

},

error : function(data,status) {}

});

});

});



I'm not sure this is the problem but you can try it, it's the only thing that comes to mind...


chrismccoy comments:

here is the non working version, just updated it.

http://90mb.com/

when you click more, you can see what its doing.

2011-02-11

Denzel Chia answers:

Hi,

Try this.


jQuery(document).ready(function() {
var paged = 1;

var maxpages = 100;

if(paged==maxpages)jQuery("#more").css({display:'none'});

jQuery('#more').click(function(e) {

e.preventDefault();

paged++;

var uri = './?paged=' + paged;

jQuery(this).text('Loading...');

jQuery.ajax({

url : uri,

complete : function(data) {},

success : function(data,status) {

var foo = jQuery(data).find('.post');

jQuery(foo).each(function(n){

});

jQuery(foo).hide().appendTo('.posts').fadeIn();

jQuery('#more').text('more');

if(paged==maxpages) {

jQuery('#more').css({display: 'none'});

}

jQuery.scrollTo(jQuery(foo),700);

},

error : function(data,status) {}

});

});

});


WordPress enqueues jQuery in no conflict mode, so just changing all $ to jQuery should work.

I had done something similar before, but with a different approach on this site's theme http://lancearmstrongisguilty.com/
You can take a look at it.
This custom theme loads more posts using ajax too.

Thanks.