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>

…

Answer 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.