I have the code below to find the next sequential page number and load it at the bottom of the page once the user hits the bottom of the screen.
the loading div slides down and as it is loading and up once it is done... it is set to "display:none" by default
What i need is a line of code in there which basically hides the #loading div if no more pages can be found to load... " var url = "page"+nextpage+".html";" finds the new page... titled 'page 2.html, page3.html' and so on.
Any help would be appreciated. I'm assuming it is easy but I can't find a solution anywhere...
alreadyloading = false;
nextpage = 2;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
if (alreadyloading == false) {
$("#loading").slideDown();
var url = "page"+nextpage+".html";
alreadyloading = true;
$.post(url, function(data) {
$('#newcontent').children().last().after(data);
alreadyloading = false;
nextpage++;
$("#loading").slideUp();
});
}
}
});
If there is no such file then the AJAX request will fail, so you can do what you need from inside a "failure" handler. To be able to specify that, you one solution is to move from using $.post to using the more configurable $.ajax, which gives you all the necessary options:
$.ajax({
type: 'POST',
url: url,
success: function(data) {
$('#newcontent').children().last().after(data);
nextpage++;
},
complete: function() {
alreadyloading = false;
$("#loading").slideUp();
}
});
The complete callback contains code which will be executed no matter what happens with the request; the success callback will be executed before complete, but only if the request was successful.
Related
I am calling the ajax functions on scroll, The issue I am having is that while scrolling down when a user reaches the point where ajax function is called the ajax call is triggered and while the data/record is being loaded using ajax call the scroll is running the ajax call 100times. What I need is when a user scrolls to a specific point then ajax function calls only once until the record is being retrieved from ajax. After the record is retrieved then the ajax call should trigger again and so on.
jQuery.noConflict($);
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() >= $(document).height() - $(window).height() - 100 && $tester == true) {
console.log("ajax triggered mobile");
//ajax call
$.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);
}
}
});
}
Found this gem somewhere long time ago. Should work for you, let me know.
var scrolled = false;
page.on('scroll', function(){
if(!scrolled){
scrolled = true;
//do stuff that should take a while...
scrolled = false;
};
});
I have a script that makes $.ajax request for a json api. So what I want to do is to build unit test so I can test the result from the ajax request. For example if I get json object back. I know result should include "items" and "result" which is an array. The things is I dont know how to initialize the $.ajax function which is inside a
$("#button").click(function() { });
Here's the skeleton of my javascript index.js file. The file is not complete. as it is longer. I just included the relevant parts. But it works. Here's the app live online http://pctechtips.org/apps/books/
$(document).ready(function() {
var item, tile, author, publisher, bookLink, bookImg;
var outputList = document.getElementById("list-output");
var bookUrl = "https://www.googleapis.com/books/v1/volumes?q=";
var searchData;
$("#search").click(function() {
outputList.innerHTML = ""; //empty html output
searchData = $("#search-box").val();
//handling empty search input field
if(searchData === "" || searchData === null) {
displayError();
}
else {
// console.log(searchData);
// $.get("https://www.googleapis.com/books/v1/volumes?q="+searchData, getBookData()});
$.ajax({
url: bookUrl + searchData,
dataType: "json",
success: function(response) {
console.log(response)
if (response.totalItems === 0) {
alert("no result!.. try again")
}
else {
$("#title").animate({'margin-top': '5px'}, 1000); //search box animation
$(".book-list").css("visibility", "visible");
displayResults(response);
}
},
error: function () {
alert("Something went wrong.. <br>"+"Try again!");
}
});
}
$("#search-box").val(""); //clearn search box
});
});
In your test you need first to prepare a HTML fixture which will contain all the required elements like #search. After preparing it, you can load your script via $.getScript() - it will attach click event listener to #search. Finally, you have to spy on $.ajax and trigger the click manually via $('#search').trigger('click')
the title may be a bit misleading but I'm not sure how to phrase it better, so I apologize for that.
I'm creating a custom handler so the site doesn't refresh when new content is pressed (similar to how youtube works, for example).
For that I'm using this script:
$('.sidebar2 li a').click(function (e) {
test = true;
var button = $(this);
var noteId = button.data("noteid");
$(".sidebar2 li.active").removeClass("active");
var postData = { id: noteId };
$.ajax({
url: '/API/Note',
type: 'get',
data: postData,
success: function (resp) {
if (resp.success == true) {
$('#app-bar-left').html(resp.note.navBarHTML);
$('#cell-content').html(resp.note.noteContentHTML);
window.history.pushState({ path: window.location.href }, resp.note.title, '/MyNotes/Note/' + resp.note.noteId);
document.title = resp.note.title;
$('*[data-noteId="'+resp.note.noteId+'"]').parent().addClass("active")
e.preventDefault();
test = false;
return false;
}
}
});
});
even though I've stated e.preventDefault() to trigger, javascript loads the new content into the current frame without refreshing, but the browser refreshes again anyway.
I've tried to use href="#" however in this case when I go back and handle that, I always end up with two same pages, one without and one with # at the end, and in addition to that it wouldn't be very user friendly to have all links href="#"
What am I doing wrong to make the browser redirect "normally" even though I've told him no no no?
I've also tried adding onclick="javascript:void(0)" on a elements and that didn't help
ajax is async. By the time success callback is called event will already be bubbled up the DOM tree and processed. You need to call preventDefault before sending a request.
$('.sidebar2 li a').click(function (e) {
e.preventDefault(); // here for example
test = true;
var button = $(this);
var noteId = button.data("noteid");
$(".sidebar2 li.active").removeClass("active");
var postData = { id: noteId };
$.ajax({
url: '/API/Note',
type: 'get',
data: postData,
success: function (resp) {
if (resp.success == true) {
$('#app-bar-left').html(resp.note.navBarHTML);
$('#cell-content').html(resp.note.noteContentHTML);
window.history.pushState({ path: window.location.href }, resp.note.title, '/MyNotes/Note/' + resp.note.noteId);
document.title = resp.note.title;
$('*[data-noteId="'+resp.note.noteId+'"]').parent().addClass("active")
test = false;
// returning here makes no sense also
// return false;
}
}
});
});
This is my first time trying to implement an infinite scroll with JQuery / Ajax. This is where I am currently:
<script>
$(document).ready(function() {
// see if we're at the bottom of the page to potentially load more content
$(window).on('scroll', scrollProducts);
function scrollProducts() {
var end = $("#footer").offset().top;
var viewEnd = $(window).scrollTop() + $(window).height();
var distance = end - viewEnd;
// when we're almost at the bottom
if (distance < 300) {
// unbind to prevent excessive firing
$(window).off('scroll', scrollProducts);
console.log('we reached the bottom');
$.ajax({
type: 'GET',
url: "foo/bar/2",
success: function(data) {
console.log("success!");
$('#container').append(data).fadeIn();
// rebind after successful update
$(window).on('scroll', scrollProducts);
}
});
}
}
});
</script>
I'd like to understand the correct way to update the page number in the url: foo/bar/2.
I've read that due to the difference between synchronous and asynchronous calls you can't use a global variable but instead need a callback (although I'm failing to understand it). I've also seen a solution where someone updated the values of hidden fields and then referenced those, although that seems like an ugly workaround.
What is the correct or recommended way to handle page numbers in this situation, so that the number increases with each request until there are no more pages?
keep a counter and use it in you request
var page = 1;
$(document).ready(function() {
// see if we're at the bottom of the page to potentially load more content
$(window).on('scroll', scrollProducts);
function scrollProducts() {
var end = $("#footer").offset().top;
var viewEnd = $(window).scrollTop() + $(window).height();
var distance = end - viewEnd;
// when we're almost at the bottom
if (distance < 300) {
// unbind to prevent excessive firing
$(window).off('scroll', scrollProducts);
console.log('we reached the bottom');
$.ajax({
type: 'GET',
url: "foo/bar/" + page,
success: function(data) {
console.log("success!");
$('#container').append(data).fadeIn();
// rebind after successful update
$(window).on('scroll', scrollProducts);
page++;
}
});
}
}
});
I am trying to load content from a new page using AJAX. The test website I am working on is dev.dog-company.com.
This is my code:
$('a[rel="load"]').click(function(){
//var siteurl = "";
var link = $(this).attr("href");
$(this).attr("href", '#');
$('#slider-wrapper').slideUp();
$('#content').wrap('<div id="wrap"></div>').css('opacity', '0.75').css('background-color', 'black');
$.ajax({
type: 'POST',
url: link,
success : function(data){
var response = $(data);
var head= response.find('head');
var slider = response.find('#slider-wrapper');
var content = response.find('#content');
$('#content').unwrap('<div id="wrap"></div>')
jQuery("head").html(head);
if(slider != null)
jQuery("#slider-wrapper").html(slider).slideDown();
jQuery("#content").html(content);
return false;
}
$(this).attr("href", link);
})
});
I am trying load the content on click but the page reload everytime without the click working. Also I am not sure if I need to be doing something else other than what I am doing to my code. The rel="load" is only on home, info->AboutUs & FAQ.
Your help is appreciated.
Update:
I still can't get it to work. This is my latest code. And the site is still running it. When i use the debugging for chrome it never goes through my code. is it the re="load" that is causing the problem?
Update:
My initial problem was not having the document ready. But not I think the way I am parsing the information isn't working. I tried find and filter both seem to not work correctly. Also how do I change the url in the browser after I it pushes the post.
Update
After a lot of messing around with it I got it to partially work. One thing I can't do it replace head. and then the data pushed in slider is there but it does not seem to work on the website. It doesn't slide down like I have it in the code.
$('document').ready(function() {
$('a[rel="load"]').click(function(e){
//var siteurl = "";
e.preventDefault();
var link = $(this).attr("href");
$('#slider-wrapper').slideUp();
$('#content').wrap('<div id="wrap-overlay"></div>');
/*$('#wrap').css({
'opacity': '0.75',
'background-color': 'black',
'z-index' : '10'
});*/
$.ajax({
//ajax setting
type: 'POST',
url: link,
dataType: 'html',
success : function(data){
//parse data
var response = $("<div>").html(data);
console.log(typeof(response));
console.log(response);
//var head = response.find('<head>').html();
slider = response.find('#slider-wrapper').html();
var content = response.find('#content').html();
console.log(content);
//console.log(head);
//console.log(slider);
//Post data
$('#content').unwrap();
//jQuery("head").empty().append(head);
if(slider != null){
jQuery("#slider-wrapper").empty().slideDown().append(slider);
}
jQuery("#content").empty().append(content);
return false;
}
})
});
});
Try this:
$('a[rel="load"]').click(function(e) {
e.preventDefault();
// ...
});
You need to stop default browser behaviour on link click, which is following it.