views:

359

answers:

2

I am using YUI 3.0 io to submit form data with ajax. The form fields are created from a django view (ModelForm). The first time the form loads, I update a field and submit the form using YUI onclick which calls the io callback which runs the django view and returns the ModelForm again with the update data. This works once (saves to database, displays update data on form). After that, it's like the update form fields are not recognized and when I POST again, it does not pick up any new changes.

//Ajax call to Load Member Info
YUI().use("node-base", "io-form","node", function(Y) {
    var formObj = Y.one('#MemberForm')
    var uri = "http://localhost:8000/MemberInfo/{{ member_id }}";
    var cfg = {
        method:'POST',
        form: {
            id: formObj
        }
    }
     function complete(id, o) {
      var id = id; // Transaction ID.
      var data = o.responseText; // Response data.
      document.getElementById('InputDiv').innerHTML = data;//the data is the memberinfo html template w/ data
    };

    function start(transactionid, arguments)
    {
        document.getElementById('InputDiv').innerHTML = "processing...";
    }

    Y.on('io:complete', complete, this);
    Y.on('io:start', start, this);

    var request = Y.io(uri);//run callback on load. don't POST, just load'

    function LoadMemberAjax()
    {
         Y.io(uri, cfg);//callback, POST.
    }
    Y.on("click", LoadMemberAjax, "#btnMemberInfo");
    }
);


#Load Member Info - ajax call
def MemberInfo(request, member_id):
existingMember = get_object_or_404(Member, pk=member_id)
if request.method == "POST":
    if 'userlogin' in request.POST: #we will get username and pwd from login and find person
        NewMember = MemberForm(instance=existingMember)
    else:
        f = MemberForm(request.POST, instance = existingMember)
        if f.is_valid():
            f.save()
            NewMember = MemberForm(instance=existingMember)

else:
    NewMember = MemberForm(instance=existingMember)

return render_to_response("MemberInfo.html", {"Member": NewMember,})

The HTML:

<body>   
  <form id="MemberForm">
      <div id="InputDiv">Loading Your Member Information...One Moment...
      </div>
      <input type="button" id="btnMemberInfo" value="save">
  </form>

The template from Django returned as 'data'

 {% for field in Member %}
 {{ field.label_tag }}
 {{ field }}
 {% endfor %}
A: 

I don't know YUI particularly well, but I imagine what is happening here is that when the AJAX reloads the form, it's also creating a completely new button - which no longer has the onclick event bound to LoadMemberAjax. You'll probably need to rebind it by rerunning Y.on("click", LoadMemberAjax, "#btnMemberInfo"); at the end of the complete function.

Or there might be an equivalent of jQuery's live call you can use to ensure that the binding remains even when the elements have been recreated.

Daniel Roseman
no, this did not help. The button is outside the ajax call. So is the form. thanks.
Robin
A: 

Another thing to be aware of is that if you have the CSRF middleware enabled, it will make duplicate post attempts like this non-functional.

Paul McMillan
It doesn't look like I have that middleware enabled.
Robin
Yeah. Figured I'd throw that out there in case anyone else comes across the problem and is getting tripped up because of it.
Paul McMillan