1

我在这里搜索了问题，我可能只是不明白，这是我的代码

当我调用 check-event.html 页面加载正常。当我使用我的 php 脚本 check-event.php 中的 $.mobile.changePage 调用 check-event-details.html 时，除了标题之外没有任何加载。这一切都适用于 window.location = 但我想使用 ajax 运动。

索引.html

   <!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/logout-button.min.css" />
        <link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" />
        <link rel="stylesheet" href="css/my.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        </script>
        <script src="js/jquery.mobile-1.3.0.min.js"></script>
        <script src="js/jquery.cookies.2.2.0.min.js"></script>

<script type="text/javascript">
var uid = $.cookies.get( 'uid' );
 if(uid == null)
                 {
                window.location ='account-login.html'; }
                 else
                 { }
</script>
</head>

<body>
   <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-details.html" data-transition="slide">
                    Create Event
                </a>
            </li>
            <li data-theme="c">
                <a href="check-events.html" data-transition="slide">
                    Check Events
                </a>
            </li>
        </ul>
    </div>     
    <div data-role="content">
        <a data-role="button" id="logout" data-icon="info" data-theme="f" data-iconpos="left">Log-Out</a>
    </div>  
</body>

<script>
$("#logout").click( function()
           {
             $.cookies.del( 'uid' );
             $.cookies.del( 'pass' );
             window.location ='account-login.html';
           }
        );
    </script>

</html>

检查事件.html

<!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/logout-button.min.css" />
         <link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" />
        <link rel="stylesheet" href="css/my.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        </script>
        <script src="js/jquery.mobile-1.3.0.min.js"></script>
        <script src="js/jquery.cookies.2.2.0.min.js"></script>


<script type="text/javascript">
var uid = $.cookies.get( 'uid' );
 if(uid == null)
                 {
                window.location ='account-login.html'; }
                 else
                 { }
</script>
</head>

<body>


   <div data-role="page" id="index1">

           <div data-theme="a" data-role="header">
        <a data-role="button" data-direction="reverse" data-rel="back" data-transition="slide"
         data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
            Back
        </a>
        <h3>
           Check Events
        </h3>
    </div>

 <div data-role="content">

 <div id="content"></div>

        <script>
            $(function(){
            $("#content").load(("check-events.php"), function(){
            $('#content').trigger("create");
        });
        return false;

});
</script>


    </div>  
</body>
</html>

检查事件.php

<?
require_once("../backend/functions.php");
dbconn();
?>
<script>
 $('form').submit( function(){
       return submitForm.call( this );
 });
</script>
<script>
function submitForm() {
       // alert the id of the form that was clicked

    var eventid = this.id;
    $.cookies.set( 'eventidcookie', eventid );
    $.mobile.changePage( "check-events-details.html", { transition: "slide"} );

    return false;
}
</script>

<?
 //window.location ='check-events-details.html';   
 $id = $CURUSER["id"]; 
 $e= date("Y/m/d");              
    $a = SQL_Query_exec("SELECT * FROM cal_events WHERE userid = '$id' AND enddate > '$e' ORDER BY enddate ASC");

if (mysql_num_rows($a) == 0) {
?>
<script>
alert("You have no active events to deal with");
window.location ='index.html'; 
</script>
<?
}else{
while($rowa = mysql_fetch_array($a))
{ 
?>
<form id="<? echo $rowa[eventid]; ?>">
 <ul data-role="listview" data-divider-theme="b" data-inset="true">
            <li data-role="list-divider" role="heading">
                Finishing Time: <? echo date("jS F Y",strtotime($rowa[enddate])); ?>
            </li>
            <li data-theme="c">
               <input type="submit" value="<? echo $rowa[eventname]; ?>" id="submitEventButton">
            </li>
        </ul>
</form>
<?
}
}
?>

检查事件详细信息.html

<!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/logout-button.min.css" />
         <link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" />
        <link rel="stylesheet" href="css/my.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        </script>
        <script src="js/jquery.mobile-1.3.0.min.js"></script>
        <script src="js/jquery.cookies.2.2.0.min.js"></script>


<script type="text/javascript">
var uid = $.cookies.get( 'uid' );
 if(uid == null)
                 {
                window.location ='account-login.html'; }
                 else
                 { }
</script>
</head>

<body>


   <div data-role="page" id="index2">

           <div data-theme="a" data-role="header">

        <h3>
           Check Event Details
        </h3>
    </div>

 <div data-role="content">

 <div id="content"></div>

        <script>
            $(function(){
            $("#content").load(("check-events-details.php"), function(){
            $('#content').trigger("create");
        }).trigger("create");
        return false;

});
</script>

从 Jquery Website 这就是 jQuery Mobile 当前仅支持通过 AJAX 加载单页文档的原因。要导航到多页文档，您必须通过添加 data-ajax="false" 属性来禁用链接上的 ajax。还有一个小部件允许通过以下方式支持子页面

4

0 回答 0