Ask your WordPress questions! Pay money and get answers fast! (more info)

Load Content Ajax after loadmore button (AJAX CallBack Ajax) WordPress

  • REFUNDED

I try to explane better my issue:

in this page [[LINK href="http://www.kickproduction.it/dna"]]http://www.kickproduction.it/dna[[/LINK]]
see the box on the left ( NEWS ), everytime that you click on 1 item, the news loads in center, and that works.

When you scroll down inside NEWS div, and then click on MORE Button ( V ), you find other item (news page 2), but if you click on these items they don't loads on center div. Please help me .. this is my code


jQuery.noConflict();
jQuery(document).ready(function($){
$.ajaxSetup({cache:false});
$("a.ajax").click(function(){
var post_url = $(this).attr("href");
var post_id = $(this).attr("rel");
$("#contagio").html('<div class="loading"><img src="http://www.kickproduction.it/dna/img/loading.gif" height="400" /></div>');
$("#contagio").load(post_url);

return false;
});
});

jQuery.noConflict();
(function($) {
// Ajax-fetching "Load more posts"
$('.fetch a').live('click', function(e) {
e.preventDefault();
$(this).addClass('load-ing').text('loading...');
$.ajax({
type: "GET",
url: $(this).attr('href') + '#news ul.news',
dataType: "html",
success: function(out) {
result = $(out).find('#news ul.news li');
nextlink = $(out).find('.fetch a').attr('href');
$('#news ul.news').append(result).masonry('appended', result);
$('.fetch a').removeClass('load-ing').text('V');
if (nextlink != undefined) {
$('.fetch a').attr('href', nextlink);
} else {
$('.fetch').remove();
}
}
});
});
})(jQuery);

Answers (3)

2013-12-04

S├ębastien | French WordpressDesigner answers:

hey !!
what that ??!!

$('.fetch a').attr('h





</script>ref', nextlink);


is it really your code ?

replace by


$('.fetch a').attr('href', nextlink);




2- cannot call methods on masonry prior to initialization; attempted to call 'appended'

3-probably it's best if you replace
$("a.ajax").click(function(){

by
$("a.ajax").on('click',function(){


Manlio Ma comments:

doesn't works :(

2013-12-04

Fahad Murtaza answers:

content is appended into the page so rebinding is necessary.


$("a.ajax").on("click", , function(event){...


Fahad Murtaza comments:

content is appended into the page so rebinding is necessary.


$("a.ajax").on("click", , function(event){...


Fahad Murtaza comments:


<script>
jQuery.noConflict();
jQuery(document).ready(function($){
$.ajaxSetup({cache:false});
$("a.ajax").click(function(){
var post_url = $(this).attr("href");
var post_id = $(this).attr("rel");
$("#contagio").html('<div class="loading"><img src="http://www.kickproduction.it/dna/img/loading.gif" height="400" /></div>');
$("#contagio").load(post_url);

return false;
});
});

jQuery.noConflict();
(function($) {
// Ajax-fetching "Load more posts"
$('.fetch a').live('click', function(e) {
e.preventDefault();
$(this).addClass('load-ing').text('loading...');
$.ajax({
type: "GET",
url: $(this).attr('href') + '#news ul.news',
dataType: "html",
success: function(out) {
result = $(out).find('#news ul.news li');
nextlink = $(out).find('.fetch a').attr('href');
$('#news ul.news').append(result).masonry('appended', result);
$('.fetch a').removeClass('load-ing').text('V');
if (nextlink != undefined) {
$('.fetch a').attr('href', nextlink);
} else {
$('.fetch').remove();
}
}
});
});
})(jQuery);



</script>


Is that code being used on the site?


Fahad Murtaza comments:

'Balanean Corneliu ' has already given the solution.


Manlio Ma comments:

yes is this last code


Manlio Ma comments:

It is not the solution, is my code... tried to visit the site ?


Fahad Murtaza comments:

try this complete code



<script>
jQuery.noConflict();
jQuery(document).ready(function($){
$.ajaxSetup({cache:false});
$("p").on("click", "a.ajax", function(event){
var post_url = $(this).attr("href");
var post_id = $(this).attr("rel");
$("#contagio").html('<div class="loading"><img src="http://www.kickproduction.it/dna/img/loading.gif" height="400" /></div>');
$("#contagio").load(post_url);

return false;
});
});

jQuery.noConflict();
(function($) {
// Ajax-fetching "Load more posts"
$('.fetch a').live('click', function(e) {
e.preventDefault();
$(this).addClass('load-ing').text('loading...');
$.ajax({
type: "GET",
url: $(this).attr('href') + '#news ul.news',
dataType: "html",
success: function(out) {
result = $(out).find('#news ul.news li');
nextlink = $(out).find('.fetch a').attr('href');
$('#news ul.news').append(result).masonry('appended', result);
$('.fetch a').removeClass('load-ing').text('V');
if (nextlink != undefined) {
$('.fetch a').attr('href', nextlink);
} else {
$('.fetch').remove();
}
}
});
});
})(jQuery);

</script>


Fahad Murtaza comments:

BTW, I never said that was the solution before :)


Manlio Ma comments:

in this way, doesn't load the news in the central div.

2013-12-04

Balanean Corneliu answers:

The complete code to replace:

jQuery.noConflict();

jQuery(document).ready(function($){

$.ajaxSetup({cache:false});

$("a.ajax").click(function(){

var post_url = $(this).attr("href");

var post_id = $(this).attr("rel");

$("#contagio").html('<div class="loading"><img src="http://www.kickproduction.it/dna/img/loading.gif" height="400" /></div>');

$("#contagio").load(post_url);



return false;

});

});



jQuery.noConflict();

(function($) {

// Ajax-fetching "Load more posts"

$('.fetch a').live('click', function(e) {

e.preventDefault();

$(this).addClass('load-ing').text('loading...');

$.ajax({

type: "GET",

url: $(this).attr('href') + '#news ul.news',

dataType: "html",

success: function(out) {

result = $(out).find('#news ul.news li');

nextlink = $(out).find('.fetch a').attr('href');

$('#news ul.news').append(result).masonry('appended', result);

$('.fetch a').removeClass('load-ing').text('V');

if (nextlink != undefined) {

$('.fetch a').attr('href', nextlink);

} else {

$('.fetch').remove();

}

}

});

});

})(jQuery);


Manlio Ma comments:

thanx but this is exactly the code that I used and doesn't works on news of second page loaded