Click here to Skip to main content
12,403,699 members (68,849 online)
Click here to Skip to main content


42 bookmarked

Android and iOS Mobile Device Development with Azure Mobile Services using HTML5 and JavaScript

, 10 May 2013 CPOL
Tutorial showing how to build an iOS or Android app using Azure Mobile Services with HTML5 and JavaScript in Visual Studio.
$(function () {
    var client = new WindowsAzure.MobileServiceClient('', 'tRiEWWrDmHlZtrqxkAZvqHgNAjctXY75'),
        todoItemTable = client.getTable('todoitem');

    // Read current data and rebuild UI.
    // If you plan to generate complex UIs like this, consider using a JavaScript templating library.
    function refreshTodoItems() {
        var query = todoItemTable.where({ complete: false }); (todoItems) {
            var listItems = $.map(todoItems, function (item) {
                return $('<li>')
                    .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);

    // 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

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Bart Read
Team Leader Red Gate Software
United Kingdom United Kingdom
No Biography provided

You may also be interested in...

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160721.1 | Last Updated 10 May 2013
Article Copyright 2013 by Bart Read
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid