Question

我正在通过el将另一个页面加载到XHR。加载的页面上有js，抛出错误并失败，除非在页面上加载了所需的dom元素。因为它是XHR .ready等。人。不行。

我有500毫秒的超时工作，但那不行;一定有更好的方法。使用超时时，dom el并不总是加载并且页面失败。

页面上有一个用id进行硬编码的表格。页面中的脚本是一个jquery插件（datatables），除非加载了表，否则不会初始化。

我已经考虑过有一个函数可以在数据表中填充并重复调用while $('#tableID') null但不确定是否正确。

<div id="contactQueue">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="contactsQueueTable">
    <thead>
        <tr>
            <th class="" rowspan="1" colspan="1" style="width: 185px; ">Contact Name</th>
            <th class="" rowspan="1" colspan="1" style="width: 148px; ">Bus. Name</th>
            <th class="" rowspan="1" colspan="1" style="width: 116px; ">Is Client</th>
            <th class="" rowspan="1" colspan="1" style="width: 165px; ">Remove</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
</div>
<?php echo form_open('',array('id'=>'step2form','name'=>'step2form'));?>
<input type="hidden" name="clientID" value="<?php echo $clientID; ?>">
<?php echo form_close();?>


<script type="text/javascript" charset="utf-8">
console.log(jq('#currentContactsTable'))
while(jq('#currentContactsTable').html()==null){
    initXHRPage();
    console.log(jq('#currentContactsTable')+' not ready');
}
function initXHRPage(){
    //init tables stuffs
}

EDIT;

问题是别的，有点儿。 Datatables的脚本正在通过getScript()加载。该元素正常加载，但是在{em> initDatatables() 加载完成之前getScript()已触发，而不是在加载el之前。

解决方案是在initDatatables()成功回调中调用getScript()函数：

<script type="text/javascript" charset="utf-8">
var jsf = '/js/jquery.dataTables.js';
jq.getScript(jsf, function(data, textStatus){
    console.log('Loaded:'+jsf+" From: <?php echo $this->uri->uri_string(); ?>");
    initDatatable();
});
</script>

Answer 1

你试过$(el).ready(...)吗？这肯定应该奏效。如果不是，就会出现其他问题。

<小时/> 的修改

抱歉，原来应该是$("#your_xhr_loaded_content").ready()...。

我一直在做这类事情并且它有效，我认为关键是我我加载文件。

主要HTML文档，index.html：

    ...
    <body>
        ...
        <div id="activity_content">
        </div>
        ...
        <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
    </body>
</html>

main.js：

...

function ruleManagement.loadContent() {
    $.ajax({
        url: "subdocs/ruleMgmt.html",
            cache: false,
            success: function(html) {
                $("#activity_content").html(html);
            }
    }
}

ruleManagement.onReady = function(event) {
    // Init contents of the rule_management_pane
    ...
}

HTML子文档，ruleMgmt.html

<div id="rule_management_pane">
    <!-- Content here -->
    ...
</div>
<script type="text/javascript" language="JavaScript">
    jQuery("#rule_management_pane").ready(ruleManagement.onReady);
</script>

如果我调用ruleManagement.loadContent()，则在成功加载div＃rule_management_pane之后调用ruleManagement.onReady()。我不能肯定地说在将＃rule_management_pane插入#activity_content之前调用了onReady，但我认为情况确实如此。

Answer 2

我如何理解您的html / js正在加载：

containerPage - ＆gt; $获得（/ajax/getMiddlePage.php）
中间XHR页面 - ＆gt; $获得（/ajax/getContactQueue.php）
中间XHR页面 - ＆gt; $获得（/ajax/getCurrentContactsTable.php）

粗糙。好的，这就是我认为你需要的东西：

<html>
<!---CONTAINER PAGE--->
<head>
    <script type="text/javascript">
    //this .ready is to register events we need to catch the '#currentContactsTable' load event
    $(document).ready(function(){
    //ajaxSuccess is a global ajax function, you need to check ajaxOptions object to ensure you have the correct 'ajaxSuccess' you thought you did.
      $.ajaxSuccess(function(event, XMLHttpRequest, ajaxOptions){
        if (ajaxOptions.url == '/ajax/getCurrentContactsTable.php') {
          $('#currentContactsTable').trigger('initDataTables');
        }
      });
// .live() does not need the element to exist on document.ready()
      $('#currentContactsTable').live('initDataTables', function(event){
          var dataTables = $(this).datatables({options:here});
      });
    });
    </script>
</head>
<body></body>
</html>

Answer 3

这就是我想出的。向受访者寻求帮助。

initPage();

function initPage(){
    if(jq('#currentContactsTable').length==1){
            initDatatable();
    }else{
            window.setTimeout(function(){
                    initPage();
            },250);
    }
}

function initDatatable(){
    jq('#currentContactsTable').dataTable( {
            //REST OF DATATABLE STUFF...

它可能不是超级漂亮，因为它仍然依赖于超时，但至少这个超时它更健壮......

^^^^ BZZZZZZZZZ

问题是别的，有点儿。 Datatables的脚本是通过getScript（）加载的。该元素正常加载，但initDatatables（）在getScript（）加载完成之前触发，而不是在加载el之前。

解决方法是在getScript（）成功回调中调用initDatatables（）函数：

<script type="text/javascript" charset="utf-8">
var jsf = '/js/jquery.dataTables.js';
jq.getScript(jsf, function(data, textStatus){
    console.log('Loaded:'+jsf+" From: <?php echo $this->uri->uri_string(); ?>");
    initDatatable();
});
</script>

继续尝试功能，直到加载所需的DOM元素

3 个答案: