2011-08-27 88 views
5

我是這個主題的新手。我有div裏面有一些dojo小部件。我使用ajax來重新加載這個div,但在此之後,我的dojo小部件不顯示。如何讓我的瀏覽器在ajax請求後重新加載小部件。我不想重新加載整個頁面。ajax請求後重新加載dojo小部件

我的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); 
     } 
     }); 


});  


}); 
+0

我推薦一次只使用一個框架。考慮將xhrGet和xhrPost用於Ajax請求。你使用Firebug進行調試嗎?我強烈建議使用它。 – perissf

回答

9

這是因爲,首先需要分析之前就可以顯示它在從服務器返回的HTML片段中的小部件這一頁。在您的主頁上,你可能有類似下面的代碼:

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

配置parseOnLoad: true意味着道場解析頁面加載後自動整個頁面。當您使用XHR從服務器獲取另一個HTML片段時,這不是真的。在這種情況下,您需要手動解析窗口小部件。使用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(); 
    }); 
}