I'm trying to implement infinite scroll. Full code
jQuery(document).ready(function($) {
$(window).scroll(function() {
var that = $('#loadMore');
var page = $('#loadMore').data('page');
var newPage = page + 1;
var ajaxurl = $('#loadMore').data('url');
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
$.ajax({
url: ajaxurl,
type: 'post',
data: {
page: page,
action: 'ajax_script_load_more'
},
error: function(response) {
console.log(response);
},
success: function(response) {
//check
if (response == 0) {
//check
if ($("#no-more").length == 0) {
$('#ajax-content').append('<div id="no-more" class="text-center"><h3>You reached the end of the line!</h3><p>No more posts to load.</p></div>');
}
$('#loadMore').hide();
} else {
$('#loadMore').data('page', newPage);
$('#ajax-content').append(response);
}
}
});
}
});
});
This works fine on my computer, but does not work on any browsers on mobile (Android/iOS).
Any help would be appreciated!
Related
i have a script that reload the page when the value is >= 100 the problem is that location.reload(true); are not working in ie11, i also have tried with window.location = self.location.href; but i am having the same problem, in other browsers it works good.
$(function () {
if (value < 100) {
var timer = setInterval(function () {
$.ajax({
type: "GET",
url: $("#ancUrl").attr('href'),
data: {},
success: function (msg) {
console.log("This is msg:" + msg);
var msgInt = parseInt(msg);
if (msgInt > value)
value = msgInt;
},
error: function (err) {
console.log(err.responseText);
},
dataType: "json"
});
$("#progress-bar").width(value.toString() + "%");
if (value >= 100) {
clearInterval(timer);
window.location = self.location.href;
}
}, 2000);
}
});
You don't appear to have defined self anywhere, so you may have an error there. Beyond that, you're trying to assign the value of href as the whole value of location - which is meant to be an object. Instead, try:
window.location.href = window.location.href;
Try to move the if statement into the success callback.
Like that you can clear the interval into the same stack and reload the page on the good
.
$(function() {
if (value < 100) {
var timer = setInterval(function() {
$.ajax({
type: "GET",
url: $("#ancUrl").attr('href'),
data: {},
success: function(msg) {
console.log("This is msg:" + msg);
var msgInt = parseInt(msg);
if (msgInt > value)
value = msgInt;
$("#progress-bar").width(value.toString() + "%");
if (value >= 100) {
clearInterval(timer);
window.location = self.location.href;
}
},
error: function(err) {
clearInterval(timer);
console.log(err.responseText);
},
dataType: "json"
});
}, 2000);
}
});
place the if in the success function, ajax is asynchronous the if will execute immediately but value will change after the ajax has completed so the code may never reach the if statement
$(function () {
if (value < 100) {
var timer = setInterval(function () {
$.ajax({
type: "GET",
url: $("#ancUrl").attr('href'),
data: {},
success: function (msg) {
console.log("This is msg:" + msg);
var msgInt = parseInt(msg);
if (msgInt > value) {
value = msgInt;
$("#progress-bar").width(value.toString() + "%");
if (value >= 100) {
clearInterval(timer);
location.reload(true);
}
}
},
error: function (err) {
console.log(err.responseText);
},
dataType: "json"
});
}, 2000);
}
});
I'm hoping someone can find what my issue is. my script only fires when scrolled down... I need that functionality. What it doesn't do is fire on page load too which I need it to do initially. So it loads the content first, then I can scroll down the page for more new content.
I tried putting the ajax inside a function with the function name outside and it still didn't fire.
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
flag = true;
first = $('#first').val();
limit = $('#limit').val();
no_data = true;
if (flag && no_data) {
flag = false;
$('#loadmoreajaxloader').show();
$.ajax({
url: "commentedoncontent.php",
dataType: "json",
method: "POST",
cache: false,
data: {
start: first,
limit: limit
},
success: function(data) {
flag = true;
$('#loadmoreajaxloader').hide();
if (data.count > 0) {
first = parseInt($('#first').val());
limit = parseInt($('#limit').val());
$('#first').val(first + limit);
$.each(data.posts, function(i, response) {
//post content here
});
} else {
alert('No more data to show');
no_data = false;
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status);
flag = true;
no_data = false;
}
});
}
}
});
});
You need to separate it as a function, so you can call it on scroll AND on page load:
$(document).ready(function() {
myFunction();
$(window).scroll(function() {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
myFunction();
}
});
});
function myFunction(){
/* all the logic goes here */
}
You can place your code in a function and then execute it on page load and on on scrolling.
$(document).ready(function() {
doStuff(); //choose the name that you want
$(window).scroll(function() {
doStuff();
});
});
function doStuff(){
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
flag = true;
first = $('#first').val();
limit = $('#limit').val();
no_data = true;
if (flag && no_data) {
flag = false;
$('#loadmoreajaxloader').show();
$.ajax({
url: "commentedoncontent.php",
dataType: "json",
method: "POST",
cache: false,
data: {
start: first,
limit: limit
},
success: function(data) {
flag = true;
$('#loadmoreajaxloader').hide();
if (data.count > 0) {
first = parseInt($('#first').val());
limit = parseInt($('#limit').val());
$('#first').val(first + limit);
$.each(data.posts, function(i, response) {
//post content here
});
} else {
alert('No more data to show');
no_data = false;
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status);
flag = true;
no_data = false;
}
});
}
}
}
I have problem with my infinite scroll with Safari.
He run two times and make duplicate.
This is my code :
$window.scroll(function(){
if (($document.height() - $window.height()) == $window.scrollTop()) {
$('#loading-more svg').show();
jQuery.post(
ajaxurl,
{
'action': 'load_more',
'offset': offset
},
function(response){
$('#loading-more svg').hide();
$('.load-more').append(response);
if (response) {
offset = offset + 4;
}
}
);
}
});
Do you have solution ?
Thank you so much !
Unbind that specific scroll event till your delayed operation is completed to prevent accumulating more of the event triggers which create the duplication behaviour as in your case.
$window.scroll(myEventFn);
function myEventFn() {
if (($document.height() - $window.height()) == $window.scrollTop()) {
$window.unbind("unbind", myEventFn); //unbind specific event
$('#loading-more svg').show();
jQuery.post(
ajaxurl, {
'action': 'load_more',
'offset': offset
},
function(response) {
$('#loading-more svg').hide();
$window.scroll(myEventFn); //bind back the event
$('.load-more').append(response);
if (response) {
offset = offset + 4;
}
}
);
}
}
Try this
var scrolled = true;
$window.scroll(function(){
if ( scroll == true; ) {
scrolled = false;
if (($document.height() - $window.height()) == $window.scrollTop()) {
$('#loading-more svg').show();
jQuery.post(
ajaxurl,
{
'action': 'load_more',
'offset': offset
},
function(response){
$('#loading-more svg').hide();
$('.load-more').append(response);
if (response) {
offset = offset + 4;
scrolled = true;
}
}
);
}
}
});
In bigger monitor my infinite scroll's doesn't load more another div content if it's finish loaded by div content limit. So I have to fix this problem by create load more button.
How do I create load more button on my code?
scroll.php
include('db.php');
if(isset($_REQUEST['actionfunction']) && $_REQUEST['actionfunction']!=''){
$actionfunction = $_REQUEST['actionfunction'];
call_user_func($actionfunction,$_REQUEST,$con,$limit);
}
function showData($data,$con,$limit){
$page = $data['page'];
if($page==1){
$start = 0;
}
else{
$start = ($page-1)*$limit;
}
$sql = "select * from infinitescroll order by id asc limit $start,$limit";
$str='';
$data = $con->query($sql);
if($data!=null && $data->num_rows>0){
while( $row = $data->fetch_array(MYSQLI_ASSOC)){
$str.="<div class='data-container'><p>".$row['id']."</p><p>".$row['firstname']."</p><p>".$row['lastname']."</p></div>";
}
$str.="<input type='hidden' class='nextpage' value='".($page+1)."'><input type='hidden' class='isload' value='true'>";
} else {
$str .= "<input type='hidden' class='isload' value='false'><p>Finished</p>";
}
echo $str;
}
scroll.js
var ajax_arry = [];
var ajax_index = 0;
var sctp = 100;
$(function () {
$('#loading').show();
$.ajax({
url: "scroll.php",
type: "POST",
data: "actionfunction=showData&page=1",
cache: false,
success: function (response) {
$('#loading').hide();
$('#demoajax').html(response);
}
});
$(window).scroll(function () {
var height = $('#demoajax').height();
var scroll_top = $(this).scrollTop();
if (ajax_arry.length > 0) {
$('#loading').hide();
for (var i = 0; i < ajax_arry.length; i++) {
ajax_arry[i].abort();
}
}
var page = $('#demoajax').find('.nextpage').val();
var isload = $('#demoajax').find('.isload').val();
if ((($(window).scrollTop() + document.body.clientHeight) == $(window).height()) && isload == 'true') {
$('#loading').show();
var ajaxreq = $.ajax({
url: "scroll.php",
type: "POST",
data: "actionfunction=showData&page=" + page,
cache: false,
success: function (response) {
$('#demoajax').find('.nextpage').remove();
$('#demoajax').find('.isload').remove();
$('#loading').hide();
$('#demoajax').append(response);
}
});
ajax_arry[ajax_index++] = ajaxreq;
}
return false;
if ($(window).scrollTop() == $(window).height()) {
alert("bottom!");
}
});
});
Here's example live Demo from original site.
I don't see a problem. Add into html button or link with id "load-more-button" and append this code to scroll.js
$('#load-more-button').click(function(e) {
e.preventDefault();
var page = $('#demoajax').find('.nextpage').val();
$('#loading').show();
$.ajax({
url: "scroll.php",
type: "POST",
data: "actionfunction=showData&page=" + page,
cache: false,
success: function (response) {
$('#demoajax').find('.nextpage').remove();
$('#demoajax').find('.isload').remove();
$('#loading').hide();
$('#demoajax').append(response);
var isload = $('#demoajax').find('.isload').val();
if(!isload) $('#load-more-button').hide();
}
});
});
Hi we've implemented infinite scroll capabilities within our website. All works well within Chrome, but Firefox and I.e are not loading the bellow JavaScript code? We do have https, so could that be the issue, if so how do we work around it.
Bellow is our current code
$(document).ready(function () {
var ajax_arry = [];
var ajax_index = 0;
var sctp = 100;
$('#loading').show();
$.ajax({
url:"ajax.php",
type:"POST",
data:"function=showData&type=homeactivity&page=1",
cache: false,
success: function (response) {
$('#loading').hide();
$('#postStatus1').html(response);
}
});
$(window).scroll(function () {
var height = $('#postStatus1').height();
var scroll_top = $(this).scrollTop();
if(ajax_arry.length>0) {
$('#loading').hide();
for(var i=0; i<ajax_arry.length; i++) {
ajax_arry[i].abort();
}
}
var page = $('#postStatus1').find('.nextpage').val();
var isload = $('#postStatus1').find('.isload').val();
if($(window).scrollTop() == $(document).height() - $(window).height() && isload=='true') {
$('#loading').show();
var ajaxreq = $.ajax({
url: "ajax.php",
type: "POST",
data: "function=showData&type=homeactivity&page="+page,
cache: false,
success: function (response) {
$('#postStatus1').find('.nextpage').remove();
$('#postStatus1').find('.isload').remove();
$('#loading').hide();
$('#postStatus1').append(response);
}
});
ajax_arry[ajax_index++] = ajaxreq;
}
return false;
if($(window).scrollTop() == $(window).height()) {
alert("bottom!");
}
});
});
Thank you very much!
... try this... use $(window).load instead of $(document).ready...