Form loses ability to send POST requests after 2 ajax updates

Question

I have an included object's form:

<form method="post" class="object_form" id="event-core-form" action="{% url save_event_core_data event.id %}" enctype="multipart/form-data">
    {{ form.as_p }}
    <p>
        <input class="object-submit" id="object-data-save" type="submit" value="Save data">
    </p>
</form>

After hitting 'submit' button I'm running this script, which submits my form via ajax, updates data and should return updated form that will be inserted back in it's place:

$("#object-data-save").livequery("click", function(e) {
    e.preventDefault();
    $(this).parents("form:first").ajaxSubmit({
        data: {"action": action},
        "success": function(data) {
            data = JSON.parse(data);
            $("#core-data").html(data["html"]);
            $("#message").show();
            $("#message").fadeIn(400).html('<span>'+data["message"]+'</span>');
            setTimeout(function(){
                $("#message").fadeOut("slow", function () {
                    $("#message").hide();
                });

            }, 1500);                
        }
    });
    return false;
});

and this runs the following function :

def event_core_data(request, event_id):
    template_name="management/core_event.html"    
    event = Event.objects.get(pk=event_id)
    form = EventForm()

    if request.method == "POST":
        form = EventForm(instance=event, data=request.POST)
        message = _("Error saving data")
        if form.is_valid():
            form.save()
            message = _(u"Data saved.")

        html =  render_to_string(template_name, RequestContext(request, {
            "form" : form,
            "event" : event,
        }))

        result = simplejson.dumps({
            "html" : html,
            "message" : message,
        }, cls = LazyEncoder)

        result = HttpResponse(result)
        logging.debug(result)
    else:
        form = EventForm(instance=event)
        result = ""
        try:
            result = render_to_string(template_name, RequestContext(request, {
                "form" : form,
                "event" : event,
            }))
        except:
            pass

    return result

After saving it once everything works as expected. But after third update my form is not inserted in the parent template. Instead I'm redirected to the edit function's url and the form is rendered as a raw html. Also, I've noticed in firebug, that when I'm being redirected - no POST is sent and a dummy 'alert' in my javascript is not fired. This is the function displaying initial state (if it's of any help):

def manage_event(request, event_id,):
    template_name = 'management/edit_event.html'

    try:
        event = Event.objects.get(pk=event_id)
    except DoesNotExist:
        url = reverse("manage_events")
        return HttpResponseRedirect(url)

    return render_to_response(template_name, RequestContext(request, {
        "core_data" : event_core_data(request, event_id),
        "event" : event,
    }))

---

EDIT

Here is a test link to this project, where you can see what's going on. 'event_core_data' returns the request.POST to console upon successfull update.

http://ntt.vipserv.org/manage/events/2

I'm also wondering why my date picker widgets disappear after submission. Are those things somehow connected together ?

---

EDIT 2

I've already tried using .post or .ajax instead of .ajaxSubmit but without any luck.

Answer 1

First of all, you're doing something slightly weird. You use a jQuery-plugin which is supposed to handle form submission over ajax and repopulate the fields. Still, on success, you replace all the HTML of your form with HTML from the server, negating its work.

This breaks your calendar/time widgets, as you initialize the widgets on page load, telling them to act on some page elements, which you later replace.

But this doesn't by itself break the form submission.

Firstly, you don't need a plugin for attaching events "live" if you stop replacing the form HTML. Secondly, you don't really need a plugin for that anyway as it seems the built-in live() method in jQuery should do the job (that is, if you actually do need this functionality). Thirdly, if you use plugins and they don't seem to be working properly, update to the latest version. The version you're using doesn't support the html() method in jQuery.

The livequery-plugin does its magic by overriding any jQuery-methods which might update the DOM. So when the programmer calls, f.ex, append(), it intercepts the call, calls append() for you, and then checks the document for new or disappeared elements matching your provided selector. The version you're using is not aware of html() and therefore does not intercept it.

So it works the first time as you initiate a DOM-check on page load. When that result is returned, the event is actually attached to the new submit-button because the calls to html() to set the new form and completion-message internally calls intercepted methods. Therefore, the second submission works as desired. But when the second call comes back, a jQuery cache is used internally, not calling any intercepted methods. So the event doesn't get attached to the submit-button, making it act as a regular form submission button.

To fix, stop using live-attaching for event-listening if there's not a non-apparent need for it. If there is, use the built in one or at least update your livequery plugin. Also, don't replace the whole form HTML. Again, if there's a non-apparent reason, re-initialize you calendar widget each time after setting the HTML.