Search code examples
jqueryjtemplates

jTemplates (jQuery Plugin) - Updating row data

Say I have a jTemplate like this, that iterates thru the list of an object:

{#template MAIN}
    {#foreach $T.Results as result}
        {#include content root=$T.result}
    {#/for}
{#/template MAIN}

{#template content}
    <div>
        <span>ID : {$T.result.id}</span>
        <span>Name : {$T.result.name}</span>
        <span>Price : {$T.result.price}</span>
        <button onclick="update(this);"><span>Edit</span></button>
        <!-- Opens modal form to edit data -->
    </div>
{#/template content}

How do I go about updating the row without rendering the whole template after user changed the data of a particular row?

What I want to achieve here is to make a call to db using AJAX to retrieve the latest data of the affected row. And re-render only that row instead of reloading the whole page. Hope my question is clear.

Solution

  • ok, so this is what i came up with..

    var templates = $.createTemplate($('#MyTemplates').html())._templates; 
// Find the DIV to render 
var $target = $('#content_' + data.d.ContentId).parent("div");  
$target.setTemplate(templates['content']);   
$target.processTemplate(data.d);

    This may not be best solution but it works. Do post if you have cleaner solution to this. Thanks ;)