I have the following code that loads content when a user scrolls to the bottom of the page. The problem is that if one scrolls too fast it double loads the content. What ways can I change my code to prevent this?
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
$('div#ajaxResults').show();
$.ajax({
url: "ajax/home.php?last_id=" + $(".postitem:last").attr("id"),
success: function(html){
if(html){
$("#messages").append(html);
$('#ajaxResults').hide();
}else{
$('#ajaxResults').html('<center>None.</center>');
}
}
});
}
});
I need for the solution to work multiple times. This script loads the next 5 messages, but there may be hundreds of messages that could be loaded. It is supposed to work in the same way that facebook or twitter loads updates.
SOLUTION:
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
var lastid = $(".postitem:last").attr("id");
$('div#ajaxResults').show();
$.ajax({
url: "ajax/home.php?last_id=" + $(".postitem:last").attr("id"),
success: function(html){
if(html){
if(lastid == $(".postitem:last").attr("id")){
$("#messages").append(html);
$('#ajaxResults').hide();
}
}else{
$('#ajaxResults').html('<center>None.</center>');
}
}
});
}
});
Add a variable that checks the lastid before the ajax is loaded, then only append html if the variable == the document last id. This way if ajax has already loaded, the two will not be equal and the update won't be posted.
Try adding $(this).unbind('scroll'); inside the if block, assuming you do not want the ajax request to run more than once. Don't put it in the $.ajax success callback though, since it may fire more than 1 ajax request this way.
http://api.jquery.com/unbind/
Can you set a variable that stores the timestamp it was called and if it's within a few milli-seconds then doesn't call again? Kind of hack-ish but might do the trick.
Obviously this isn't really solving the problem as that seems to be with how the scroll event is being triggered.
Related
I am using ajax to go the function and check if the value already exist on the database or not. If the data already exist, I show the jQuery dialog which is working fine but if the value doesn't already exist I don't want to show the popup and refresh the entire page. Here's my AJAX function:
function copyFile(val) {
var choices = document.getElementsByName("choice_shard_with_me").value;
var file_owner = document.getElementById('username').value;
$.ajax({
type: "GET",
url: "/copy_file/",
data: {choices:choices, file_owner:file_owner},
success: function(data){
$('#dialog-confirm').html(data)
}
});
}
My Django view:
if request.GET:
choices = request.GET.getlist('choice_shard_with_me')
file_owner = request.GET.getlist('username')
#Test if the file already exist in the user share directory
x = [File.objects.filter(user_id=request.user.id, file_name=i, flag='A').values_list('file_name') for i in choices]
y = [y[0] for y in x[0]]
if len(y) > 1:
return render_to_response('copyexist.html', {'file':y}, context_instance=RequestContext(request))
//doesn't refresh the whole page show the popup.
else:
//refresh whole page and do something
My question is: when the popup is displayed it is shown using Ajax in a div. If it goes into the else statement file copied is done and the successful message is given in a little div itself(I want to do whole page refresh here).
You can make your answer for example json encoded, where you will return two parameters:
{
success: true/false,
data : YOUR_DATA_HERE
}
So success callback can look into success part, and decide whether to show popup with data, or make page reload
Sorry, I don't know python, so can't advise exact expression to make correct json encode.
On my website I have mouse over and mouse out events set up on an HTML table. These events trigger ajax requests, and perform certain actions etc. However, i want to be able to not trigger a second request if one is already running. So, is there away to detect these requests, and therefore avoid a second. Incidentally Im using the jQuery $.ajax()
if it helps at all.
Thanks in advance
Chris
I'd try something simple like:
var requestMade = false;
function yourAjaxFunction(){
if(!requestMade)
{
requestmade = true;
$.ajax({
url: "page",
success: function(){
requestMade = false;
}
error: function(){
requestMade = false;
}
});
}
}
You can use the success: and error: settings to change the variable back to false.
I have never used the error so you may have to include some other things in it, but this is the general idea.
For this suppose I'd use ajaxStart() and ajaxStop() which would change specific variable ajaxRunning which could be checked before sending the request (maybe in ajaxStart() directly?)
Set global or local static variable to true when first ajax is about to trigger, than add if before triggering the second one ;) Than after one request is finished, set this variable to false
Well this has me well and truly stumped. After searching for the last few hours I still cannot seem to work out where I am going wrong.
I am trying to append an AJAX response to a container when it gets clicked. That works fine but I don't want it to append another object when the elements from the AJAX response also gets clicked.... so:
<div id="container">
<!-- AJAX response to get inserted here, for example -->
<span id="ajaxResponse"></span>
</div>
Here is my script:
$('#container').click(function(e) {
var current_el = $(this).get(0);
$.ajax({
url: 'text.html',
success: function(data) {
$(current_el).append(data);
}
});
return false;
});
So it works fine but for some reason the click event on #container also fires when I click on the AJAX response span!?
According to jQuery documentation:
To stop further handlers from
executing after one bound using
.live(), the handler must return
false. Calling .stopPropagation() will
not accomplish this.
But unless I am mistaken, I am calling false? :(
Anyone help me out on this?
UPDATED:
So the only way I can get it to work is by updating my code to this:
$('#container').live('click', function() {
var current_el = $(this).get(0);
$.ajax({
url: 'text.html',
success: function(data) {
$(current_el).append(data);
}
});
});
$('#ajaxResponse').live('click', function(e) {
return false;
});
This seems a little messy though... anyone have a better solution?
Where is live part you mention in the title of the question ?
It is how the event model works.. If you click on element which does not handle the event, the event will travel up the DOM hierarchy until it finds an element that handles the click (and stops its propagation..). Otherwise you would not be able to put an image inside a <a> tag and click on it..
You can bind a canceling handler on the inner element assuming you have someway to target it..
$.ajax({
url: 'text.html',
success: function(data) {
$(current_el).append(data);
// assuming the returned data from ajax are wrapped in tags
$(current_el).children().click(function(){ return false;});
}
});
I think the return false is referring to something else in this case...
you should try calling stopPropagation() - this should stop the "click" function from propagating down to the ajaxResponse span....
One option that you may want to try is switching over to using live(). Essentially, the click event you setup is calling bind(), and the solution you referenced is using live() which is a variation on bind().
For example:
$('#container').live("click", function(e) {
var current_el = $(this).get(0);
$.ajax({
url: 'text.html',
success: function(data) {
$(current_el).append(data);
}
});
return false;
});
HTH
This is a mock of what I'm doing:
function loadPage(pn) {
$('#'+pn).live('pagecreate',function(event, ui){
$('#'+pn+'-submit').click( function() {
$.mobile.changePage({
url: 'page.php?parm=value',
type: 'post',
data: $('form#'+pn+'_form')
},'slide',false,false);
loadAjaxPages(pn);
});
});
function loadAjaxPages(page) {
// this returns the page I want, all is working
$.ajax({
url: 'page.php?parm=value',
type: 'POST',
error : function (){ document.title='error'; },
success: function (data) {
$('#display_'+page+'_page').html(data); // removed .page(), causing page to transition, but if I use .page() I can see the desired listview
}
});
}
in the ajax call return if I add the .page() (which worked in the past but I had it out side of the page function, changing the logic on how I load pages to save on loading times), make the page transition to the next page but I can see the listview is styled the way I want:
$('#display_'+page+'_page').html(data).page();
Removing .page() fixes the transition error but now the page does not style. I have tried listview('refresh') and even listview('refresh',true) but no luck.
Any thoughts on how I can get the listview to refresh?
Solution:
$.ajax({
url: 'page.php?parm=value',
type: 'POST',
error : function (){ document.title='error'; },
success: function (data) {
$('#display_'+page+'_page').html(data);
$("div#name ul").listview(); // add div wrapper w/ name attr to use the refresh
}
});
Be sure to call .listview on the ul element
If it didn't style earlier, you just call .listview(), bot the refresh function. If your firebug setup is correct, you should have seen an error message telling you that.
I didn't have time to get down to creating some code before you posted your fix, but here's a little recommendation from me:
if(data !== null){ $('#display_'+page+'_page').html(data).find("ul").listview() }
This is a bit nicer than a new global selector. Also - you don't need the div and you can provide a detailed selector if you have multiple ULs.
caution: the above code requires data !== null. If it's null - it will throw an error.
If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create any nested lists that are added. For example:
$('#mylist').listview('refresh');
Note that the refresh() method only affects new nodes appended to a list. This is done for performance reasons. Any list items already enhanced will be ignored by the refresh process. This means that if you change the contents or attributes on an already enhanced list item, these won't be reflected. If you want a list item to be updated, replace it with fresh markup before calling refresh.
more info here.
I have a jQuery application, a shopping cart, that posts back info to the server, if the text inputfield is changed. This is done in an Ajax request. Now, if the Ajaxrequest is a success, I want to reload the shoppingcart asynchronously. The code is as follows:
$(document).ready(function() {
var jInput = $(":input");
jInput.change(function() {
var vareAntal = $(this).val();
var vareID = $(this).siblings("input#vareID").val();
$.ajax({
type: 'POST',
url: 'checkout.aspx',
data: { 'ID': vareID, 'Antal': vareAntal },
success: function() {
$("#newbasket").load(location.href + " #newbasket>*", "");
}
});
});
});
This works, but only once! If I change the text inputfield, after the page is loaded for the first time, the div with the ID of newbasket reloads asynchronously. But if I try to change it again, nothing happens.
I've tried to do some debugging with Firebug, and the first time I change the text inputfield, it fires a POST-event, and afterwards a GET-event, when the POST-event is succesful. But after that, nothing happens when I change the text inputfield again.
So, how do I achieve triggering the .load() method after each text input change?
I've also tried experimenting with the .ajaxComplete() function, but that, of course, resulted in an infinite loop, since the .load() is an ajax-object.
Instead of .change(func), use .live('change', func) here, like this:
jInput.live('change', function() {
This will make the selector work on any new inputs added as well. When you're replacing the elements like you are currently, their event handlers are lost (or rather, not re-created, because you have new elements). .live() is just for this purpose, it listens for events from old and new elements, regardless of when they were added.