Question

我需要以下方面的帮助。有3页第1页是静态的，第2页是动态的，第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>

Html页面

<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 code

<?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'; 
      } 
?>

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

Answer 1

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文件中，并将其加载到第一页的{{1}内标签

我希望这会有所帮助。

为什么我的内容在我来自某个页面时没有加载，当我在jquery mobile中刷新它时会加载

1 个答案: