在ajax请求后重新加载dojo小部件 [英] Reload dojo widgets after ajax request
问题描述
我的ajax视图部分：
< div dojoType =dijit.layout.BorderContainergutters =trueid =borderContainerTwo>
<？php foreach（$ wynik as $ row）：？>
< div dojoType =dijit.layout.ContentPaneregion =centersplitter =false>
< p id =category>< img src =/ photo / category /<？php echo $ row-> idPropozycji;？> .jpgwidth =100height = 130style =float：left;>< / p>
<？php echo $ row-> opis; ？>
< / div>
< div dojoType =dijit.layout.AccordionContainerid =leftAccordionregion =leadingsplitter =true>
< div dojoType =dijit.layout.AccordionPanetitle =Title>
< h3><？php echo $ row-> nazwa2; ？>< / H3>
< / div>
< div dojoType =dijit.layout.AccordionPanetitle =Place>
<？php echo $ row-> place;？>
< / div>
< / div>
<？php endforeach;？>
< / div>
重新加载JQuery脚本：
// Functon来显示繁忙的div
function showBusy（）{
$（'＃ajax-content'）。block（{
message：'< h1> Wczytuje dane< / h1>'，
css：{border：'3px solid #FFF'}
}）;
}
函数updatePage（html）{
window.setTimeout（function（）{
$（'＃ajax-content'）.html （html）;
}，2000）
}
$（document）.ready（function（）{
// $ .AJAX示例请求
$（'。ajax-pag> li a'）。live（'click'，function（eve）{
eve.preventDefault ）;
var link = $（this）.attr（'href'）;
console.log（link）;
$ .ajax（{
url ：
成功：function（html）{
updatePage（html）;
}
}）;
}）;
}）;
这是因为HTML片段中的小部件从首先需要解析服务器，然后才能在页面中显示。在主页中，您可能有如下代码：
< script type =text / javascriptsrc =。 ./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 函数返回所有解析的小部件对象的数组。所以在页面再次更新之前，你可以重复这个数组并销毁这些小部件。
//保存最后解析的结果
var widgets = dojo.parse.parse（）;
//更新前
if（widgets）{
widgets.forEach（function（widget）{
widget.destroyRecursive（）;
}） ;
}
I am newbie in this topic. I have div with some dojo widgets inside. I use ajax to reload this div, but after this my dojo widgets doesn't show. How can i make my browser to reload the widgets again after ajax request. I don't want to reload whole page.
My ajax view part:
<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>
Reload JQuery script:
// 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);
}
});
});
});
This is because the widgets in the HTML fragment returned from server needs to be parsed first before it can be shown in the page. In your main page, you probably have code like below:
<script type="text/javascript" src="../javascripts/dojo1.6/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
The configuration parseOnLoad: true means dojo parses the entire page automatically after the page is loaded. This is not true when you use XHR to get another HTML fragment from the server. You need to parse the widgets manually in this case.
Use dojo.parse.parse function to parse a DOM node tree. So what you need to do is to invoke this function after the HTML fragment is added to the page. For example,
$('#ajax-content').html(html);
dojo.parser.parse(dojo.byId('ajax-content'));
One thing you need to note is to make sure the widgets have been destroyed before the page is updated again to avoid memory leak. dojo.parser.parse function returns an array of all the parsed widgets' object. So before the page is updated again, you can iterate this array and destroy these widgets.
//Save the last parsed result
var widgets = dojo.parse.parse();
//Before update
if (widgets) {
widgets.forEach(function(widget) {
widget.destroyRecursive();
});
}
这篇关于在ajax请求后重新加载dojo小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
