Ajax replaces a bunch of HTML, how to update the associated jQuery actions like Drag And Drop?

views:

answers:

Ajax replaces a bunch of HTML, how to update the associated jQuery actions like Drag And Drop?

So I've finally figured out a system for refreshing portions of the screen using Ajax, Taconite, and jQuery within Django, sortof like Ruby on Rails partials.

I was pleased, but unfortunately, the code associated with clicking and drag and dropping is not executing.

I'm replacing the html inside divs.

How can I keep my code modular (separate pieces of content in refreshable divs), yet make sure my jQuery draggables, droppables, clickables, hoverables, etc get reactivated?

Thanks!

Update

I setup a $(document).ready(callasetupfunction) [as recommended below] and it seems to be getting called after each AJAX call. Is that the expected behavior for .ready?

I've also noticed that i can bind multiple functions to the $(document).ready(). So I can do that (in other words it's a lot better than setting the onload huh?)

Without seeing your code, the only advice I can think of is to pull the portions of your code that call .draggable, etc into a function (probably one that takes a selector), and add that function as a callback after your ajax call completes.

If that doesn't make sense, or is not doable for some reason, and you can put up some working example code that demonstrates the problem, I or someone else can help you find a solution.

Edit: It looks like you might need to stick the call to the above javascript function in a script tag in your response, if you're set on using taconite.

jeremiahd 2010-07-29 01:25:06

Thanks! Yes, I was thinking I'd have to stuff the event handlers into a function call to re-establish them. I was doing brute force but am trying to carefully extract the handlers into more global ones so that it's there could be one controller which fires off which areas to reestablish listening. I found Taconite to be a pretty handy way of controlling the screen but it's not very DRY unless you carefully planned out everything. What is an alternative to using Taconite?

iJames 2010-07-29 06:33:10

To be honest, I would probably just be doing the refreshing with jQuery's .ajax method. I don't know your use case -- it might not be appropriate for you. I'm not a huge fan of generated javascript though -- I try to keep all my JS logic client side. YMMV.

jeremiahd 2010-07-29 11:36:38

Hey! Your initial suggestion to put everything into a callable function worked! I can now do repetitive Ajax calls and my objects remain responsive which is very cool. What I've done with Taconite is created a single taconite.xml Django template. With it, I test whether or not I'm replacing each different section of a page. I use the <replaceContent>. Works pretty cleanly. Now I'll add in a javascript call for each section and it should work as long as I can chain all the functions that need to be called! Thanks again!

iJames 2010-07-30 08:35:33

No problem! (You should accept my answer then! :P )

jeremiahd 2010-07-30 10:52:50

I don't seem to be able to accept answers at this point. My score is only a 6? I'm trying to get it up there. I also can't raise or lower a score...?But... Strangely, the fix has vanished! It was working repetitively and everything but now, I can confirm that after the HTML has finished replacing the content, the listener setup function gets called, but nothing happens. I'm going to have to whittle this down to a very small case but still the debugging to determine if a particular object has been set to draggable is pretty difficult!

iJames 2010-08-03 19:44:00

jeremiahd: So the generated javascript you're talking about is what Taconite does with the XML it receives? The only thing I'm really using Taconite for is to replace the content of a DIV here and there.

iJames 2010-08-03 19:50:49

Another weird note. I have discovered that apparently by using $(document).ready(setupmydraggablefunction) it is being called after the ajax call finishes! Meaning I might not need it?!? But in any event once the content is replaced, it is no longer getting the listeners... Hmm.

iJames 2010-08-03 19:53:29

@iJames: I'm not really familiar with taconite. I assumed you were generating JS server-side. Taconite might do that. If the function is getting called, but nothing is happening, it's possible that you just have a typo that is stopping the function from running. Stick console.log statements in there (assuming you're using firebug), until you figure it out. It can take a while sometimes, debugging JS can be a bit unintuitive :(

jeremiahd 2010-08-04 13:30:46

@jeremiahd, actually taconite is client side. It takes XML generated on the server, and turns it into javascript. That way you have a uniform way of sending info to the client. Taconite built on jquery listens for all ajax responses and acts if the xml starts with <taconite> while not stopping the rest of the event propagation. So actually it's avoiding server side javascript. I've got another place where that's happening though... Google Checkout...

iJames 2010-08-06 04:19:57

Oh, huh, looks like it is. I thought it was server-side for some reason. That's interesting, although I'm having trouble figuring out why you'd want to use it -- it seems like a really rough abstraction over things that are fairly easy to do in jQuery already. But hey, glad it's working for you.

jeremiahd 2010-08-06 16:36:16

ansaurus

tags:

views:

answers:

Ajax replaces a bunch of HTML, how to update the associated jQuery actions like Drag And Drop?

related questions