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)
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
Edouard Duplessis answers:
the init is loading before the id of the page... or any loop
http://codex.wordpress.org/Plugin_API/Action_Reference
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...
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.
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.