jQuery - Django Ajax Post demander question - Stack Overflow

I am working on sending a POST request to Django using Ajax.

Here is my ajax code:

$("#submitdata").click(function(){
values = {
"tmode": tmode,
"fmode": fmode,
"t_cool": t_cool,
"t_heat": t_heat,
"hold": hold
};
var jsonText = JSON.stringify(values);
$.ajax({
    url: "/submitdata/",
    type: 'POST',
    data: jsonText,
    dataType: 'json',
    success:function(data){
        alert("Inside success function");
        alert(data.tmode);
    },
    /*complete:function(){
        console.log('complete');
    },*/
    error:function(){
        alert("error");        }
});       });

Here is my view:

@login_required
def submitvalues(request):
#context = RequestContext(request)
if request.POST:
    jsonvalues = json.loads(request.raw_post_data)
    print json.dumps(jsonvalues)
    #temp = jsonvalues["temp"]
    tmode = jsonvalues['tmode']
    fmode = jsonvalues['fmode']
    t_cool = '65'
    t_heat = '75'
    hold = jsonvalues['hold']
    if jsonvalues.__contains__('t_cool')>=1:
        t_cool = jsonvalues['t_cool']
    if jsonvalues.__contains__('t_heat')>=1:
        t_heat = jsonvalues['t_heat']
    jsonresult = {
                      'tmode':tmode,
                      'fmode':fmode,
                      't_cool':t_cool,
                      't_heat':t_heat,
                      'hold':hold,
                      }
    '''return render_to_response('wifithermostat_3m50/wifithermo3m50.html',
        {'tmode':tmode,'fmode':fmode,'t_cool':t_cool,'t_heat':t_heat,'hold':hold,
         },
        context)'''
    if request.is_ajax()== True:
        return HttpResponse(json.dumps(jsonresult),mimetype='application/json')

I am getting the values in my view. But the response doesn't succeed. I am just trying to get the same data back in essence. But I don't see any success message. Can you guide me as to where I am going wrong?

First of all the alert message from the error section of the ajax function pops up even before the view function is accessed. Also, it never gets to the success part of the ajax call.

I am getting Broken Pipe Error in the runserver console.

Traceback (most recent call last):
File "/usr/lib/python2.7/dist-packages/django/core/servers/basehttp.py", line 284, in  run
self.finish_response()
File "/usr/lib/python2.7/dist-packages/django/core/servers/basehttp.py", line 324, in finish_response
self.write(data)
File "/usr/lib/python2.7/dist-packages/django/core/servers/basehttp.py", line 403, in write
self.send_headers()
File "/usr/lib/python2.7/dist-packages/django/core/servers/basehttp.py", line 467, in send_headers
self.send_preamble()
File "/usr/lib/python2.7/dist-packages/django/core/servers/basehttp.py", line 385, in send_preamble
'Date: %s\r\n' % http_date()
File "/usr/lib/python2.7/socket.py", line 324, in write
self.flush()
File "/usr/lib/python2.7/socket.py", line 303, in flush
self._sock.sendall(view[write_offset:write_offset+buffer_size])
error: [Errno 32] Broken pipe

This ajax call works fine if I don't define it within the .click(function() {}); I am sending POST request with a normal click function. Why can't I do it within the click attribute?

@jerry-meng : It did not work with any trigger event. I am not sure why.

But the solution to my issue was to prevent the default action that happens on pressing the button.

Modified code:

$( "#submitthermostatdata" ).click(function(evt) {
evt.preventDefault();
values = {
        "tmode": tmode,
        "fmode": fmode,
        "t_cool": t_cool,
        "t_heat": t_heat,
        "hold": hold
        };
var jsonText = JSON.stringify(values);
console.log(jsonText);
$.ajax({
      url : '/submitdata3m50/',
      type: 'POST',
      data: jsonText,
      dataType: 'json',
      success : function(data) {
        var testinggg = $.parseJSON(data.tmode);
        alert(testinggg);
        alert("testing");
      },
      error: function(data) {
        alert("something really wrong");
      }
     }); });

I am working on sending a POST request to Django using Ajax.

Here is my ajax code:

$("#submitdata").click(function(){
values = {
"tmode": tmode,
"fmode": fmode,
"t_cool": t_cool,
"t_heat": t_heat,
"hold": hold
};
var jsonText = JSON.stringify(values);
$.ajax({
    url: "/submitdata/",
    type: 'POST',
    data: jsonText,
    dataType: 'json',
    success:function(data){
        alert("Inside success function");
        alert(data.tmode);
    },
    /*complete:function(){
        console.log('complete');
    },*/
    error:function(){
        alert("error");        }
});       });

Here is my view:

@login_required
def submitvalues(request):
#context = RequestContext(request)
if request.POST:
    jsonvalues = json.loads(request.raw_post_data)
    print json.dumps(jsonvalues)
    #temp = jsonvalues["temp"]
    tmode = jsonvalues['tmode']
    fmode = jsonvalues['fmode']
    t_cool = '65'
    t_heat = '75'
    hold = jsonvalues['hold']
    if jsonvalues.__contains__('t_cool')>=1:
        t_cool = jsonvalues['t_cool']
    if jsonvalues.__contains__('t_heat')>=1:
        t_heat = jsonvalues['t_heat']
    jsonresult = {
                      'tmode':tmode,
                      'fmode':fmode,
                      't_cool':t_cool,
                      't_heat':t_heat,
                      'hold':hold,
                      }
    '''return render_to_response('wifithermostat_3m50/wifithermo3m50.html',
        {'tmode':tmode,'fmode':fmode,'t_cool':t_cool,'t_heat':t_heat,'hold':hold,
         },
        context)'''
    if request.is_ajax()== True:
        return HttpResponse(json.dumps(jsonresult),mimetype='application/json')

I am getting the values in my view. But the response doesn't succeed. I am just trying to get the same data back in essence. But I don't see any success message. Can you guide me as to where I am going wrong?

First of all the alert message from the error section of the ajax function pops up even before the view function is accessed. Also, it never gets to the success part of the ajax call.

I am getting Broken Pipe Error in the runserver console.

Traceback (most recent call last):
File "/usr/lib/python2.7/dist-packages/django/core/servers/basehttp.py", line 284, in  run
self.finish_response()
File "/usr/lib/python2.7/dist-packages/django/core/servers/basehttp.py", line 324, in finish_response
self.write(data)
File "/usr/lib/python2.7/dist-packages/django/core/servers/basehttp.py", line 403, in write
self.send_headers()
File "/usr/lib/python2.7/dist-packages/django/core/servers/basehttp.py", line 467, in send_headers
self.send_preamble()
File "/usr/lib/python2.7/dist-packages/django/core/servers/basehttp.py", line 385, in send_preamble
'Date: %s\r\n' % http_date()
File "/usr/lib/python2.7/socket.py", line 324, in write
self.flush()
File "/usr/lib/python2.7/socket.py", line 303, in flush
self._sock.sendall(view[write_offset:write_offset+buffer_size])
error: [Errno 32] Broken pipe

This ajax call works fine if I don't define it within the .click(function() {}); I am sending POST request with a normal click function. Why can't I do it within the click attribute?

@jerry-meng : It did not work with any trigger event. I am not sure why.

But the solution to my issue was to prevent the default action that happens on pressing the button.

Modified code:

$( "#submitthermostatdata" ).click(function(evt) {
evt.preventDefault();
values = {
        "tmode": tmode,
        "fmode": fmode,
        "t_cool": t_cool,
        "t_heat": t_heat,
        "hold": hold
        };
var jsonText = JSON.stringify(values);
console.log(jsonText);
$.ajax({
      url : '/submitdata3m50/',
      type: 'POST',
      data: jsonText,
      dataType: 'json',
      success : function(data) {
        var testinggg = $.parseJSON(data.tmode);
        alert(testinggg);
        alert("testing");
      },
      error: function(data) {
        alert("something really wrong");
      }
     }); });

Source