Home/ Questions/Q 3622550
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T23:16:26+00:00

I’m trying to load content into a Dojo content pane in a specific html

  • 0

I’m trying to load content into a Dojo content pane in a specific html tag and not replace the entire content pane. The html I’m loading includes a markup defined widget that I’d like to have rendered when the new row is loaded.

So, I have a table that is being dynamically filled via ajax,ie:

<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>

How do I render the Dojo widget in the new table row?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The ContentPane will render widgets in content set using setContent. You can, as mentioned, also point the dojo parser to a specific DOM node after you’ve added nodes with dojoType. But if you’re doing everything in code, why not use the programmatic approach instead of the declarative?

    Using your example this becomes,

    <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>

    If you’re using Dojo anyway, you can also you dojo.query instead of jQuery to locate and manipulate nodes. Ex,

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