Ajax Call Not Working on PhoneGap

Question

For some reason, the $.ajax() is not getting called. It is detecting the $("#login").submit() function because I did have alerts in there and it called it.

I am using http://build.phonegap.com to build the files instead of me building them.

I see this popping up a lot. But, none of the solutions out there helped me out. I have this code:

signin.js:

$(window).load(function() {


$('#login').submit(function(e){
    e.preventDefault();
    obj = $(this);
    un = $("input[name='user']").val();
    pass = $("input[name='pass']").val();
    $.ajax({
        url: https+"getUserDetails",
        data: {
            username: un,
            password: pass
        },
        dataType: "jsonp",
        crossDomain: true,
        type: "POST",
        jsonpCallback: "user",
        success: function(response, textStatus, jqXHR){
            if(response.exists){
                alert(response.access_token);
                window.localStorage.setItem("user", JSON.stringify({"name": response.name, "id": response.id, "token":response.access_token}, null));
                runController();
            }
            else{
                $("#er").show();
            }
        }
    });
    return false;
});

});

config.js:

addr = "domain.com"
api = "/api/v1/"
http = "http://"+addr+api
https = "https://"+addr+api

config.xml:

....
<access origin="*" subdomains="true" />

<feature name="http://api.phonegap.com/1.0/device" />
<feature name="http://api.phonegap.com/1.0/file" />
<feature name="http://api.phonegap.com/1.0/network" />

<preference name="phonegap-version" value="2.1.0" />
....

index.html:

<!DOCTYPE html>
<html>
<head>
    ....
    <title>Sign In</title>
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/controller.js"></script>
    <script type="text/javascript" src="cordova-2.2.0.js"></script>
    <script type="text/javascript" src="js/signin.js"></script>
    ....
</head>
<body>
    ....
    <form id="login" action="#">
        <h2 class="form-signin-heading">Please sign in</h2>
        <input type="text" class="input-block-level" placeholder="Email address" name="user">
        <input type="password" class="input-block-level" placeholder="Password" name="pass">
        <label class="checkbox">
          <input type="checkbox" value="remember-me"> Remember me
        </label>
        <button class="btn btn-large btn-primary" type="submit">Sign in</button>
      </form>
     ....       
    </body>
 </html>

UPDATE 1

Here is what the server logs show:

Started POST "/api/v1/getUserDetails" for .... at 2012-11-29 20:38:22 -0800
Processing by Api::V1::ApiController#user_details as JSON
Parameters: {"username"=>"user", "password"=>"[FILTERED]"}
WARNING: Can't verify CSRF token authenticity
Completed 406 Not Acceptable in 15ms (ActiveRecord: 2.9ms)

UPDATE 2

I disabled CSRF tokens under my API controller since it is not needed and here is what my Server logs show when doing an ajax call under phonegap.

Started POST "/api/v1/getUserDetails" for .... at 2012-11-30 11:38:26 -0800
Processing by Api::V1::ApiController#user_details as JSON
Parameters: {"username"=>"user", "password"=>"[FILTERED]"}
Completed 406 Not Acceptable in 27ms (ActiveRecord: 0.4ms)

Still getting the 406 error. What is the next thing I should try?

Do you have any server side logs that show that the request is never makes it there? Could also add an error function to see if it gets calls but it didn't get back a 200 response. — Nick Roth, Nov 30 '12 at 02:37
agree with above. add an error method to the ajax function. also, make sure the callback method actually exists on the server. — chrisvillanueva, Nov 30 '12 at 03:50
So it is calling the ajax function, but I am getting error 406 back. When I did did tests on a local machine, it works. But, not production server. Why? — Scott Deutsch, Nov 30 '12 at 04:42
maybe this will help you get to you solution: http://stackoverflow.com/questions/7203304/warning-cant-verify-csrf-token-authenticity-rails — chrisvillanueva, Nov 30 '12 at 11:04
The problem is not the CSRF token. I have another project using the api and it works just fine and has the same problem with the CSRF token. It has to do with the 406 error. — Scott Deutsch, Nov 30 '12 at 19:31
So, just incase, I disabled the CSRF tokens under my API controller since that is not needed. — Scott Deutsch, Nov 30 '12 at 19:37

score 0 · Answer 1 · answered Nov 30 '12 at 19:51

0

Now that we see the root of the problem, you'll have to debug the 406. Here is a couple of links that explains what a 406 means.

http://www.checkupdown.com/status/E406.html

http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

Essentially you will need to make sure that your HTTP request is sending along headers stating that the client (your app) will accept a response formatted in a way that the server can serve back. Getting the client and server to agree on the format may require a client side or server side change. I don't know anything about the server you're using but you can modify the Accepts headers of your ajax request through jquery as mentioned here

http://api.jquery.com/jQuery.ajaxSetup/

answered Nov 30 '12 at 19:51

Nick Roth

3,057
2
15
15

What do you suggest to put in the ajaxSetup? The reason why I say that is because when running the ajax commands under Chrome or whatever, it works just fine and does what it is supposed to do. – Scott Deutsch Nov 30 '12 at 20:02
Are you testing your app in Chrome or on an emulator/simulator or device? Chrome maybe creating the request properly but that doesn't seem to be the case where ever it is you're seeing this error. As to what will need to go into ajaxSetup will depend on what your request is currently sending along for the Accept headers and what the server is willing serve back. – Nick Roth Nov 30 '12 at 20:10
I am testing my app in Chrome and a real device. – Scott Deutsch Nov 30 '12 at 22:02

score 0 · Accepted Answer · answered Nov 30 '12 at 23:02

It was on my Ruby on Rails side that was causing this error. I forgot that because this is a mobile device, I modify the format to mobile. What I had to do to solve this issue was in the api controller do this:

skip_before_filter :prepare_for_mobile

That solved my issue.

Ajax Call Not Working on PhoneGap

2 Answers2