Why isn't the appendTo method found in my jQuery script?

359 Views Asked by At

I am using JQuery template feature to render my template in the html file. I have loaded the libraries by:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<script src="../static/js/Dashboard.js"></script>

when i call the empty method on the element followed by $(...).tmpl(...).appendTo, it displays nothing and gives the error:

TypeError: $(...).tmpl(...).appendTo is not a function

However if i use innerHTML or manually set the variable as an empty string it shows the old data as well as the updated data.

Can you tell me whats wrong with my code:

(function(){
GetList();

$('#btnUpdate').click(function() {
$.ajax({
    url: '/updateList',
    data: {
        title: $('#editTitle').val(),
        description: $('#editDescription').val(),
        id: localStorage.getItem('editId')
    },
    type: 'POST',
    success: function(res) {
        $('#editModal').modal('hide');
        // Re populate the grid
        GetList();
    },
    error: function(error) {
        console.log(error);
    }
});
});
});

function GetList() {
$.ajax({
    url: '/getList',
    type: 'GET',
    success: function(res) {
        var listObj = JSON.parse(res);
        $('#ulist').empty();
            // var list = '';
        $('#listTemplate').tmpl(listObj).appendTo('#ulist');

    },
    error: function(error) {
        console.log(error);
    }
});
}

Upon entering the new data when the update button is clicked, this new data should be updated in the html template

1

There are 1 best solutions below

0
Brian Mains On

Following an example from this documentation:

$.tmpl( $("#listTemplate").html(), listObj ).appendTo( "#target" );

Essentially as an outline:

$.tmpl( myTemplate, myData ).appendTo( "#target" );

Where the first parameter is a template as a string, second param is your json object, and then the results are appended that way.