Question

So I’m building an application using Phone Gap and jQuery mobile.

When using ajax to get a json response from a whitelisted server I am getting an error response. Nothing is showing in console however. The weird thing is that when testing the app within a web browser it works fine, it’s only when I launch to my iphone device that it throws a strop.

It is worth saying now that the site I’m hosting my php scripts on is white listed within Phone Gap. I am using * in the array (just in case this makes a difference).
I have worked out a jsonp workaround for this but don’t want to use it – I feel if it’s working in browsers it must be possible on the device. I’m hoping it’s a simple fix…

Here is my simple php script just echoing a json string.

<?php
header('Access-Control-Allow-Origin: *');
$arr = array('a' => 1, 'b' => 2);
echo json_encode($arr);
?>

Here is the JS

    $('#registerUser').submit(function() {
          $.ajax({
                 url: 'http://www.mydomain.co.uk/path/register/add_user.php',
                 type: 'post',
                 dataType: 'json',
                 crossDomain : true,
                 timeout: 5000,
                 success: function(msg){
                    alert(msg.a);
                 },
                 error: function(){
                    alert('There was an error loading the data.');
                 }
                 });
          });
    });

edit: I also have this js on the page…it’s recommended on the jquery mobile docs to use this when using Phone Gap

        <script>
        $( document ).on( "mobileinit", function() {

            $.mobile.allowCrossDomainPages = true;
            $.support.cors = true;
        });

        </script>

And the form – I don’t think this is necessary…

           <form id='registerUser' action="" method="POST">
                <div data-role="fieldcontain">
                    <label for="name">Name:</label>
                    <input type="text" name="name" id="name" value=""  />
                    <label for="name">Email:</label>
                    <input type="text" name="email" id="email" value=""  />
                    <label for="name">Password:</label>
                    <input type="password" name="password1" id="password1" value=""  />
                    <label for="name">Re-enter password:</label>
                    <input type="password" name="password2" id="password2" value=""  />
                    <br>
                    <button type="submit" aria-disabled="false">Submit</button>
                </div>
            </form>

Thanks for the help in advance!

Answer 1

Okay so it turns out there wasn’t an issue with the code. It seemed that the app was cacheing the error result or something. I killed the app and relaunched it and all works fine now. From reading around it seems iOS6 safari caches POST which is different to previous versions.

I have added this in my ajax call to prevent caching the POST.

 headers: { "cache-control": "no-cache" }

I hope this helps someone else as it has been a pain!

Thanks for the replies