CODEWITHSUNDEEP
iosjquerycordova
all_by_grace
all_by_grace

Reputation: 2345

Jquery ajax request on IOS using Phonegap - Ajax not working

I have a simple html login form, deployed on Xcode using phonegap framework.

When the submitLogin button is clicked, I then sent the login credentials using ajax request to verify the login. This is my javascript function to handle the login: 

function submitLoginForm (login_id, login_pass){
    //here we need to communicate with the php files in the server
    console.log ("debug 1 ");
    $.ajax({
        type: "POST",
        url: "http://192.168.1.9/serverapp/loginHandler.php",
        data: "login_id=" + login_id + "&login_password=" + login_pass,
        success: function(loginStatus){
              navigator.notification.alert ("login request successfully sent");
              console.log ("debug 2");
              if (loginStatus == "success"){
                console.log ("debug 3 ");
                location.href = "main.html";
              }
              else{
                console.log ("debug 4 ");
                location.href="index.html?errcode=1";
              }

        }
    });

   console.log ("debug 5 ");
}

After submitting the login form, I could see that the console only printed "debug 1" message. What could be wrong in this case? If the ajax request fails, it is still supposed to print the "debug 5" message, but it did not print anything and just skip the whole thing, except the first debug message.

I could access the php url from my browser, so I am sure that the problem is not with the php code. I have been trying to spend several hours with no result. Do you have any similar problem with Phonegap IOS framework, and how did you fix it?

Upvotes: 3

Views: 4928

Answers (1)

all_by_grace
all_by_grace

Reputation: 2345

Problem solved.

I was using an external jquery file from http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

And it appeared that the external jquery url is blocked by the ios simulator, so I have to put that url in the whitelist.

Steps:

  • In your XCode phonegap project, browse into Resources folder.
  • Go to Supporting Files directory, and edit the PhoneGap.plist file.
  • In the External Host list, add any external URLs that you want to access (including the external jquery url, and any other url that you would use in your ajax request).

I hope this will be useful for other developers who encounter the same issue as mine.

Upvotes: 9

Related Questions