Template:Reload Example

dekiapi();

<h3>"This page is designed to demonstrate the MindTouch.Deki.Reload() function in the DekiAPI extension.";</h3>
"The MindTouch.Deki.Reload() and other functions contained in the MindTouch.Deki.js file require the "; web.link('http://developer.mindtouch.com/Deki/Extensions/Deki_AJAX_API', 'Deki API ajax extension'); ".";
<br />
<br />
"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.";
<br />
<br />
"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.";
<br />
<br />
"The bottom row does not resize in this example, because it happens so quickly.";
<br />
<br />
<div id="containerdiv">
    <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(date.now, page.revisions[-1].date);
                </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);
    }"/>
</div>


<style type="text/css">"
#reloadTop {
    margin-left: 18em;
}

#wholetable {
    border: 1px solid #E0E0E0;
}

#wholetable th {
    background-color: #E0E0E0 !important;
    text-weight: bold !important;
}

#wholetable td {
    text-align: center !important;
    border-bottom: 1px solid #E0E0E0 !important;
}


#wholetable tr {
    text-align: center !important;
    border-right: 1px solid #E0E0E0 !important;
}

#containerdiv {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
"</style>

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