locked
PhoneGap apps using the new HTML client for Azure Mobile Services is NOT working..... RRS feed

  • Question

  • Hi

    I just get known to this new release by microsoft for supporting html/ phonegap to use Azure Mobil services as a backend. The Service is Working fine when i run the  starter project downloaded from azure and run at http://localhost:8000 as they have described. But when i run the same starter project sample code in my cordova/phonegap app it wont work. After alot og figthing and debuging i stucked finding out why it wont work when i run it from phonegap mobile app. I put try / catch and i get the error saying : WindowsAzure.MobileServiceClient is undefined....

    maybe i have done something wrong...?!

    So any one having clue or could help me thrue this, i will appreciated ;)

    Here is my script:

    function onDeviceReady() {

        try {
            var MobileServiceClient = WindowsAzure.MobileServiceClient,
                client = new MobileServiceClient('', ''),
                todoItemTable = client.getTable('todoitem');
            navigator.notification.alert('uhhuuu!!!');
        }
        catch (e) {
            navigator.notification.alert('Error: ' + err.code);
        }

    }

      
    • Edited by gonadn Saturday, March 23, 2013 10:25 PM
    Saturday, March 23, 2013 10:22 PM

Answers

  • The new MobileServices.Web-1.0.0.js client library does work with PhoneGap 2.3+ and IE8+. However, we haven’t yet published any documentation about how to work with PhoneGap, so we understand it will not be clear right now how to get started!

    Currently, the downloadable quickstart project is intended only for browser apps, not for PhoneGap apps. However, it is possible to tweak it to make it work in PhoneGap as follows:

    1. Add the following to your page’s <head> tag: <meta name='viewport' content='width=device-width' />
    2. Change the <script> tag that references jQuery to specify an explicit protocol in the URL, i.e., change this line:

    <script src='//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js'></script>

    .. to this:

    <script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js'></script>

    1. Add a script tag that references cordova-x.x.x.js (for example, <script src='cordova-2.5.0.js'></script> if you are using Cordova 2.5.0).
    2. If you are targeting Windows Phone 7.5., there is a known issue you’ll need to work around. Add the following line of code anywhere in your application before you instantiate a MobileServiceClient. For example, add this to the very beginning of app.js:

    XMLHttpRequest.prototype.withCredentials = false;

    We understand that this could be easier, so we are working on improving the quickstart. After an upcoming update, none of these steps will be necessary, except for adding a reference to cordova-x.x.x.js.


    Jeff Sanders (MSFT)

    Tuesday, March 26, 2013 6:30 PM
  • Hi A,

    Check out my previous answer:

    After an upcoming update, none of these steps will be necessary, except for adding a reference to cordova-x.x.x.js.

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, March 28, 2013 4:13 PM

All replies

  • I wanted to post the same issue. It has not worked with Phonegap nor WP7.5 for me. Is it possible to put up some working sample please?
    Saturday, March 23, 2013 11:36 PM
  • I have same problom as you, and i have used alot of time searching on google without any result. I have tested the code wich i downloaded from azure, running on localhost:8000. And that works fine, i think the issue is the javascript file "MobileServices.Web-1.0.0.min.js", that is not working with phonegap/WP7.5 as they say evry where on azure blogs.

    i get error: MobileServiceClient is undefined....

    var MobileServiceClient = WindowsAzure.MobileServiceClient,
                client = new MobileServiceClient('', '')

    so maybe it is because of this MobileService.Web-1.0.0.min.js file something is not working correct....?!!


    Sunday, March 24, 2013 12:04 AM
  • i was thinking Woow finaly i found a backend to consum data from for my mobile app, i was searching for solution and found out that i can use Azure Mobile Services, wich is not working in html....so is any other option we can use as a backend database.com or any other?
    Sunday, March 24, 2013 12:06 AM
  • My guess would be this is still in alpha mode. It's supposed to be working with Phonegap and WP7.5.
    Sunday, March 24, 2013 12:51 AM
  • yes maybe it is in alpha mode. so lets hope that they fix this as soon as posible...?! :)


    Sunday, March 24, 2013 8:55 PM
  • Hi Gon,

    Are you using the HTML Client?  How does PhoneGap wrap and contain this?

    -Jeff


    Jeff Sanders (MSFT)


    Monday, March 25, 2013 12:58 PM
  • Yes iam using HTML client. PhoneGap wrap HTML/css3/javascript so it shoud work as they have described that Azure mobile services is supported for PhoneGap/Cordova. the sample code is working fine, and it is simple html with js and css.
    Monday, March 25, 2013 2:09 PM
  • In all the blogs about the release of this alpha preview version, they said it works with phonegap and wp7.*, I have tried both, and neither works. 
    Monday, March 25, 2013 11:32 PM
  • me to, i have been trieng to get it work couple of days now, and neither there is any solution for it yet i guess. Strange that no one have tested it before they release this?!
    Tuesday, March 26, 2013 9:26 AM
  • The new MobileServices.Web-1.0.0.js client library does work with PhoneGap 2.3+ and IE8+. However, we haven’t yet published any documentation about how to work with PhoneGap, so we understand it will not be clear right now how to get started!

    Currently, the downloadable quickstart project is intended only for browser apps, not for PhoneGap apps. However, it is possible to tweak it to make it work in PhoneGap as follows:

    1. Add the following to your page’s <head> tag: <meta name='viewport' content='width=device-width' />
    2. Change the <script> tag that references jQuery to specify an explicit protocol in the URL, i.e., change this line:

    <script src='//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js'></script>

    .. to this:

    <script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js'></script>

    1. Add a script tag that references cordova-x.x.x.js (for example, <script src='cordova-2.5.0.js'></script> if you are using Cordova 2.5.0).
    2. If you are targeting Windows Phone 7.5., there is a known issue you’ll need to work around. Add the following line of code anywhere in your application before you instantiate a MobileServiceClient. For example, add this to the very beginning of app.js:

    XMLHttpRequest.prototype.withCredentials = false;

    We understand that this could be easier, so we are working on improving the quickstart. After an upcoming update, none of these steps will be necessary, except for adding a reference to cordova-x.x.x.js.


    Jeff Sanders (MSFT)

    Tuesday, March 26, 2013 6:30 PM
  • Thanks, It worked! I am talking about Phonegap.
    Tuesday, March 26, 2013 7:35 PM
  • Hello Jeff

    First of all, thanks for your replay, i was almost giving up and trying to find some other option to use as a backend. But iam still optimistic and want to use Azure Mobile Services as backend for my phonegap app's. 

    When are Azure gonna publishe documentation for PhoneGap/Cordova, so we can start the adventure for full?

    I did changes as you described as tweek's for getting it to work with PhoneGap but still iam not able to make it, blow is the code iam testing, maybe you can se what iam doing wrong....?

    <!DOCTYPE html> 
    <html>
    <head>
        <title>Sample: get started with data</title>
        <meta name='viewport' content='width=device-width' />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="text/javascript" src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js'></script>
        <script type="text/javascript" src="cordova-2.5.0.js"></script>
        <script type="text/javascript" src='https://partnergymservice.azure-mobile.net/client/MobileServices.Web-1.0.0.min.js'></script>
        <!--<script type="text/javascript" charset="utf-8" src='js/app.js'></script>-->
        <script type="text/javascript">
            document.addEventListener("deviceready", onDeviceReady, false);

            function onDeviceReady() {
                $(function () {
                    //navigator.notification.alert('function');

                    try {
                        var client = new WindowsAzure.MobileServiceClient('', ''),
                        todoItemTable = client.getTable('todoitem');
                        navigator.notification.alert(todoItemTable);
                    }
                    catch (e) {
                        navigator.notification.alert('Error: ' + e.description);
                    }

                   //navigator.notification.alert('client:');
                });
            }
        </script>
    </head>
    <body>
        <div id='wrapper'>
            <article>
                    <header>
                        <h2>Windows Azure</h2>
                        <h1>Mobile Services</h1>

                        <form id='add-item'>
                            <button type='submit'>Add</button>
                            <div><input type='text' id='new-item-text' placeholder='Enter new task' /></div>
                        </form>
                    </header>

                    <ul id='todo-items'></ul>
                    <p id='summary'>Loading...</p>
                </article>
            <footer>
                    <a href='http://www.windowsazure.com/en-us/develop/mobile/'>
                        Learn more about Windows Azure Mobile Services
                    </a>
                </footer>
        </div>
    </body>
    </html>

    Tuesday, March 26, 2013 9:57 PM
  • Hi julio

    Nice ;) 

    How did you get it to work?

    Posible to show your code?

    regards

    gonadn

    Tuesday, March 26, 2013 10:15 PM
  • Thanks for the reply. I am still having issues after following your sample. I am using xcode, phonegap (latest), jquery and jquerymobile (latest).

    Is it possible to give a sample project? 

    Thanks again.

    Tuesday, March 26, 2013 10:44 PM
  • And iam using Visual studio 2010 , latest version of PhoneGap 2.5.0, with jQuery mobile latest version. But iam still having issues to make it work...?!
    Tuesday, March 26, 2013 10:51 PM
  • finaly it is working for me now, i dont no how i fix this. I was sitting with this all night and i coudent find out why it is not working. And when i start my pc today and just run the app, it start working ;) so thanks to Jeff. Now i can continue my work.... !

    Below is my HTML and Javascript: 

    <!DOCTYPE html>
    <html>
    <head>
        <title>Sample: get started with data</title>
        <meta name='viewport' content='width=device-width' />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
    <!--    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    -->
        <link rel="stylesheet" type="text/css" href="css/style.css" />
       
        <script type="text/javascript" src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js'></script>
        <script type="text/javascript" src='https://partnergymservice.azure-mobile.net/client/MobileServices.Web-1.0.0.min.js'></script>
        <script type="text/javascript" src="cordova-2.5.0.js"></script>
        <script type="text/javascript" charset="utf-8" src='js/app.js'></script>
     
    </head>
    <body>
        <div id='wrapper'>
            <article>
                    <header>
                        <h2>Windows Azure</h2>
                        <h1>Mobile Services</h1>
    
                        <form id='add-item'>
                            <button type='submit'>Add</button>
                            <div><input type='text' id='new-item-text' placeholder='Enter new task' /></div>
                        </form>
                    </header>
    
                    <ul id='todo-items'></ul>
                    <p id='summary'>Loading...</p>
                </article>
            <footer>
                    <a href='http://www.windowsazure.com/en-us/develop/mobile/'>
                        Learn more about Windows Azure Mobile Services
                    </a>
                </footer>
        </div>
    </body>
    </html>

    document.addEventListener("deviceready", onDeviceReady, false);
    
    // PhoneGap is ready
    //
    function onDeviceReady() {
        XMLHttpRequest.prototype.withCredentials = false;
        $(function () {
            //navigator.notification.alert('function');
            try {
                var client = new WindowsAzure.MobileServiceClient('', ''),
                todoItemTable = client.getTable('todoitem');
            }
            catch (e) {
                navigator.notification.alert('Error: ' + e.description);
            }
    
            //navigator.notification.alert('client:');
    
            // Read current data and rebuild UI.
            // If you plan to generate com:plex UIs like this, consider using a JavaScript templating library.
            function refreshTodoItems() {
                var query = todoItemTable.where({ complete: false });
    
                query.read().then(function (todoItems) {
                    var listItems = $.map(todoItems, function (item) {
                        return $('<li>')
                                .attr('data-todoitem-id', item.id)
                                .append($('<button class="item-delete">Delete</button>'))
                                .append($('<input type="checkbox" class="item-complete">').prop('checked', item.complete))
                                .append($('<div>').append($('<input class="item-text">').val(item.text)));
                    });
    
                    $('#todo-items').empty().append(listItems).toggle(listItems.length > 0);
                    $('#summary').html('<strong>' + todoItems.length + '</strong> item(s)');
                });
            }
    
            function getTodoItemId(formElement) {
                return Number($(formElement).closest('li').attr('data-todoitem-id'));
            }
    
            // Handle insert
            $('#add-item').submit(function (evt) {
                var textbox = $('#new-item-text'),
                        itemText = textbox.val();
                if (itemText !== '') {
                    todoItemTable.insert({ text: itemText, complete: false }).then(refreshTodoItems);
                }
                textbox.val('').focus();
                evt.preventDefault();
            });
    
            // Handle update
            $(document.body).on('change', '.item-text', function () {
                var newText = $(this).val();
                todoItemTable.update({ id: getTodoItemId(this), text: newText });
            });
    
            $(document.body).on('change', '.item-complete', function () {
                var isComplete = $(this).prop('checked');
                todoItemTable.update({ id: getTodoItemId(this), complete: isComplete }).then(refreshTodoItems);
            });
    
            // Handle delete
            $(document.body).on('click', '.item-delete', function () {
                todoItemTable.del({ id: getTodoItemId(this) }).then(refreshTodoItems);
            });
    
            // On initial load, start by fetching the current data
            refreshTodoItems();
        });
    }



    • Edited by gonadn Wednesday, March 27, 2013 7:53 AM
    Wednesday, March 27, 2013 7:52 AM
  • Oki, i find out another issue, i think that was the problom in my case at least, when i run fiddler 2 for debugging and i test/run the phonegap app, for some reason it wont work, and it fails initializing the MobileServiceClient in javascript. And when i close the fiddler and run the app again it start working....?!

    Why is fiddler stoping app to work as it shoud?

    Wednesday, March 27, 2013 8:18 AM
  • Hi Gonadn,

    The traffic is HTTPS traffic so there is some setup involved for this:

    http://www.fiddler2.com/fiddler/help/phone.asp

    Since you are hitting a site you also have to install the fiddler certificate as outlined there.

    Happy Coding!

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, March 27, 2013 11:53 AM
  • Hi A,

    Could you start a new forum post and detail the problems you are having after following the above instructions I posted?  That would help greatly!

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, March 27, 2013 11:54 AM
  • It is working finally. The phonegap default javascript was having an issue I think, so it might not have loaded the rest of the javascript. 

    Either way, at least I am unblocked now. Thanks a lot. 

    One final question, the js file that we have to include for azure, it'll be automatically updated or will we need a new update for the mobile app with updated reference for js file. 

    Wednesday, March 27, 2013 10:57 PM
  • Hi A,

    Check out my previous answer:

    After an upcoming update, none of these steps will be necessary, except for adding a reference to cordova-x.x.x.js.

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, March 28, 2013 4:13 PM
  • I am receiving this same error in my project, using PhoneGap 3.1, targeting Android, and using Azure Mobile Services.  I have added the reference to cordova.js and the XMLHttpRequest setting.  I also have the meta tag and I have ensured that all script and css tags have explicit domains specified.

    But every time I click the Login button in my app, I get the error: "Login is only supported from http:// or https:// URLs. Please host your page in a web server"

    Any help is greatly appreciated!


    Friday, November 8, 2013 1:56 AM
  • I am having the same problem (error message below).  My app works fine in web browser, even in android device.  However, it cannot login users in after Phonegap Build. I am using google+ for login.  In google developer console, I chose web application when creating client ID based on "get started" tutorials.  I wonder if I should choose other application types.  I did add <script src="js/cordova-3.7.0.js"></script>

    Error: Login is only supported from http:// or https:// URLs. Please host your page in a web server.

    Thursday, January 1, 2015 1:50 PM