2011-08-27 17 views
5

私はこのトピックで初心者です。私は内部にいくつかの道場ウィジェットでdivを持っています。私はこのdivをリロードするためにajaxを使用していますが、この後に私の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

一度に使用できるフレームワークは1つだけです。 AjaxリクエストにはxhrGetとxhrPostを使用することを検討してください。デバッグに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(); 
    }); 
} 
関連する問題