0

我需要以下帮助。有 3 页第一是静态的，第二是动态的，基于第三也是动态的。

当它从第 1 次导航到第 2 次时，它会显示显示的内容，但是当它从第 2 次到第 3 次导航时，它无法加载内容。但是当我刷新页面时，它会加载内容。我无法理解这有什么问题。有人可以帮我吗？

Javascript：

<script type="text/javascript">
    $(document).ready(function () {
        var b_id = getUrlVars()["b_id"];
        $.ajax({
            url: 'http://localhost/ajax_practice/php/get_categories.php?b_id=' + b_id,
            dataType: 'jsonp',
            jsonp: 'jsoncallback',
            timeout: 5000,
            success: function (data, status) {
                $.each(data, function (i, item) {
                    var output = "";
                    $(".main_category").append(output);
                    $(".main_category").listview("refresh");
                    output += "<li>";
                    output += "<a href='directory.html?c_id=" + item.id + "&b_id=" + b_id + "' data-transition='slide' rel='external'>";
                    output += item.category_name;
                    output += "</a>";
                    output += "</li>";
                    $(".main_category").append(output);
                    $(".main_category").listview("refresh");
                });
            }
        });
    });
</script>

网页

<div data-role="page" id="page">
    <div data-role="header">
        <ul class="header_box" data-theme="d">
            <li>
                <select data-native-menu="false" name="selectmenu" id="selectmenu" data-theme="d">
                    <option value="option1">Option 1</option>
                    <option value="option2">Option 2</option>
                    <option value="option3">Option 3</option>
                </select>
                <select data-native-menu="false" name="selectmenu2" id="selectmenu2" data-theme="d">
                    <option value="option1">Option 1</option>
                    <option value="option2">Option 2</option>
                    <option value="option3">Option 3</option>
                </select>
            </li>
            <li>
                <a>
                    <img src="images/logo1.png"><span>www.justclick.co</span>
                </a>
            </li>
            <li>
                <select data-native-menu="false" name="selectmenu2" id="selectmenu3" data-theme="d">
                    <option value="option1">Option 1</option>
                    <option value="option2">Option 2</option>
                    <option value="option3">Option 3</option>
                </select>
                <select data-native-menu="false" name="selectmenu2" id="selectmenu4" data-theme="d">
                    <option value="option1">Option 1</option>
                    <option value="option2">Option 2</option>
                    <option value="option3">Option 3</option>
                </select>
            </li>
        </ul>
        <div class="header_search">
            <div class="search_input">
                <input type="text" placeholder="What ? e.g. Hotel" data-theme="d">
                <input type="text" placeholder="Where? eg. Area" data-theme="d">
            </div>
            <div class="search_button">
                <a>
                    <img src="images/search_button.png">
                </a>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div data-role="content">
        <div data-role="header">
            <div class="service_heading">Business Information & Services</div>
        </div>
        <ul data-role="listview" class="main_category"></ul>
    </div>
</div>

php代码

<?php header( 'Content-type: application/json'); 

    include 'connect.php'; 
    $b_id=$_GET[ 'b_id']; 
    $sql_select=mysql_query( "SELECT * FROM business_category WHERE b_id=$b_id") or die(mysql_error()); 
    $records=array(); 
    if(mysql_num_rows($sql_select)>0) { 
        while($row=mysql_fetch_array($sql_select)) { 
            $records[] = $row; 
        } 
        echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');'; 
    } else { 
        echo 'data not selected'; 
      } 
?>

当我从上一页来时，我无法获取页面的内容，但是当我刷新页面时，我得到了它。为什么会这样？

4

1 回答 1

0

jQueryMobile 默认使用 Ajax 机制进行页面之间的转换。请注意，当通过 Ajax 加载新页面时，head不会加载标记中包含的脚本和样式。jQueryMobile 只加载body新页面的元素，更具体地说是加载data-role="page"元素。

但是，当通过 HTTP 加载页面时，head通常会加载标签内的脚本和样式。这解释了为什么您的页面在直接打开页面时会正确显示。

为了解决您的问题，您必须执行以下操作：

  • 替换$(document).ready(function() {为$(document).on('pageinit', '#your-page-id', function() {
  • 将您的第二页script从head标签内移动<div data-role="page">或放置script在一个普通的 JS 文件内并将其加载到第一页的head标签内

我希望这有帮助。

于 2013-06-09T09:00:44.877 回答