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

2024-03-24

我是这个主题的新手。我有 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);
        }
        });


 });    


 });

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

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

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

Use dojo.parse.parse解析 DOM 节点树的函数。因此,您需要做的就是在 HTML 片段添加到页面后调用此函数。例如,

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

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

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

//Before update
if (widgets) {
    widgets.forEach(function(widget) {
        widget.destroyRecursive();
    });
} 
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ajax 请求后重新加载 dojo 小部件 的相关文章

随机推荐