2

enter image description hereI am using jquery mobile. I want to call function on page load. I googled a lot find using

But it did not work. I also need to pass data from one page to another in jquery mobile. Here is my code: I need to call loadData function on page load so that table view is created. How to pass data from one page to another? i see like this.enter image description here

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <title></title>
        <!--link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"-->
        <link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">
        <link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.css">
        <link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.min.css">
        <link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.css">
        <ink rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.min.css">

        <!-- Extra Codiqa features -->


        <!-- jQuery and jQuery Mobile -->
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/cordova-2.7.0.js"></script>
        <!--script src="js/jquery.mobile-1.3.1.min.js"></script-->
        <!--script src="js/jquery.mobile-1.3.1.min.js"></script-->
        <script src="js/jquery.mobile-1.3.1.js"></script>

        <!-- Extra Codiqa features -->


    </head>
    <style>

        .ui-page {

            background : transparent
            url(img/Background-Screen.png)
            no-repeat fixed left bottom;
            -webkit-background-size :100% 100%;
            -moz-background-size :100% 100%;
             -o-background-size :100% 100%;

            background-size : cover;
        }
        #CaseInformationScreen {

            background : transparent
                url(img/Background-Screen.png)
                no-repeat fixed left bottom;
            -webkit-background-size :100% 100%;
            -moz-background-size :100% 100%;
            -o-background-size :100% 100%;
            background-size : cover;
        }


        #UserSettingScreen {

            background : transparent
                url(img/Background-Screen.png)
                no-repeat fixed left bottom;
            -webkit-background-size :100% 100%;
            -moz-background-size :100% 100%;
            -o-background-size :100% 100%;
            background-size : cover;
        }


    </style>



    <body>


        <!--page one My Cases Screen------------->
        <div data-role="page" id="Home" > 
            <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
                <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
                <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
                    <a href="#UserSettingScreen" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b" id="Setting" data-rel="popup" data-position-to="window">Setting</a>
                    <a href="#CaseInformationScreen" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" data-position-to="window">Add</a>
                    <a href="#newevent1" data-role="button" data-inline="true" data-theme="b" data-rel="dialog"id="Edit">Edit</a>
                </div>
            </div>

            <div data-role="content">

            <ul data-role="listview" data-inset="true" id="folderData" >
                </ul>
                <div data-role="popup" id="CaseInformationScreen" data-close-btn="none">
                    <div data-role="header" data-theme="b" >

                        <a href="#" data-role="button" data-corners="false" id="Cancel">Cancel</a>
                        <h1>Case Information</h1>
                        <a href="#" ddata-role="button" data-corners="false">Add</a>
                    </div>
                      <div><img src="img/Documents.png"/></div>
                    <div data-role="fieldcontain">
                        <label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
                        <input name="text-12" id="text-12" value="" type="text">
                            </div>
                    <div data-role="fieldcontain">
                        <label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label>
                        <input name="text-12" id="text-12" value="" type="text">
                            </div>
                    <div data-role="fieldcontain">
                        <label for="textarea-12">Textarea:</label>
                        <textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
                    </div>
                </div>



                  <div data-role="popup" id="UserSettingScreen" data-close-btn="none">
                    <div data-role="header" data-theme="b" >
                        <a href="#" data-role="button" data-corners="false" id="CancelSettingButton">Cancel</a>
                        <h1>User Settings</h1>
                        <a href="#" ddata-role="button" data-corners="false">Ok</a>
                    </div>
                    <div><img src="img/Documents.png"/></div>
                    <div data-role="fieldcontain">
                        <label for="text-12" style="text-align:top;margin-left: 0px;">IP Address:</label>
                        <input name="text-12" id="text-12" value="" type="text">
                    </div>  
                    <div data-role="fieldcontain">
                        <label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
                        <select name="select-choice-1" id="select-choice-1">
                            <option value="standard">A</option>
                            <option value="rush">B</option>
                        </select>
                    </div>

                 </div>

              </div>

             <script>

                $(document).on('pagebeforeshow', '#Home', function(){ 
                    console.log("init");
                    test();
                });

                function test() {
                    alert("dfg")
                    for (i = 0; i < 40; i++) {
                        $('#folderData').append(
                            '<li class="row" id="' + i + '">' + '<a href="#">' + '<img src="img/Blue-Folder.png">' + '<h2>Broken Bells</h2>' + '<p>Broken Bells</p>' + '<span class="ui-li-count">' + i + '</span></a>' + '</li>'
                        );
                    }

                }

        </script>
            </div>




        <!-- Page two  Case Information Screen-------------------------->  




        <!-- Page Three  Case User setting Screens-------------------------->  



        <!-- Page Four  Document Information Screens-------------------------->  
        <div data-role="page" >
            <div data-role="header" data-theme="b" data-position="fixed">
                <a href="#" data-role="button" data-corners="false">Cancel</a>
                <h1>Document Information</h1>
                <a href="#" ddata-role="button" data-corners="false">Ok</a>
            </div>
            <div data-role="fieldcontain">
                <label for="text-12" style="text-align:top;margin-left: 0px;">Name:</label>
                <input name="text-12" id="text-12" value="" type="text">
            </div>  
            <div data-role="fieldcontain">
                <label for="text-12" style="text-align:left;margin-left: 0px;">Date:</label>
                <input name="text-12" id="text-12" value="" type="text">
            </div>
            <div data-role="fieldcontain">
                <label for="textarea-12">Notes:</label>
                <textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
            </div>

        </div>


        <!------------------------------>
     <div data-role="page" id="DocumentScreen" > 
            <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
                <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 20px;">My Documents</h1>
                <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
                    <div><img src="img/Connect-Realtime.png"/></div>
                    <!--a href="#" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b" id="Setting" data-rel="popup" data-position-to="window">Setting</a-->

                </div>
            </div>

            <div data-role="content">

                <ul data-role="listview" data-inset="true" id="folderInside_Data" >
                </ul>

            </div>
        </div>



    </body>


    <script >

        $(document).ready(function() {
            // $('.ui-loader').remove();
            $.mobile.loading('hide');


        });
        $(document).bind("mobileinit", function(){
                       //  $.mobile.touchOverflowEnabled = true;
                         $(document).delegate('.ui-content', 'touchmove', false);
                         });







        $(".row").click(function() {
            $.mobile.changePage($("#DocumentScreen"), {                      
            transition: "slide",
               reverse: false,
            changeHash: false         
        });
                        console.log(this.id)
                        });
// $('#here_table').append(content);
        $("#addbuttons").on("click", "a", function() {

            if ($(this).attr("id") == "Add") {
                           // alert("--")
                        //    alert("---")
                          //  console.log('divclicked');
                        //    $('#CaseInformationScreen').popup();
                          //  $('#CaseInformationScreen').popup('open');

                          // $.mobile.changePage('#popupStatus','pop',true,true);
               /*$.mobile.changePage($("#CaseInformationScreen"), {
                    transition: "slidedown",
                    reverse: false,
                    changeHash: false,
                    role: 'dialog',

                });*/
            } else if ($(this).attr("id") == "Setting") {

            } else if ($(this).attr("id") == "Edit") {

            }
        });

      $("#Cancel").click(function() {
                        // alert("---")
                         $('.ui-dialog').dialog('close')
                        // ('#CaseInformationScreen').dialog('close');
      $.mobile.changePage($("#Home"), {
                    transition: "pop",
                    reverse: false,
                    changeHash: false
                });

});
      $("#CancelSettingButton").click(function() {

       $.mobile.changePage($("#Home"), {
                    transition: "slide",
                    reverse: false,
                    changeHash: false
                });

});

/*function createDir(dirname){
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
            function(fileSys) {
                fileSys.root.getDirectory(dirname, {create: true,
exclusive: false},
                    function(directory) {
                        console.log("Directory has been created");
                    }, createError);
            }, createError);
}

function createError(error){
       alert(error.code);
}

<!-------------------->

You have to get a directoryentry (the variable entry in the examples) 
first. This can be done in two ways: 
way 1: getLocalFileSystem 

function onSuccess(fileSystem) { 
    var entry=fileSystem.root; 
} 

// request the persistent file system 
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess, 
onError); 

or  way 2: resolveLocalFileSystemURI 

function onSuccess(directryEntry) { 
    var entry = directoryEntry; 
} 

window.resolveLocalFileSystemURI("file:///sdcard", onSuccess, 
onError); */
<!------------------------------------------>



<!------------------------------------------------------>
/*var reader;
    var text;
    var myFileSystem;

    document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady() {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
    }

    function myfile() {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotmyFS, fail);
    }

    function gotFS(fileSystem) {
        fileSystem.root.getFile("readme.txt", {create: true, exclusive: false}, gotFileEntry, fail);
        myFileSystem = fileSystem;
        console.log(fileSystem.name);
    }

    function gotmyFS(fileSystem) {
        fileSystem.root.getFile("readme2.txt", {create: true, exclusive: false}, gotFileEntry, fail);
    }

    function gotFileEntry(fileEntry) {
        fileEntry.createWriter(gotFileWriter, fail);
        fileEntry.file(gotFile, fail);
    }

    function gotFileWriter(writer) {
        writer.write("some sample text");
    }

    function gotFile(file){
        readAsText(file);
    }

    function readDataUrl(file) {
        reader = new FileReader();
        reader.onloadend = function(evt) {
            console.log("Read as data URL");
            console.log(evt.target.result);
        };
        reader.readAsDataURL(file);
    }

    function readAsText(file) {
        reader = new FileReader();
        reader.onloadend = function(evt) {
            console.log("Read as text");
            console.log(evt.target.result);
            console.log(file);
            text = evt.target.result;
        };
        reader.readAsText(file);
    }

    function readmyfile() {
        var myPara = document.getElementById("mytext");
        myPara.innerText = text;
    }
    function fail(error) {
        console.log(error.code);
    }*/


    <!----------------------------Example-------------------->

     document.addEventListener("deviceready", onDeviceReady, false);


      function onDeviceReady() {
          window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, onFileSystemFail);
      }

      function onFileSystemSuccess(fileSystem) {
          console.log(fileSystem.name);
          var directoryEntry = fileSystem.root;
          directoryEntry.getDirectory("newDir", {create: true, exclusive: false}, onDirectorySuccess, onDirectoryFail)
      }

      function onDirectorySuccess(parent) {
          console.log(parent);
         // alert(parent+"Directory");
      }

      function onDirectoryFail(error) {
          alert("Unable to create new directory: " + error.code);
      }

      function onFileSystemFail(evt) {
          console.log(evt.target.error.code);
          alert(evt.target.error.code);
      }

    </script>




</html>

  [1]: http://i.stack.imgur.com/UgfL6.png
4

1 回答 1

2

在页面加载时初始化函数的正确方法是：

$(document).on('pageinit', '#index', function(){ 

});

工作示例：http: //jsfiddle.net/Gajotres/PMrDn/

关于将数据从一个页面传递到另一个页面，有几种解决方案，您可以在我的博客 文章中找到它们。只需搜索名为：页面转换之间的数据/参数操作的章节。您还将找到工作示例。

基本上有3种主要方法：

  1. 将数据从第 1 页直接传递到第 2 页。它需要几HTML页，它不适用于HTML包含几页的页面。

  2. 将数据存储到一些全局 javascript 变量中（最简单的解决方案）。

  3. 将数据存储到localstorage

编辑 ：

还有一件事。如果您使用多个HTML页面，则需要小心使用 javascript。当 jQuery Mobile 加载其他HTML页面时，它只加载BODY内容，因此 a 中的所有内容都HEAD将被丢弃。这个问题的解决方案可以在这里。

编辑 2：

您的示例中有错误。你缺少BODY标签。你有 2 个很多初始化的 css 文件。只需要 1 个。

这是一个工作示例：

index.html: - 这只是一个测试页面，所以我们可以尝试从第 1 页转到第 2 页

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css">
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<title>Packer Forbes Communications</title>
</head>
<body>
    <div id="index" data-role="page">
        <div data-role="content">
            <a data-role="button" href="test.html">click me</a>
        </div>
    </div>
</body>
</html>

test.html - 这是你的固定页面

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <title></title>
        <!--link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"-->
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
        <!-- jQuery and jQuery Mobile -->
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

<!-- Extra Codiqa features -->
    </head>
    <body>
    <div data-role="page" id="Home" > 
        <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
            <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
            <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
                <a href="#UserSettingScreen" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b" id="Setting" data-rel="popup" data-position-to="window">Setting</a>
                <a href="#CaseInformationScreen" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" data-position-to="window">Add</a>
                <a href="#newevent1" data-role="button" data-inline="true" data-theme="b" data-rel="dialog"id="Edit">Edit</a>
            </div>
        </div>

        <div data-role="content">

            <ul data-role="listview" data-inset="true" id="folder_Contend_Data" >
            </ul>
            <!--- CaseInformationScreen Popup screen---------------------------->
            <div data-role="popup" id="CaseInformationScreen" data-close-btn="none">
                <div data-role="header" data-theme="b" >
                    <a href="#" data-role="button" data-corners="false" id="Cancel">Cancel</a>
                    <h1>Case Information</h1>
                    <a href="#" ddata-role="button" data-corners="false">Add</a>
                </div>
                <div><img src="img/Documents.png"/></div>
                <div data-role="fieldcontain">
                    <label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
                    <input name="text-12" id="text-12" value="" type="text">
                </div>
                <div data-role="fieldcontain">
                    <label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label>
                    <input name="text-12" id="text-12" value="" type="text">
                </div>
                <div data-role="fieldcontain">
                    <label for="textarea-12">Textarea:</label>
                    <textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
                </div>
            </div>
            <!--- CaseInformationScreen Popup screen End---------------------------->

            <!--- User Setting Popup screen---------------------------->
            <div data-role="popup" id="UserSettingScreen" data-close-btn="none">
                <div data-role="header" data-theme="b" >
                    <a href="#" data-role="button" data-corners="false" id="CancelSettingButton">Cancel</a>
                    <h1>User Settings</h1>
                    <a href="#" ddata-role="button" data-corners="false">Ok</a>
                </div>
                <div><img src="img/Documents.png"/></div>
                <div data-role="fieldcontain">
                    <label for="text-12" style="text-align:top;margin-left: 0px;">IP Address:</label>
                    <input name="text-12" id="text-12" value="" type="text">
                </div>  
                <div data-role="fieldcontain">
                    <label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
                    <select name="select-choice-1" id="select-choice-1">
                        <option value="standard">A</option>
                        <option value="rush">B</option>
                    </select>
                </div>
            </div>
            <!--- User Setting Popup screen End---------------------------->

        </div>
        <script>

                $(document).on('pagebeforeshow', '#Home', function(){ 
                    console.log("init");
                    test();
                });

                function test() {
                    alert("dfg")
                    for (i = 0; i < 40; i++) {
                        $('#folder_Contend_Data').append(
                            '<li class="row" id="' + i + '">' + '<a href="#">' + '<img src="img/Blue-Folder.png">' + '<h2>Broken Bells</h2>' + '<p>Broken Bells</p>' + '<span class="ui-li-count">' + i + '</span></a>' + '</li>'
                        );
                    }
                                            $('#folder_Contend_Data').listview('refresh');

                }

        </script>
    </div>
</body>
于 2013-06-17T06:35:45.417 回答