I am using cody sherman's javascript code here: http://codysherman.com/tools/infinite-scrolling/code
I am also using a simple jquery script to dynamically change the background-images of the divs that hold the tumblr posts.
The jquery code works fine but I need a way to call the function again when the infinite scrolling script updates with new posts. A way of them talking to each other I guess.
You can see the page here: http://hypergeography.tumblr.com/
(It isn't using the infinite scrolling yet. but it does have the script that changes the background images.)
Any help would be appreciated.
If you feel safe enough, you could definitely get into that code (it's not long at all) and add some logic to the onreadystatechange section. This event is fired once the Ajax call is complete. If you hook into it, you could easily add something to talk to your code.
Another way is to hijack XMLHttpRequest, so that once its send() method is called, you attach your own event listener that monitors that request for the 'load' event. Once the request is done, you can call your custom functions. This could be done like this:
XMLHttpRequest.prototype.originalSend=XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send=function(s){
this.addEventListener('load',function(){
//CALL YOUR CODE HERE
},false);
this.originalSend(s);
}
Or instead, you could hijack the onreadystatechange function to add some of your own logic:
XMLHttpRequest.prototype.originalSend=XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send=function(s){
if(this.onreadystatechange){
var oldORSC=this.onreadystatechange;
}
this.onreadystatechange=function(){
if (this.readyState==4 && this.status==200){ //a successful request
//CALL YOUR CODE HERE
}
if(oldORSC){
oldORSC();
}
}
this.originalSend(s);
}
Of course, if you wanted to support IE, you would have to do similar things withe the ActiveXObject that they use for AJAX. But I don't use it so I can't give you any examples.
EDIT: this assumes your page is making calls only for this purpose. If you have other AJAX calls, you will need to add logic to determine which call is being used. For this, you could hook into the open() method and inspect the URL or parameters or whatever specific information will help you determine where the call is going, and then modify the request accordingly.
ALSO: make sure that these hijacks are called FIRST, before any of the other javascript.
Related
is there a way to be notified when a function is registered via the jQuery $(document)ready() functionality and get a reference to that?
The background:
Im using a parent theme on a wordpress site, which uses ajax page transitions and document ready is only called on the first load. Now i want a reference to each function previously registered to call them again if my page changes.
The goal: is to restore the functionality of $(document).ready() as not only me, but many other plugins out there are using it and i obviously dont want to rewrite them all.
Yes, i could call MY registered function with no efford but this feels kind of lackluster while destroying the underlying functionality. By the way: it is the parent themes transitions, so overriding this wouldn't be the best solution either.
What i want is to provide an addition, that intercepts every registration and calls the registered functions again manually after the transition. Is that a good idea?
(notice calling ready() manually doesn't work if it was called already automatically on the initial page load)
why dont you wrap them all in a onPageChanged function and call that on document ready, and in the success handler from ajax calls
I've written a code that clears the form on every reset event like that:
$("form").on("reset", function(event) {
event.preventDefault();
$("form").clearForm();
$("#reportGenerated").empty();
});
This code is inside an external js loaded in every page so this handles the entire system.
In one specific form in my system I have three inputs that loads Ajax requests into another parts of the page, then when I try to reset and clear the form the information provided by the Ajax request isn't cleared.
So my question is, is there a way I can extend my functionality above without being forced to copy/paste what it already does?
I've read the jQuery Event Extension but does not seem to do what I need, plus, is quite "dangerous" to do it if you don't know exactly how every browser and its version handle JavaScript events.
You can easily add another click handler with will run along with this one(no need to do anything in the already existing handler).
$("form").on("reset", function(event) {
//do your custom stuff here
});
Anytime I click on a link/button anywhere on my site that performs/calls a GET or POST (Ajax and non-Ajax), if it takes more then a few seconds I would like to display a loading gif. I know how to do this on an individual basis, but I would like to know if it is possible to create a function that will do this automatically and then hide the gif when finished (assuming it does not redirect to a new page).
I found this but this does not work with the post method for spring security for example.
It may be a case where it is not possible or requires more effort than it's worth. I would just like to know if it is possible and if so how might it be approached.
The only constraint is that any methods calling the post or get should not need to be aware of this so called "listener".
This is tagged jQuery so I'm giving a jQuery answer for simplicity. This is also solvable in a relatively simple manner without it.
Hooking on every request:
Let's say your method is called myMethod.
GET/POST requests may be triggered the following ways:
Form submits, in which case you can select the form $("#formID").submit(myMethod); . Note that if myMethod returns false it will cause your form to not submit
AJAX in which case you can use $.ajaxStart with $.ajaxStart(myMethod)
"a" tag clicks, and other click handlers, in which case you can perform $("a[href]").click(myMethod) , note that this selects all a tags with an href attribute, you might want to change the selector to suit your needs
Image loads which you can handle like explained in this question.
Script loads which you can detect like explained in this question.
Stylesheet/Link loads, which is explained in this blog post. You can add a hidden element to the CSS and check if the style was applied in an interval, and when it does call myMethod
What you can't do:
If your page has a plugin like Flash, or in general anything your JavaScript does not have access to, you can't hook on requests it makes.
The case of displaying a 'loading' gif.
From what you're asking it seems like you only care about image requests, and AJAX requests (correct me if I'm wrong), since external pages that take a long time to load NOT in an AJAX requests can (should) implement that .gif logic on the new page. This could be handled as I explained above.
Although you can hook every case, I would not do so. I would create a method that loads the 'loading' gif into a place and accepts a url. If that url is an image (for example, by file extension if that's ok with your mapping) use the logic in the image load detect linked question, if it's AJAX load the loading gif to where the data will be loaded, and replace it with the data on a .done() handler.
Here is a question about how to do this for an image, here is how to do it for AJAX . The two can be easily combined into a method which is what I believe you should use.
Given items on a webpage that get changed by AJAX calls over time, how can a userscript get notified about those changes, whenever they occur?
Imagine the Facebook newsfeed. It has 12 items in it when you load the page. Those items are wrapped in <li> tags contained within a <ul>. As you scroll the page down, new <li> chunks of data load into that <ul>.
I'm wondering how a userscript could be notified of such a change.
One idea is to constantly query that <ul>, counting its items, and watching to see if that number gets bigger. Possible, but to catch the change right when it happens it might have to run so often that it's too expensive.
Another idea would be to figure out what scroll position triggers the loading, and to watch for such a change. Less expensive, but very specific.
I'm wondering if there's a third option. Something that would notify me of the change, whenever it happens. I'm not just interested in the feed, but in this concept more generally. Given items on a page that get changed by AJAX calls, how can a userscript get notified about those changes?
Hijack the send method
var oldSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function(){
// do what you need; then send the request
oldSend.apply(this, arguments);
}
I think what you are looking for is the DOMSubtreeModified event.
This works in firefox chrome and IE >= 9, if your scripting on facebook im guessing its for a greasemonkey/chrome extension? if that is the case this should be okay.
This event is fired on a node when ever a child node is added removed or changed
You can use it with
.addEventListener ("DOMSubtreeModified", handler, useCapture);
but I don't think it works with attachEvent.
Here's some more info on it.
http://help.dottoro.com/ljrmcldi.php
Do you have access to the Ajax calls that are updating the pages contents? Generally the better approach is to attach a call back to the actual Ajax call.
If the request are being made with Jquery use $.ajaxComplete() or $.ajaxSuccess() to trigger your code. These will fire any time a request completes so when this happens you can check if the content has changed without it being to expensive.
$.ajaxSuccess(function() { //check for update and do something });
My question is about using Back and Next buttons (of the browser) on an AJAX (dynamical) webpage.
The solution I self came up with:
setInterval(function(){
if (location.hash != hash)
{
hash = location.hash;
app.url = window.location.href.toString().replace('http://xxxxx.nl/xxxx/#!/','')
app.handleURL();
}
}, 500);
this function reads the url(hash) and compares it with the last stored url(hash), every 0.5 second. If url has changed (back/next is pushed) it runs handleUrl() which runs more functions to dynamically build my page.
the problem is, this sort of works BUT when I click an html [A] element or when I change the url in an other way (javascript), that content will be loaded TWICE because of the setInterval()... functionality.
How can I build my HTML/Javascript in such way that my content will always be loaded once,
once when I push back/next
once when I click on an HTML element/use Javascript functions on
runtime
I searched the sh*t out of google for a solution, plz help!
You don't need a timer to check it. Just use the onhashchange event, and fire your AJAX calls when the event is called. This event isn't supported in IE versions below 8, though, so your method seems fine if you need IE support.
Also, it doesn't make sense that they're being called twice for a elements, since there's no reason for the interval to call your AJAX loader twice just because the hash was changed using an a element. You probably have an event listener attached to the a element which causes it to load the AJAX content, which wouldn't be needed since you're detecting any change in the hash, no matter how it was changed.
I suggest using a library for that. It will be tricky to make your own solution. Take a look at these:
http://www.asual.com/jquery/address/docs/#sample-usage
http://benalman.com/projects/jquery-bbq-plugin/