2010-12-29 13 views
1

Ich versuche, Inhalte in einem Dojo-Inhaltsbereich in einem bestimmten HTML-Tag zu laden und nicht den gesamten Inhaltsbereich zu ersetzen. Die HTML-Datei, die ich lade, enthält ein markupdefiniertes Widget, das beim Laden der neuen Zeile gerendert werden soll.Dojo und Ajax - Widgets zum Rendern

Also, ich habe eine Tabelle, die dynamisch über Ajax gefüllt wird, das heißt:

<body> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" 
    djConfig="parseOnLoad: true, isDebug:true"></script> 
    <div id="table-pane" dojoType="dijit.layout.ContentPane"> 
    <table class="test"> 
     <tbody> 
     <tr><td>Name</td><td>Year</td><td>Age</td></tr> 
     <tr> 
      <td><span dojoType="dijit.InlineEditBox" editor="dijit.form.Textarea">Mike</span> 
      </td> 
      <td>2010</td> 
      <td>12</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</body> 

<script> 
var html ='<tr><td><span dojoType="dijit.InlineEditBox" editor="dijit.form.Textarea">John</span></td><td>2011</td><td>22</td></tr>'; 
dojo.require("dijit.layout.ContentPane"); 
dojo.require("dijit.InlineEditBox"); 
dojo.require("dijit.form.Textarea"); 
dojo.addOnLoad(function(){ 
    pane = dijit.byId("table-pane"); 
    add_elem(); 
}); 
function add_elem(){ 
    var node = $(".test tr:last"); 
    node.after(html); 
    dojo.addOnLoad(function(){ 
    //Here I want to initiate any widgets that haven't been initiated 
    pane.buildRendering(); 
    }); 
}</script> 

Wie mache ich den Dojo-Widget in der neuen Tabellenzeile?

Antwort

3

Das ContentPane rendert Widgets im Inhalt, der unter Verwendung setContent festgelegt wird. Sie können, wie bereits erwähnt, den Dojo-Parser auch auf einen bestimmten DOM-Knoten richten, nachdem Sie Knoten mit dojoType hinzugefügt haben. Aber wenn Sie alles im Code machen, warum nicht den programmatischen Ansatz anstelle des deklarativen verwenden?

Ihrem Beispiel Mit diesem wird,

<html> 
    <body> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" 
     djConfig="parseOnLoad: true, isDebug:true"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

    <div id="table-pane" dojoType="dijit.layout.ContentPane"> 
     <table class="test"> 
     <tbody> 
      <tr><td>Name</td><td>Year</td><td>Age</td></tr> 
      <tr> 
      <td><span dojoType="dijit.InlineEditBox" editor="dijit.form.Textarea">Mike</span> 
      </td> 
      <td>2010</td> 
      <td>12</td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 

<script> 
var html ='<tr><td><span id="target">John</span></td><td>2011</td><td>22</td></tr>'; 
dojo.require("dijit.layout.ContentPane"); 
dojo.require("dijit.InlineEditBox"); 
dojo.require("dijit.form.Textarea"); 
dojo.addOnLoad(function(){ 
    var node = $(".test tr:last"); 
    node.after(html); 
    new dijit.InlineEditBox({ 
     editor: "dijit.form.Textarea", 
     autoSave: true 
     }, dojo.byId('target')); 
}); 
</script> 

    </body> 
</html> 

Wenn Sie Dojo verwenden sowieso, können Sie auch dojo.query Sie anstelle von jQuery Knoten zu lokalisieren und zu manipulieren. Ex,

dojo.query(".test tr:last-child"); 
+0

Ich hatte Probleme mit der Verwendung von dojo.parser.parse(). Als ich die Funktion mehrmals anrief, versuchte sie, neue textAreas mit Widget-IDs zu instanziieren, die bereits auf der Seite verwendet wurden. –

+0

Sieht so aus, als ob mein Problem darin bestünde, dass der Selektor ein Widget, das bereits zum Rendern gerendert wurde, falsch auswählt. –

0

sollte dies helfen: dojo.parser.parse(domnode?)

Aber ich denke, bestimmte Widgets wie die dijit.layout.ContentPane das geladene dom-Fragment autoparse. Die enthaltenen Widgets müssen vorher dojo.required sein!