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>
__________________
iMac 2.5/250 SSD/3GB Yosemite
iPhone 5S 16GB | iPad Mini Retina 16GB | 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

Similar Threads
thread Thread Starter Forum Replies Last Post
how to resize (full screen ) web view in xcode ? nigam Mac Programming 4 Feb 17, 2014 01:59 AM
iOs 7 and safari, when in full screen mode? mrfabio Mac Applications and Mac App Store 0 Oct 13, 2013 06:59 AM
General: Cydia depictions (for your own repo) made easy with jQuery Mobile andreaslarsen Jailbreaks and iOS Hacks 2 Jun 15, 2013 05:42 PM
Google Brings Gmail iOS App Interface to Its Mobile Web App MacRumors iOS Blog Discussion 28 Mar 13, 2013 04:48 PM
Chitika: iOS Mobile Web Share Continues to Trump Android MacRumors iOS Blog Discussion 52 Dec 6, 2012 11:16 AM

Forum Jump

All times are GMT -5. The time now is 08:40 AM.

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

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