Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Jan 31, 2013, 04:01 PM   #1
CavemanUK
macrumors 6502
 
Join Date: Jun 2006
Location: Rhyl, North Wales
JQuery Mobile and IOS Full Screen Web App Problem

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>
__________________
MacBook Pro 2.33/250 Hybrid/3GB Lion
iPhone 4S 32GB | iPhone 4 16GB | New iPad 32GB | iPad 2 16GB
CavemanUK is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 02:17 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC