Help with disorganized ajax calls + django

Question

I'm having some trouble trying to organize a bunch of ajax calls I have on my index page of a record submission application. This is what I'm trying to do:

1. I have a list on my /index page that hold a list of items I have in a database. This list is generated by django when I send an ajax call to /show_list and then load it into the on the /index page

2. I have a fancy modal window that pops up on the same /index page in order to add items to the database. This form, which is programmed in the /index page, gathers user input and sends it off to /add_item to load it into the database.

3. Within this list that is described in the /show_list template, I have edit functions to alter each individual record, which fill in the above form, so the user can easily edit existing information. But now, I have /show_list code reaching into /index to alter the form information. The edited information is passed back to /add_item (but is actually editing it), and then /index calls for /show_list to refresh itself.

I can see that this is incredibly disorganized and annoying to keep track of. I end up with a ton of code in the $.ajax{success: function(){ ... } } section, which doesn't seem right to me.

Is there a better way to arrange this sort of behavior?

Answer 1

First of all, it seems like it is unnecessary to load the list using AJAX, on page load. You should just load that data in your view and pass it along to the template, unless there is a reason you're not telling to use AJAX.

As for the edit function, it's pretty much a big waste to refresh the entire list when an item is being edited. What you should do instead it to edit the list item instead. jQuery has some functions to make that an easy deal. Since the AJAX is probably attached to the element already with a link or something, it should be quite simple to target the correct element.