Reload a DOM element using MindTouch.Deki.Reload()

This page is designed to demonstrate the MindTouch.Deki.Reload() function in the DekiAPI extension.

The MindTouch.Deki.Reload() and other functions contained in the MindTouch.Deki.js file require the Deki API ajax extension.

Click the buttons to reload the various portions of the example table. The top row contains a randomly-generated Venn diagram from Google Charts. The second contains the number of seconds that have passed since the page was last edited. Note the different behaviors displayed when the elements are reloaded.

The image, when reloaded, causes the entire table to move. This happens because the row resizes first when the image is being called for, then once again when the image is retrieved.

The bottom row does not resize in this example, because it happens so quickly.

The code:

dekiapi(); 
<table id="wholetable" class="table">
        <tbody>
            <tr>
                <th>"Example Table";</th>
            </tr>
            <tr id="toptr">
                <td>
                    web.image('http://chart.apis.google.com/chart?chs=245x145&cht=v&chd=t:' .. num.int(num.random()*100) ..',' .. num.int(num.random()*100) ..',' .. num.int(num.random()*100) ..',' .. num.int(num.random()*100) ..',' .. num.int(num.random()*100) ..',' .. num.int(num.random()*100));
                </td>
            </tr>
            <tr id="bottomtr">
                <td>
                    "Seconds Since This Page's Last Edit";
                    <br />
                    date.diffSeconds(page.revisions[-1].date, date.now);
                </td>
            </tr>
       </tbody>
    </table>
    <input type="button" class="btn" id="reloadTop" value="Reload Top Row" ctor="when($this.click){
        MindTouch.Deki.Reload(#toptr);
    }"/>
    <input type="button" class="btn" id="reloadBottom" value="Reload Bottom Row" ctor="when($this.click){
        MindTouch.Deki.Reload(#bottomtr);
    }"/>
    <input type="button" class="btn" id="reloadWholeTable" value="Reload Entire Table" ctor="when($this.click){
        MindTouch.Deki.Reload(#wholetable);
    }"/>