Reload dojo widgets after ajax request

Question

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


 });    


 });

Answer 1

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();
    });
}