使用jquery mobile ajax-我的日历仅在刷新页面后出现?

时间:2013-03-26 21:59:23

标签: ajax jquery jquery-mobile

不知道如何说出问题但是当我使用jquery mobile从我的索引页面移动到我的events.html页面时,直到我按下浏览器上的刷新按钮才会出现我的日历。 有谁知道我可能会缺少什么,我确定它与其他页面的ajax调用有关

    <!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="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <link rel="stylesheet" href="css/my.css" />
        <script src="https://s3.amazonaws.com/codiqa-cdn/jquery-1.7.2.min.js">
        </script>
        <script src="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
        </script>
        <!--added for calendar-->
         <link rel="stylesheet" type="text/css" href="../css/mdp.css">
        <link rel="stylesheet" type="text/css" href="../css/prettify.css">
    <script type="text/javascript" src="../js/prettify.js"></script>
        <script type="text/javascript" src="../js/lang-css.js"></script>
        <script type="text/javascript">
        $(function() {
            prettyPrint();
        });
        </script>

        <script type="text/javascript" src="../js/jquery.ui.core.js"></script>
        <script type="text/javascript" src="../js/jquery.ui.datepicker.js"></script>
    <!-- loads mdp -->
        <script type="text/javascript" src="../jquery-ui.multidatespicker.js"></script>

        <!-- mdp demo code -->
        <script type="text/javascript">
        <!--
            var latestMDPver = $.ui.multiDatesPicker.version;
            var lastMDPupdate = '2012-03-28';

            $(function() {
                $('.mdp-version').text('v' + latestMDPver);
                $('#mdp-title').attr('title', 'last update: ' + lastMDPupdate);
                $('#with-altField').multiDatesPicker({
    altField: '#altField'
            });
            });
        </script>

</head>
<body>
   <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                   Create Event
                </h3>
            </div>

        <div data-role="content">
                <form id="newevent" >
                    <div data-role="fieldcontain">
                        <fieldset data-role="controlgroup">
                            <label for="textinput1">
                                Event
                            </label>
                            <input name="" id="textinput1" placeholder="" value="" type="text" />
                        </fieldset>
                    </div>
                    <div data-role="fieldcontain">
                        <fieldset data-role="controlgroup">
                            <label for="textarea1">
                                About
                            </label>
                            <textarea name="" id="textarea1" placeholder="">
                            </textarea>
                        </fieldset>
                    </div>
                            <div id="with-altField"></div>
                            <input type="hidden" id="altField" name="dates">
                    <input value="Submit" type="submit" />
                </form>
            </div>



    </div>
</body>

我刷新后会出现日历

<div id="with-altField"></div>

这是该页面将调用以上内容

<!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="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <link rel="stylesheet" href="css/my.css" />
        <script src="https://s3.amazonaws.com/codiqa-cdn/jquery-1.7.2.min.js">
        </script>
        <script src="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
        </script>

<script>
function id1() {
    $.ajax({
        type: 'POST',
        cache: false,
        url: 'some.php',
        dataType: 'json',
        success: function(data) {
            console.log(data.key); // Outputs "value"
            console.log(data.key2); // Outputs "value2"
        }
    });
    return false;
}
</script>


</head>
<body onload="id1()">
   <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                   Options
                </h3>
            </div>

             <div data-role="content">
        <ul data-role="listview" data-divider-theme="b" data-inset="true">
            <li data-role="list-divider" role="heading">
                Menu
            </li>
            <li data-theme="c">
                <a href="event.html" data-transition="slide">
                    Create Event
                </a>
            </li>
            <li data-theme="c">
                <a href="#page1" data-transition="slide">
                    Check Events
                </a>
            </li>
        </ul>
    </div>

    </div>
</body>

</html>

我是如何工作的,在内容中添加了脚本

   <div id="content"></div>
            <script>
                $(function(){
                $("#content").load(("new-event.php"), function(){
        //    $('#content').load($('new-event.php').attr('href'), function () {
                $('#content').trigger("create");
            }).trigger("create");
            return false;

    });
    </script>
rest of code and other scripts

<div>

0 个答案:

没有答案