Jquery ajax post request not working

Question

I have a simple form submission with ajax, but it keeps giving me an error. All the error says is "error". No code, no description. No nothing, when I alert it when it fails.

Javascript with jQuery:

$(document).ready(function(){

        $(".post-input").submit(function(){
            var postcontent = $(".post-form").val();

            if (postcontent == ""){
                return false;
            }

            $(".post-form").attr("disabled", "disabled");

            $.ajax({
                url: '/post',
                type: 'POST',
                data: {"post-form": postcontent},
                dataType: json,
                success: function(response, textStatus, jqXHR) {
                    alert("Yay!");
                },
                error: function(jqXHR, textStatus, errorThrown){
                    alert(textStatus, errorThrown);
                }
            });
        });
    });

HTML:

<form class="post-input" action="" method="post" accept-charset="utf-8">
                <textarea class="post-form" name="post-form" rows="1" cols="10" onFocus="this.value='';return false;">What are you thinking about...</textarea>
                <p><input class="post-submit" type="submit" name = "post.submitted" value="Post"></p>
            </form>

and if there are no problems there, then the server-side (pyramid):

def post(request):
    session = Session()
    user = authenticated_userid(request)
    postContent = request.POST['post-form']
    if not postContent == '':
        session.add(Activity(user.user_id, 0, postContent, None, None))
        return {}
    return HTTPNotFound()

UPDATE: After some more debugging with firebug, I discovered that the post request body contains only post.submitted=Post, instead of the intended result of {"post-form": postcontent}.

Is it a javascript error (client), server error or python error? — Hamish, Jul 21 '12 at 21:47
@Hamish through my debugging, I'm assuming it's a client error. — Wiz, Jul 21 '12 at 22:12

TheCarver · Accepted Answer · 2012-07-21T22:26:41.807

16

According to jQuery documentation, you must declare the data type:

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Also, looking at your server-side code, you don't actually want to post JSON formatted data. This {"post-form":postcontent} is JSON formatted data. What you actually want to do is send TEXT or HTML. Seeming as it's form data, I would guess at TEXT.

Try this:

$.ajax({
   url: '/post',
   type: 'POST',
   data: 'post-form='+postcontent,
   dataType: 'text',
   success: function(response, textStatus, jqXHR) {
     alert("Yay!");
   },
   error: function(jqXHR, textStatus, errorThrown){
     alert(textStatus, errorThrown);
  }
});

edited Jul 21 '12 at 22:26

answered Jul 21 '12 at 21:54

TheCarver

19,391
25
99
149

2

sadly, this didn't work, but after some more debugging with firebug, I discovered that the post body is actually post. submitted = Post, instead of the intended post-form = postcontent. – Wiz Jul 21 '12 at 22:08
Do you actually want to post JSON or just regular form data? – TheCarver Jul 21 '12 at 22:14
@PaparazzoKid there is still an error. Something I just noticed, the page is still reloading, so does that mean its not really doing an ajax request? I thought a page wasn't supposed to reload if it's only an ajax request. – Wiz Jul 21 '12 at 22:26
@Wiz: I'm no expert but I think because you have FORM ACTION="" METHOD="POST" you are submitting the form back to the current page. Try removing these from the form element. – TheCarver Jul 21 '12 at 22:34
@PaparazzoKid the alert message that is returned from the ajax call is just "error". There are no javascript errors in the console. It passes through jslint fine. The only thing I have noticed is that the request body is not right, and that the post request is not sent to the right url, as it is just sent to the url the page is at. i.e. the post is sent to www.example.com, instead of www.example.com/post – Wiz Jul 21 '12 at 22:36
1

@Wiz: You can actually do away with the whole FORM. Leave the textarea and button and change $(".post-input").submit( to $(".post-submit").click(function(){ – TheCarver Jul 21 '12 at 22:36
1

@Wiz: Only other things I can think of are using ***CACHE:FALSE*** in the AJAX caller, make sure there are no bugs on your server-side as that will throw an error (but should be a detailed error, not 'error') and also try adding the full URL to the page you are calling. – TheCarver Jul 21 '12 at 22:44
@PaparazzoKid ok I've determined that its server side, and I threw away the whole form thing as you said. Now I just have to solve the server side, but thanks for fixing the client! – Wiz Jul 21 '12 at 22:46
You can try changing the submit button to a regular button. It does look as if you are submitting the form **AND** submitting an AJAX call – TheCarver Jul 21 '12 at 22:46
yea that is what I have changed it to. – Wiz Jul 21 '12 at 22:47
1

@Wiz: Glad I could assist. Good luck with your project. – TheCarver Jul 21 '12 at 23:00
according to the api documentation, datatype isn't even for when you are sending the data. Datatype specified what kind of data you are expecting back FROM THE SERVER. So this would not have worked to begin with – OzzyTheGiant Aug 22 '16 at 15:40

Besnik · Answer 2 · 2022-09-15T21:00:45.633

3

Since you are posting JSON-data you have to declare the dataType "JSON":

$.ajax({
  url: '/post',
  type: 'POST',
  dataType: "json",
  data: {"post-form": postcontent},
  success: function(response, textStatus, jqXHR) {
    alert("Yay!");
  },
  error: function(jqXHR, textStatus, errorThrown){
    alert(textStatus, errorThrown);
  }
});

edited Sep 15 '22 at 21:00

answered Jul 21 '12 at 21:54

Besnik

6,469
1
31
33

Missed ```});``` at the end. – Jose Luis Landivar S Sep 14 '22 at 17:16

score 1 · Answer 3 · edited Feb 07 '20 at 06:07

1

I think the problem is that the data that you are passing is not properly written.

Try to change this:

data: {"post-form": postcontent},

To this:

data: 'post-form='+ $('.post-form').val(),

edited Feb 07 '20 at 06:07

MeSo2

450
1
7
18

answered Jul 21 '12 at 21:49

Johndave Decano

2,101
2
16
16

Jquery ajax post request not working

3 Answers3

Linked