Question

所以我希望我能正确地问这个问题。

我将php文件中的内容加载到html页面中。 php文件包含可折叠集的信息。一旦我更改了弹出div的html，弹出窗口对于从php文件发回的数据不起作用。

这是因为最初加载页面时内容不存在吗？如果是这种情况，我该如何加载此内容。如果可能的话，我真的想让php脱离主要的html页面。虽然我开始意识到这可能是不可能的。对此的任何帮助将不胜感激。

这是我的html页面（在提交初始化页面后加载此页面）

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>theClipboard: Count</title>
    <link rel="stylesheet" href="../inc/stylez.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>
</head>
<body>
<div id="container">
<div data-role="page" data-theme="b" id="countStartedPage">

    <div data-role="header" data-position="fixed" class="ui-grid-c">
        <div class="ui-block-a">
            <a href="#categoryMenu" data-rel="popup" data-transition="slidedown"
               class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a">category</a>
            <div id="loadCatMenuHere">
                <!--<div id="categoryMenu" data-role="popup" data-theme="b">
                <p>is it working</p>
                </div>-->
            </div>
        </div>
        <div class="ui-block-b">
            <p>location menu</p>
        </div>
        <div class="ui-block-c">
            <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a">Go Back</a>
        </div>
        <div class="ui-block-d">
            <p>validate counts</p>
        </div>
    </div>
    <div data-role="main" id="countPageContent">
        <h3> content goes here</h3>
    </div>
    <div data-role="footer" data-position="fixed">
        <p class="centerText">copyright 2016 tosco(rs)2 all rights reserved</p>
    </div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<!--
<script src="countJS.js"></script>
-->

<script>
    $(document).ready(function(){
        console.log("page 2 loaded");
        getCategoryMenu();
        function getCategoryMenu() {
            var getCatMenu = $.post('categoryMenu.php');
            getCatMenu.done(function (data) {
                console.log("received cat menu #categoryMenu.html: " + $('#categoryMenu').html());
                $('#loadCatMenuHere').html(data);
                console.log("#category menu data:  " + data);
            });
            getCatMenu.fail(function (data) {
                console.log("failed at getting cat menu:");
            });

        }
    })

</script>

</body>
</html>

这是我的php文件，我来自

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>


<?php
include("../inc/connect.php");

session_start();

$buildFamMenu = $conn->prepare("select familyName from familyTbl order by familyPriority");
$buildFamMenu->execute();
$buildFamMenu->store_result();
$buildFamMenu->bind_result($family);

$buildCatMenu = $conn->prepare("select categoryID, categoryName from categoryTbl where family = ? order by categoryPriority");
$buildCatMenu->bind_param("s", $family);
$buildCatMenu->execute();
$buildCatMenu->store_result();
$buildCatMenu->bind_result($categoryID, $categoryName);
echo "<div id='categoryMenu' data-role='popup' data-theme='b'>";
echo "<div data-role='collapsibleset'>";

while ($buildFamMenu->fetch()) {
echo "<div data-role='collapsible'>
        <h3>" .$family ."</h3>
        <ul><li>test</li><li>test2</li><li>test3</li></ul>
      </div>";
}

 echo "</div></div>";


?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

Answer 1

我认为这可能是由于您尝试引用的文档对象在您引用时尚未加载。

我会将$ .post包装在一个保护性的“if！= undefined”块中，并使用else语句在一段时间后调用该函数。

（一些伪代码）：

if（myDiv未定义）{do stuff} else {setInterval（thisSameFunction，2000）; }

jquery移动弹出窗口无法加载html

1 个答案: