Forums

CavemanUK

Hi,

I Hope you guys can help me. Im learning JQuery/Javascript by making a little web app. the following code works fine in a browser AND in safari on IOS when not a full-screen webapp but if i add it to homescreen as an app, the page doesnt update with the records pulled in the javascript.

All its supposed to do is generate an unordered list upon the #page being switched to.

can anyone give me any pointers please?

thanks in advance

this is my javascript (main.js)

 $(document).delegate('#customers', 'pageshow', function() {

    $("#customerlist").html("loading");

    $.ajax({
        type: "POST",
        url: "getCustomers.php",
        data: "",
        cache: false,
        dataType: "text",
        success: onSuccess
    });

    $("#customerslist").ajaxError(function(event, request, settings, exception) {
        $("#customerslist").html("Error Calling: " + settings.url + "<br />HTTP Code: " + request.status);
    });


    function onSuccess(data) {


        var result = JSON.parse(data);

        var outputstring = "<ul data-role='listview' data-filter='true'>";
        $.each(result.customer, function(index, value) {
            //- extract target value like zipCode
            outputstring = outputstring + "<li>" + value.name + "</li>";
        });
        outputstring = outputstring + "</ul>";
        $("#customerslist").html(outputstring);

        $("#customerslist").trigger("create");

    }

});

and this is my html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>INSITE touch</title>

        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />

        <link rel="stylesheet" href="assets/css/main.css" />

        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>


        <script src="assets/js/main.js"></script>



        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="apple-mobile-web-app-capable" content="yes">

        <link href="assets/images/apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon">
        <link href="assets/images/apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon">
        <link href="assets/images/apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon">
        <link href="assets/images/apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon">

        <link href="assets/images/apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
        <link href="assets/images/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
        <link href="assets/images/apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
        <link href="assets/images/apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
        <link href="assets/images/apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />`
        <link href="assets/images/apple-touch-startup-image-1496x2048.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    </head>
    <body>

        <div data-role="page" id="main">
            <div data-role="panel" id="settingspanel">
                <h2>My Settings</h2>
            </div>
            <div data-role="header" data-position="fixed">
                <h1>INSITE touch</h1>
                <a href="#settingspanel" data-icon="info" data-transition="slide">Settings</a>
                <a href="#newjob" data-icon="plus" class="ui-btn-right" data-transition="slide">New Job</a>
            </div>
            <div data-role="content">
                <label for="search-basic" class="ui-hidden-accessible">Search Jobs:</label>
                <input type="search" name="search" id="search-basic" value="" placeholder="Search Jobs" />
                <br>
                <ul data-role="listview">
                    <li>My Jobs Today<span class="ui-li-count ui-btn-up-c ui-btn-corner-all">6</span></li>
                    <li>Booked Today<span class="ui-li-count ui-btn-up-c ui-btn-corner-all">1</span></li>
                    <li>Booked This Week<span class="ui-li-count ui-btn-up-c ui-btn-corner-all">12</span></li>
                </ul>
                <br>
            </div>
            <div data-role="footer" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#customers" data-role="button" data-icon="gear" data-transition="slideup">Customers</a></li>
                        <li><a href="#jobs" data-role="button" data-icon="bars" data-transition="slideup">Jobs</a></li>
                        <li><a href="#parts" data-role="button" data-icon="gear" data-transition="slideup">Parts</a></li>

                    </ul>
                </div>
            </div>
        </div>


        <div data-role="page" id="customers">
            <div data-role="header" data-position="fixed">
                <h1>Customers</h1>
                <a href="#main" data-transition="slidedown" data-icon="home">Home</a>
                <a href="#newjob" data-icon="plus" class="ui-btn-right" data-transition="slide">New Job</a>
            </div>
            <div data-role="content" id="customerslist">


            </div>
        </div>
    </body>
</html>

treehouse : what would you like to learn today?

Forums

JQuery Mobile in IOS Full Screen App