ajax 请求后重新加载 dojo 小部件答案

【问题标题】：Reload dojo widgets after ajax requestajax 请求后重新加载 dojo 小部件
【发布时间】：2011-08-27 13:17:21
【问题描述】：

我是这个话题的新手。我有 div 里面有一些 dojo 小部件。我使用 ajax 重新加载此 div，但在此之后我的 dojo 小部件不显示。如何让我的浏览器在 ajax 请求后再次重新加载小部件。我不想重新加载整个页面。

我的 ajax 视图部分：

<div dojoType="dijit.layout.BorderContainer" gutters="true" id="borderContainerTwo">
<?php foreach($wynik as $row): ?>
    <div dojoType="dijit.layout.ContentPane" region="center" splitter="false">
       <p id="category"><img src="/photo/category/<?php echo $row->idPropozycji;?>.jpg" width="100" height="130" style="float: left;"></p>
       <?php echo $row->opis; ?>
    </div>

    <div dojoType="dijit.layout.AccordionContainer" id="leftAccordion" region="leading" splitter="true">
        <div dojoType="dijit.layout.AccordionPane" title="Title">
          <h3><?php echo $row->nazwa2; ?></h3>
        </div>

        <div dojoType="dijit.layout.AccordionPane" title="Place">
           <?php echo  $row->place;?>   
        </div>

   </div>           
 <?php endforeach;?>
 </div>

重新加载 JQuery 脚本：

// Functon to Show out Busy Div
function showBusy(){
$('#ajax-content').block({
    message: '<h1>Wczytuje dane</h1>',
    css: {border:'3px solid #FFF'}
});
}

function updatePage(html){

window.setTimeout( function(){
    $('#ajax-content').html(html);
}, 2000)


 } 


 $(document).ready(function() {

// $.AJAX Example Request
$('.ajax-pag > li a').live('click', function(eve){
    eve.preventDefault();

    var link = $(this).attr('href');
    console.log(link);
    $.ajax({
        url: link,
        type: "GET",
        dataType: "html",
        beforeSend: function(){
            showBusy();
        },  
        success: function(html) {
            updatePage(html);
        }
        });


 });    


 });

【问题讨论】：

我建议一次只使用一个框架。考虑将 xhrGet 和 xhrPost 用于 Ajax 请求。您是否使用 Firebug 进行调试？我强烈推荐使用它。

标签： jquery dojo

【解决方案1】：

这是因为从服务器返回的 HTML 片段中的小部件需要先进行解析，然后才能显示在页面中。在您的主页中，您可能有如下代码：

<script type="text/javascript" src="../javascripts/dojo1.6/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>

配置parseOnLoad: true表示页面加载后dojo会自动解析整个页面。当您使用 XHR 从服务器获取另一个 HTML 片段时，情况并非如此。在这种情况下，您需要手动解析小部件。

使用dojo.parse.parse 函数解析DOM 节点树。所以你需要做的就是在将 HTML 片段添加到页面后调用这个函数。例如，

$('#ajax-content').html(html);    
dojo.parser.parse(dojo.byId('ajax-content'));

您需要注意的一件事是确保在页面再次更新之前已销毁小部件以避免内存泄漏。 dojo.parser.parse 函数返回一个包含所有已解析小部件对象的数组。所以在页面再次更新之前，可以迭代这个数组，销毁这些widget。

//Save the last parsed result
var widgets = dojo.parse.parse();

//Before update
if (widgets) {
    widgets.forEach(function(widget) {
        widget.destroyRecursive();
    });
}

【讨论】：