jQuery - Binding to Ajax Event

  • Prime
  • Professor
  • Professor
  • User avatar
  • Posts: 935
  • Loc: Liverpool

Post 3+ Months Ago

Help :cry: why won't this code work

Code: [ Select ]
jQuery("#container").bind("ajaxSend", function() {
   jQuery(this).hide('slow');
});
  1. jQuery("#container").bind("ajaxSend", function() {
  2.    jQuery(this).hide('slow');
  3. });


when this code will

Code: [ Select ]
jQuery("#container").bind("click", function() {
   jQuery(this).hide('slow');
});
 
  1. jQuery("#container").bind("click", function() {
  2.    jQuery(this).hide('slow');
  3. });
  4.  


I'm struggling to bind to any global ajax event and I have no idea why. I'm developing in RoR.

@Bogey & Joebert - Further to my earlier post I binned-off lowpro, just using jQuery at the moment.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Bind the event to the window object instead of an element.

Code: [ Select ]
#(window).bind("ajaxSend", function() {
jQuery(this).hide('slow');
});
  1. #(window).bind("ajaxSend", function() {
  2. jQuery(this).hide('slow');
  3. });
  • Prime
  • Professor
  • Professor
  • User avatar
  • Posts: 935
  • Loc: Liverpool

Post 3+ Months Ago

Hey Joebert,

Thanks for that :) I figured you'd know if anyone does. Can you elaborate?

The exact scenario I am trying to master is after an Ajax update I am rendering a partial that contains a div that should have a jQuery effect on 'click'. How do I reapply an effect after an Ajax update.

Cheers, Prime ... :D
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

I really can't elaborate, I'm not sure what's happening. All I know is I couldn't get AJAX events to bind to anything other than the window object. I'm guessing because the AJAX events are designed to be global events and events like click are local to an element.

Inside of the callback, where you have "this", you'll need to use the target elements id instead. I missed that when I posted the example.

Code: [ Select ]
$(window).bind("ajaxSend", function() {
   jQuery('#container').hide('slow');
});
  1. $(window).bind("ajaxSend", function() {
  2.    jQuery('#container').hide('slow');
  3. });


// Edit -- fixed typo
  • Prime
  • Professor
  • Professor
  • User avatar
  • Posts: 935
  • Loc: Liverpool

Post 3+ Months Ago

I figured that one although my exact syntax is

1. jQuery(window).bind("ajaxSend", function() {
2. jQuery('#container').hide('slow');
3. });

I'm not missing anything on the hash symbol am I? Not sure why you're using it.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Whoops, typo. that initial hash was supposed to be a $. $ is an alias for jquery()
  • virtualme123
  • Newbie
  • Newbie
  • virtualme123
  • Posts: 6

Post 3+ Months Ago

I'm not sure if this is related to this topic but I'm loading a php file with JQuery and all looks great. However I can't seem to access any elements within that php file once its loaded. I've basically got a selection of elements that I want to add events to etc, so is this because of a binding issue or something entirely different?


Thanks for any help.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Have an example of what you're doing VM ?
  • virtualme123
  • Newbie
  • Newbie
  • virtualme123
  • Posts: 6

Post 3+ Months Ago

Sorry its taken a while to reply but got locked out, think it was Google Chrome as using Firefox and having no problems now ...

Anyway, so my jquery script uses this function:
Code: [ Select ]
$("#mainWindow").load('manager.php'); }

... to load some php that happens to contain some echo'ed out divs like this:
Code: [ Select ]
<div id="mainWindow">
<!-- loaded manager.php content -->
<div id="test">Hello</div>
<!-- end of manager.php content -->
</div>
  1. <div id="mainWindow">
  2. <!-- loaded manager.php content -->
  3. <div id="test">Hello</div>
  4. <!-- end of manager.php content -->
  5. </div>

Now all I'm trying to do in this example is change any properties on this 'test' div, so something like this:
Code: [ Select ]
$("#mainWindow").show(function() {
                 $("#test").hover(function () { alert("Hello!"); });
                 $("#test").css({"backgroundColor":"#FFFFDD"});
             });
  1. $("#mainWindow").show(function() {
  2.                  $("#test").hover(function () { alert("Hello!"); });
  3.                  $("#test").css({"backgroundColor":"#FFFFDD"});
  4.              });

This sort of stuff works if I place the 'test' div inside the 'mainWindow' div and not loaded through the php file. So not sure if you have any ideas as to why this might not be happening when inside the loaded php.


Thanks
  • Prime
  • Professor
  • Professor
  • User avatar
  • Posts: 935
  • Loc: Liverpool

Post 3+ Months Ago

I would hazzard a guess you need to reapply the mainwindow effects after you have loaded the page.

Are these methods within some sort of document.ready method :?:
  • virtualme123
  • Newbie
  • Newbie
  • virtualme123
  • Posts: 6

Post 3+ Months Ago

Yes my mainWindow effects are within a document.ready style function. Is there then a call I should make to reload the document.ready functions?

Was kind of hoping that I could potentially have many divs in one page that could each load individual php files (I suppose as a replacement for iframes), but all controlled with the ease of JQuery. Am I likely to get that flexibility from JQuery?
  • Prime
  • Professor
  • Professor
  • User avatar
  • Posts: 935
  • Loc: Liverpool

Post 3+ Months Ago

one method would be to use AjaxSuccess as follows:

Quote:
START OF DOM READY
jQuery(document).ready(function($) {

jQuery("").ajaxSuccess(function(evt, request, settings){
ApplyChanges()
})

END OF DOM READY
});



function ApplyChanges {
jQuery("#mainWindow").show(function() {
jQuery("#test").hover(function () { alert("Hello!"); });
jQuery("#test").css({"backgroundColor":"#FFFFDD"});
})
)};


You would need to refine this solution because u are applying those changes after every single successful aja request but u should get the idea.

Good luck.

Cheers, Prime ... :D
  • virtualme123
  • Newbie
  • Newbie
  • virtualme123
  • Posts: 6

Post 3+ Months Ago

Thanks for your reply Prime, taken me a while to find time to test this again but found the following:

When using a function outside the ready I had to use the following:
Code: [ Select ]
jQuery.fn.applyChanges = function () {
        $("#mainWindow").show(function() {
        $("#test").css({"backgroundColor":"#FFFFDD"});
    });
};
  1. jQuery.fn.applyChanges = function () {
  2.         $("#mainWindow").show(function() {
  3.         $("#test").css({"backgroundColor":"#FFFFDD"});
  4.     });
  5. };

I then managed to call that code every time I reloaded some script like this:
Code: [ Select ]
$("").applychanges();

Now I'm having some difficulty, which doesn't make sense, when accessing my 'test' element with anything other than a show function.

I've looked at several other ways of accessing inner elements, but what is the best practice way, and why are they not working as I'd expect from within my applyChanges function?
Code: [ Select ]
$("#test").parent("#mainWindow").hover(function () { alert("Hello!"); });
$("#mainWindow").find("#test").css({"backgroundColor":"#FFFFDD"});
  1. $("#test").parent("#mainWindow").hover(function () { alert("Hello!"); });
  2. $("#mainWindow").find("#test").css({"backgroundColor":"#FFFFDD"});


Thanks!
  • virtualme123
  • Newbie
  • Newbie
  • virtualme123
  • Posts: 6

Post 3+ Months Ago

Sorry to be a pain but has anyone had any luck with my last query?


Thanks!
  • virtualme123
  • Newbie
  • Newbie
  • virtualme123
  • Posts: 6

Post 3+ Months Ago

Well latest update is that I have found that I can actually change the properties of elements from within my applyChanges function by using the .find method, but what doesn't get changed is a div or span element properties, they seem to be invisible.


Thanks,

Chris
  • satya-prakash
  • Graduate
  • Graduate
  • User avatar
  • Posts: 134
  • Loc: Bangalore

Post 3+ Months Ago

virtualme123 wrote:
Thanks for your reply Prime, taken me a while to find time to test this again but found the following:

When using a function outside the ready I had to use the following:
Code: [ Select ]
 
jQuery.fn.applyChanges = function () {
        $("#mainWindow").show(function() {
        $("#test").css({"backgroundColor":"#FFFFDD"});
    });
};
 
  1.  
  2. jQuery.fn.applyChanges = function () {
  3.         $("#mainWindow").show(function() {
  4.         $("#test").css({"backgroundColor":"#FFFFDD"});
  5.     });
  6. };
  7.  

I then managed to call that code every time I reloaded some script like this:
Code: [ Select ]
 
$("").applychanges();
 
  1.  
  2. $("").applychanges();
  3.  

Now I'm having some difficulty, which doesn't make sense, when accessing my 'test' element with anything other than a show function.

I've looked at several other ways of accessing inner elements, but what is the best practice way, and why are they not working as I'd expect from within my applyChanges function?
Code: [ Select ]
 
$("#test").parent("#mainWindow").hover(function () { alert("Hello!"); });
$("#mainWindow").find("#test").css({"backgroundColor":"#FFFFDD"});
 
  1.  
  2. $("#test").parent("#mainWindow").hover(function () { alert("Hello!"); });
  3. $("#mainWindow").find("#test").css({"backgroundColor":"#FFFFDD"});
  4.  


Thanks!



Not sure of this!
It will help or not.
I know that when you add any element using 'innerHTML', the added code will not be a part of the DOM element. So may be you need to add the element the DOM way!

Post Information

  • Total Posts in this topic: 16 posts
  • Users browsing this forum: Liamw411 and 74 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.