django handle form submit without returning a response

Question

I've tried everything here, and I must be missing something, as my ajax post to Django isn't returning anything. I've got it down to the bare bones at this point, just trying to get it working and no joy.

My view:

def saveProjectEntry(request):
    form = ProjectEntryUpdateForm(request.POST)

    if form.is_valid():
        msg = json.dumps({'msg':'success'})
        return HttpResponse(msg, mimetype='application/json')
    else:
        msg = json.dumps({'msg':'failed'})
        return HttpResponse(msg, mimetype='application/json')

My url.py entry:

    url(r'^chargeback/savepe/$','chargeback.views.saveProjectEntry'),

My jQuery:

    $('#peUpdateForm').submit(function() {
         $.ajax({
          url:'/chargeback/savepe/',
          data: $("#peUpdateForm").serialize(),
          type: "POST",
          success: function(e) {
              alert("success");
          },
          error: function(e) {
              alert("failed");
          }
        });
         return false;
     });

I also tried the jQuery post method:

$('#peUpdateForm').submit(function(e){
    $.post('/chargeback/savepe/', $('#peUpdateForm').serialize(), function(data){ 
       alert("success");
    });
    e.preventDefault();
});

I'm not getting anything. Not getting any of my alerts. Not getting any errors from the view (if I just navigate to the view directly I get the expected {'msg':'failed'} displayed in the browser, so the json response is fine. The url calls the correct view. The only thing I can think of is my jQuery code is wrong, but I can't figure out where, and there are no errors in the console. I've tested, in the console, the

$('#peUpdateForm').serialize()

and I get the expected value. Pulling my hair out here... Thanks.

EDIT: Adding HTML as my post method isn't even getting called when I place a breakpoint there, so something may be wrong with how my submit is being set up.

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable ui-dialog-buttons" style="outline: 0px; z-index: 1002; position: absolute; height: auto; width: 376px; top: 75px; left: 408px; display: block;" tabindex="-1" role="dialog" aria-labelledby="ui-id-8"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-id-8" class="ui-dialog-title">Project Entry Update</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div>
<div id="addPEForm" style="width: auto; min-height: 0px; height: 365px;" class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0">
    <form method="post" id="peUpdateForm" action="">
    <div style="display:none">
        <input type="hidden" name="csrfmiddlewaretoken" value="wvzwSBl87vC1tbkbdfxsD82GnjtvJCSz"></div>

    <p><label for="id_departmentid">Department:</label>
    <select id="id_departmentid" class="projEntryControl" name="departmentid">
        <option value="" selected="selected">Choose a Department</option>
        <option value="1">ABND</option>
        <option value="2">ATT</option>
        <option value="3">AVI</option>
        <option value="4">CCS</option>
        <option value="5">PBW</option>
    </select></p>
    <p><label for="id_projectid">Project:</label>
    <select id="id_projectid" class="projEntryControl" name="projectid">
         <option value="-1">Choose a Project</option>
         <option value="undefined">Bexar Street</option>
         <option value="undefined">Chalk Hill</option>
         <option value="undefined">Crown Road</option>
    </select>
    </p>
    <p><label for="id_progNumId">Program Number:</label>
    <select id="id_progNumId" class="projEntryControl" name="progNumId">
        <option value="" selected="selected">Choose a Program Number</option>
        <option value="1">31664</option>
        <option value="2">DD-7081</option>
    </select></p>
    <p><label for="id_hoursWorked">Hours Worked:</label>
    <input name="hoursWorked" value="0.0" class="projEntryControl" maxlength="5" type="text" id="id_hoursWorked"></p>
    <p><label for="id_notes">Notes:</label>
    <textarea id="id_notes" rows="10" cols="40" name="notes"></textarea></p>
</form>
</div>

...

Have you checked the Network tab in firebug/chrome inspector? Is the request going to the appropriate URL? What's the response? — msc, Nov 29 '12 at 21:32
I have, and the request isn't going. The post nor the ajax method are getting called, which is why I just posted my HTML, to see if perhaps my submit call is the problem. — Shawn, Nov 29 '12 at 21:35
Have you tried printing some debugging messages from the view? `if request.method=='POST': print request.POST` and check if the request is coming as intended..? Just guessing. — SiddharthaRT, Nov 29 '12 at 21:39
@RaunakAgarwal I left that part off the HTML (it was already really long), but it is a button on the dialog window, so it's outside the form element. — Shawn, Nov 29 '12 at 21:41
How does that work, @Shawn? leave out the contents of the form and just put the form + submit button here, please. — SiddharthaRT, Nov 29 '12 at 21:44
@RaunakAgarwal I thought so too, but [JqueryUI dialog](http://jqueryui.com/dialog/#modal-form) uses the buttons on the dialog to (admittedly, not submit) but to append to the table. I assumed I needed to do the same with my submit. Obviously incorrect? — Shawn, Nov 29 '12 at 21:45
If you want to capture a submit action on a button you would have to keep it inside the form. — Raunak Agarwal, Nov 29 '12 at 21:49
AFAIK, $('#form').submit() is not called in that case. You need to select the button, then do a $('#form').serialize from inside it. — SiddharthaRT, Nov 29 '12 at 21:51
Thanks all. I'll mark this up to the jQueryUI code being misleading (and my lack of experience). If someone wants to officially answer, I'll accept. — Shawn, Nov 29 '12 at 21:51
I would again suggest you to use serializeArray() instead of serialize since, the prior would create an array object which is more preferable way of submitting post data — Raunak Agarwal, Nov 29 '12 at 21:53

score 1 · Accepted Answer · answered Nov 29 '12 at 21:56

1

AFAIK, Here's the way to do it right, if you want to keep the button outside:

 $('#button').on('click', function(){
      $.ajax({
             data: $('#form').serialize(),
             ...});
 });

This because `$('#form').submit() gets called only if you keep the submit button inside the form tags.

answered Nov 29 '12 at 21:56

SiddharthaRT

2,217
4
20
28

1

Especially useful for helping me understand that you can use the post or ajax call without actually doing a submit. This will be the approach I use. Thanks! – Shawn Nov 29 '12 at 21:59

django handle form submit without returning a response

1 Answers1