0

以下について助けが必要です。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コード

<?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タグ内に含まれるスクリプトとスタイルは読み込まれないことに注意してください。jQueryMobilebodyは、新しいページの要素、より具体的には要素のみをロードしdata-role="page"ます。

ただし、ページが HTTP 経由で読み込まれると、タグ内のスクリプトとスタイルheadは通常どおり読み込まれます。これは、ページを直接開いたときにページが正しく表示される理由を説明しています。

問題を解決するには、次のアクションを実行する必要があります。

  • $(document).ready(function() {と置き換えます$(document).on('pageinit', '#your-page-id', function() {
  • 2 番目のページをタグscriptから移動するか、共通の JS ファイル内に配置して、最初のページのタグ内にロードします。head<div data-role="page">scripthead

これが役立つことを願っています。

于 2013-06-09T09:00:44.877 に答える