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

Question

So I hope I'm asking this correctly. 所以我希望我能正确地问这个问题。

I have content from a php file being loaded into an html page. 我有一个PHP文件的内容被加载到一个HTML页面。 The php file contains the info for a collapsible set. php文件包含可折叠集的信息。 The popup does not work for the data sent back from the php file once i change the html of the popup div. 一旦我更改了弹出div的html，弹出窗口对于从php文件发回的数据不起作用。

Is this because the content did not exist when the page was initially loaded? 这是因为最初加载页面时内容不存在吗？ If this is the case, how do I go about loading this content. 如果是这种情况，我该如何加载此内容。 I'm really trying to keep the php off the main html pages if at all possible. 如果可能的话，我真的想让php脱离主要的html页面。 Although I'm starting to realize this may not be possible. 虽然我开始意识到这可能是不可能的。 Any help with this would be greatly appreciated. 任何有关这方面的帮助将不胜感激。

Here's my html page (this page is loaded after an initializing page is submitted) 这是我的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>

here's my php file i'm pulling from 这是我的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

I believe that this may be due to the document object you're trying to reference not yet being loaded at the time of your reference. 我相信这可能是由于您尝试引用的文档对象在您引用时尚未加载。

I would wrap the $.post in a protective 'if != undefined' block with an else statement that recalls the function after an interval. 我会将$ .post包装在一个保护性的'if！= undefined'块中，并使用else语句在一个间隔后调用该函数。

(some pseudo code): （一些伪代码）：

if (myDiv is not undefined) { do stuff } else { setInterval(thisSameFunction, 2000); if（myDiv未定义）{do stuff} else {setInterval（thisSameFunction，2000）; } }

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-06-06 18:15:03

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-06-06 18:15:03

解决方案1
0 已采纳 2016-06-06 18:15:03