Form data posting from jquery to Google App Engine does not work

Question

I am working on a simple jquery app and want i want to do is post a username and name to Google App Engine from a form.But nothing happens when i click the addEmpBtn in my form.

This is the form for accepting the data and the submit button

<form id="post" action="http://localhost:8070/addNewEmployee" method="post">
        <input id="username" name="user" placeholder="Username" type="text" size="30"/>
        <input id="name" name="name" placeholder="Name" type="text" size="30"/>
        <a href="#" id="addEmpBtn" data-theme="b" data-role="button" data-inline="true">Register</a>
    </form>

My YAML file looks like this

application: get-post-test
version: 1
runtime: python27
api_version: 1
threadsafe: true

handlers:
  - url: /html
    static_dir: html

  - url: /js
    static_dir: js

  - url: /png
    static_dir: imgs

  - url: /.*
    script: main.app

I am writing the jQuery-Mobile code using Webstorm and my project directory structure looks like this

enter image description here

Finally, this is what the staff_game.js file looks like

URL = "http://localhost:8070/addNewEmployee";

$(document).ready( function() {
  $("#addEmpBtn").bind('click', function(event){
    addNewEmployee();
     event.preventDefault();
});
});


function doPostRequest(postData) {
  $.ajax({
    type: "POST",
    url: URL,
    data: postData,
    dataType: "json"
  }).done(function(data, textStatus, jqXHR){ 
        // This clears out the message sent.
        $("#username").val('');
        $("#name").val('');
       setTimeout(doGetRequest, 1000);
    }).always(function(data, textStatus){

  });
   }

 function addNewEmployee() {
//Encode the user-id and message as a single JSON
// object, in name:value pairs...
var struser=$("#username").val(),
    strmessage=$("#name").val(),
    postData = {username: struser, name: strmessage};
// Now use this data in a POST operation...

    doPostRequest(postData);

}

Since there aren't any error messages to show, i can't tell what's wrong.I am not even sure i have configured the YAML file correctly. Because when i try something like

localhost:8070/js/staff_game.js nothing happens.But i read somewhere that this is supposed to return something in javascript(?). Do i need to declare a manifest first? if so how? What am i doing wrong?

Looks to me like you're at least missing a parenthesis after `.always(function(data, textStatus){}` in the `doPostRequest` function. If your js has a syntax error, then none of your event handlers will be bound and your button is just a link to `#` which does effectively nothing. — mgilson, May 08 '14 at 06:03
I have corrected that bit,i lost the parenthesis while i was editing the question — Ojonugwa Jude Ochalifu, May 08 '14 at 06:46
To debug your javascript sending function, can you add success and complete methode in your ajax to see if one of them respond. — olituks, May 08 '14 at 07:27
In your ajax call. See this post: http://stackoverflow.com/questions/15925522/is-there-any-analog-to-a-finally-in-jquery-ajax-calls — olituks, May 08 '14 at 08:12
Why are you a) hard-coding the full URL and b) using the non-default :8070 port? Are you specifically starting the devappserver using 8070? Even if you are, you should not hard-code that, but just use a relative path (`URL = "/addNewEmployee";`) etc. — Daniel Roseman, May 08 '14 at 08:27
might be an idea to create a self-contained example that works (a simple POST to a handler) then extend that example to the functionality you are after. The webapp2 tutorial might be the place to start: http://webapp-improved.appspot.com/guide/request.html#post-data — Paul Collingwood, May 08 '14 at 10:57
@PaulCollingwood i already have an example that works.The pyhton code works fine if i use a form to post the data,and it is saved in the datastore.That's why am confused as to why it doesn't work with jQuery — Ojonugwa Jude Ochalifu, May 08 '14 at 13:50
I see. The inclusion of the server side handling code was what prompted me to suggest that. If you know that works and the problem lies in the jquery side of things then I'd remove that additional code as it's probably putting people of working out the issues (i.e. someone elses' logic). Can't help with the JQ I'm afraid, using Dart these days ;) — Paul Collingwood, May 08 '14 at 14:03
Thanks Paul.I am certain the problem is with jquery side.I am running a test now by placing an alert trigger before the call to `addNewEmployee()` but it doesn't work.That means my button doesn't even work in the first place. — Ojonugwa Jude Ochalifu, May 08 '14 at 14:07
The network tab on the browser dev-tools can help debug such issues - i.e. what your form is sending and what your jquery sends. In this case you'd have noticed no traffic when the button was pressed. CTRL+SHIFT+i — Paul Collingwood, May 08 '14 at 14:09
Are you saying that when you point your browser to localhost:8070/js/staff_game.js, you get no response? Where is your jquery.js file? Also, you have no url handler for /addNewEmployee, so it is being handled by the default handler /.* — GAEfan, May 08 '14 at 15:46
Yes, i get no response when i point my broswer to `localhost:8070/js/staff_game.js`. Do i need a `jquery.js` file? As you can see from the image i posted,that's my project directory structure. — Ojonugwa Jude Ochalifu, May 08 '14 at 18:05
Yes, you need a jquery.js file. You can download them at http://jquery.com/download/ . Without that, your calls to $(...) will throw an error. Check the javascript error console in your browser's dev tools, and you will probably see the errors. Put the jquery.js file in your js directory, and remember to include it in your html template. — GAEfan, May 08 '14 at 18:32
Okay.One last stupid question,which one is it? there are a ton of download links. — Ojonugwa Jude Ochalifu, May 08 '14 at 18:37
I would use 1.11. 2.x ditched IE 6,7,8 support, so may not give expected results. — GAEfan, May 08 '14 at 21:34

Form data posting from jquery to Google App Engine does not work

0 Answers0