Javascript Bind function to Ajax load event - javascript

I am trying to write an chrome extension that interacts with Twitter pages however I am having a hard time firing off the function when the twitter stream is ready because it is dynamically loaded after the document is ready.
How can I bind a function to the element being loaded or some sort of generic ajax success response for the element.
current code.
https://github.com/billpull/Twitter-Ticker

You can look at .ajaxSuccess, which is a global handler that is executed when an ajax call is successful (provided the ajax call was done through .ajax).

Related

Wordpress Registration

My site uses (a customised) Login with Ajax plugin, which simply redirects users to the referring page upon signup/log in. Is there some way that I could hook into the registration javascript event and call Google Analytics manually to trigger the goal, or otherwise create a conversion event for when users register (but one that is not triggered by logging in)? Any help would be appreciated!
I see at least two options. Both would work by registering a "virtual URL" (and address that does actually exist in your website) for the confirmation page. You do this by adding the (virtual) page location to a pageview call:
ga('send','pageview','/thankyou.html');
One way is to edit your plugin code and add the above directly to the ajax success handler (the bit where the redirection happens after a successfull ajax response).
If for some reason you rather want to add tracking via a global js file you can (at least if you are using jQuery, although undoubtedly other libraries have similar mechanisms), a global ajax sucess handler that hooks into all ajax events on your page and check if the called ajax url is that for your confirmation page:
$( document ).ajaxSuccess(function( event, xhr, settings ) {
if ( settings.url == "ajax/thankyou.html" ) {
ga('send','pageview','/thankyou.html');
}
});

Post/Get handler in Jquery/Javascript

I am doing a web application,
which creates a lot of post & get requests.
I can see all the requests using Develop Tools in Mozilla/Chrome, and also in Charles (application).
Is it possible to create a jquery/javascript function which will listen for all requests on current page, and will alert each request to me?
Something similiar to Jquery .click() function.
example:
$('body').post(function() {
alert(this.Url + this.Parameters);
});
I googled, and couldn't find, hope there is a way.
Yes,in Jquery you have Global Ajax Event Handlers
These methods register handlers to be called when certain events, such
as initialization or completion, take place for any Ajax request on
the page
refer the Documentation

JavaScript Ajax LIstener

I am looking for a listener to receive ajax events before any Ajax method is invoked.
I see there is an ajaxLIstsner in JQuery which would work if all my ajax requests were coming from JQuery. But there are not. So, question is how would I implement such a listener in core JavaScript.
Thanks.
You can override the xhr prototype, see http://oreilly.com/pub/h/4133

pageLoad in MVC

In ASP.NET I usually use pageLoad() JavaScript function, that gets executed every time the page sends a request even with Ajax (UpdatePanel).
Is there anything like that in Razor?
I mean a JavaScript function to get executed for every ajax request without using OnSuccess or something like that in AjaxOptions.
If you want a javascript function to run every time your page loads then you need to include the script you want at the top bottom of every page you want it to execute on
Then inside of that you'll have the js you want to run.
If you're using jquery then I suggest using $(document).ready()
Edit
Alternatively if you want some csharp/vb to run every time your page loads then you need to create a constructor in your controller and place the necessary code in there.

Track Ajax requests on a page

I have a web page and I am associating a note with the page storing it in my database, so that the whenever the next time the page is loaded that notice can been seen till it is deleted by some other user authorized to do the same. However, say I associate a note with the page after some content is loaded through AJAX. I want the note to appear only after that particular content has loaded next time on the web page. I would like to track the AJAX request and attach the note to it? I want to do it all through simple JavaScript code put at the bottom of any web page. How can it be done?
jQuery ajax provides methods to fire events before, during and after the ajax request. Please check the api here for complete list.
Here are couple of methods that are called after completion of every ajax request.
jQuery.ajaxComplete() - Register a handler to be called when Ajax requests complete.
jQuery.ajaxSuccess() - Show a message when an Ajax request completes successfully
These functions allows you to pass a callback function to trigger after event occurs. In that call back function check if content you want is loaded or not, then show the note.
Sample code for the above methods can be found here:
http://api.jquery.com/ajaxComplete/
http://api.jquery.com/category/ajax/
Hope this helps.
You'd need to write a wrapper for all of your ajax calls that checks the result and sees if it should add a note. Here's an example, assuming you're using jQuery to handle the ajax requests:
function ajaxWrapper(settings){
var old_callback = settings.complete;
settings.complete = function(request, status){
if(status == "200"){
// check the request.responseText and add your note if appropriate
}
if(old_callback){
old_callback(request, status);
}
}
jQuery.ajax(settings);
}
And then instead of calling jQuery.ajax() directly, call ajaxWrapper() instead.
An alternate option would be to include the note in your ajax response.

Categories

Resources