JQuery Mobile and IOS Full Screen Web App Problem

Discussion in 'Web Design and Development' started by CavemanUK, Jan 31, 2013.

  1. macrumors 6502

    CavemanUK

    Joined:
    Jun 29, 2006
    Location:
    Rhyl, North Wales
    #1
    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)

    Code:
     $(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
    Code:
    <!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>
     

Share This Page