CODEWITHSUNDEEP
jqueryjtemplates
Kagawa
Kagawa

Reputation: 1359

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.

Upvotes: 0

Views: 928

Answers (3)

Gayan Hewa
Gayan Hewa

Reputation: 2397

I had a similar requirement to update content when the new records are added. I figure that the issue was with the $("#TemplateResultsTable2").html(); becomes null after a template gets executed. So the work around I came is to store the template in a global variable and then re-use that to render the new template.

<script type="text/javascript">
var t = null;
var template_render = function(content) {
    content = $.parseJSON(content);
    var data = {
        table:content
    }                
    var x = $("#TemplateResultsTable2").html();
    // console.log(x);
    //console.log(data);
    $('div#table-jtemplates').setTemplate(x);    
    $('div#table-jtemplates').processTemplate(data);          
}

//View attribute
var view = function(){
    $.ajax({            
        url: 'viewattributes',
        type:"POST",
        success: function(content) {
            t = $("#TemplateResultsTable2").html();
            template_render(content);            
        }    
    })
}

var add = function(x){      
    $.ajax({            
        url: 'addattributes',
        type:"POST",
        success: function(content) {     
            content = $.parseJSON(content);
            var data = {
                table:content
            }                
            //  var x = $("#TemplateResultsTable2").html();
            $('div#table-jtemplates').setTemplate(x);    
            $('div#table-jtemplates').processTemplate(data);     
        }            
    })      
}

var remove = function(){
    $.ajax({            
        url: 'removeattributes',
        data:{id:"1"},
        type:"POST",
        success: function(content) {
            alert(content);
            content = $.parseJSON(content);
            var data = {
                table:content
            }                
            //  var x = $("#TemplateResultsTable2").html();
            $('div#table-jtemplates').setTemplate(x);    
            $('div#table-jtemplates').processTemplate(data);     
        }
    })
}

//view
$(document).ready(function(){
    $("#save").live("click",function(){
        var tmpl = $("#TemplateResultsTable2").html();
        add(t);
    })
})
view();
</script>

Upvotes: 0

JTew
JTew

Reputation: 3189

Data-binding would be the other alternative.

KnockoutJs would automatically update the "content" in question when the model was updated.

You would still need to determine the updates and identify the row in the model but Knockout would get past re-rendering the entire template again.

Upvotes: 0

Kagawa
Kagawa

Reputation: 1359

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

Upvotes: 0

Related Questions