HTTP Digest Own Form JQuery Mobile

Question

I am trying to replace the "Authentication Required" box that appears with authentication with a custom form for a username and password in JQuery Mobile.I am currently using HTTP Digest that I found from a tutorial (http://www.php.net/manual/en/features.http-auth.php). I am using AJAX with JQuery mobile to load up a PHP resource that logs in to the system and have got it half working. What I've tried so far is:

url: 'http://username:password@domain/resource/',

and

$.ajax({
    url: 'http://url/resource/',
    username: "username",
    password: "password",
    contentType: "text",
    dataType: 'json',
    success: function(data)
    {
     alert("Success");
    },
    error: function (response) 
    {
    alert("Fail");
    }
      });

These both work when I am viewing the website on my desktop however when I view it on a smartphone (tried on iPhone and S4) it will instead show the default "Authentication Required" box and not take any of the details I provide in my own custom form. I wanted to know what the problem could be as I am pulling my hair out over this.

Thanks