[Solved] Refresh Datasource & Template

[Ashleigh L]

I'm using a datasource and a template to create a kind of mini-discussion forum. The idea is that users can leave comments/posts on an item, as well as edit/delete them etc. Right now I have it that when a comment is added/edited/deleted, the whole page is being refreshed in order to show the changes. Since this is also part of a SPA, this isn't ideal. I was trying to do a read on the datasource on a successful add/edit/delete, but it didn't change the data onscreen.

Template:

<script id="discussion_template" type="text/x-kendo-template">
    <div class="col-xs-12 disc-comment">
        <div class="disc-nav"><img src="#= data.Photo #" title="#= data.Poster #" /></div>
        <div class="overflow-hidden">
            <div id="display_comment_#= data.CommentID #">
                <p class="blue">#= data.Poster #</p>
                <!--- need to replace the textarea new line chars w/ br tags for proper display --->
                # var formatted_text = data.Text.replace(/(?:\r\n|\r|\n)/g, '<br />'); #
                <p>#= formatted_text #</p>
                <p class="small text-muted">
                    #= data.Created #
                    # if (data.Editable) { #
                        <a href="javascript:;" onclick="editComment(#= data.CommentID #);">Edit</a>
                    # } #
                    # if (data.Editable || data.IsAdmin) {#
                        <a href="javascript:;" onclick="deleteComment(#= data.AURID #, #= data.CommentID #);">Delete</a>
                    # } #
                </p>
            </div>
            # if (data.Editable) { #
                <div id="edit_comment_#= data.CommentID #" style="display: none;">
                    <textarea id="comment_#= data.CommentID#" class="form-control input-sm comment-autogrow" rows="1">#= data.Text #</textarea>
                    <a id="add_comment_#= data.CommentID #" class="btn btn-default" data-commentid="#= data.CommentID #">
                        <i class="fa-icon-plus"></i>
                    </a>
                    <a href="javascript:;" onclick="cancelEdit(#= data.CommentID #);">Cancel</a>
                </div>
            # } #
        </div>
    </div>
</script>

JS:

$(document).ready(function() {
    $('#add_comment').click(function(){
        //main add comment button, no comment ID
        var comment_id = 0;
        var text = $('#comment').val();

        addEditComment(comment_id, text);
    });

    $('#refresh').click(function(){
        location.reload(true);
    });
});

function generateDiscussionView(container_id) {
    var template_html = $('#discussion_template').html();
    var template = kendo.template(template_html, {useWithBlock: false});

    var datasource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/Discussions.cfc?method=getDiscussion",
                type: "get",
                dataType: "json",
                data: {
                    ContainerID: container_id
                }
            }
        },
        schema : {
            type: "json",
            data: "Comments"
        }
    });

    datasource.bind("change", function() {
        var view = datasource.view();
        var html = "";

        html = kendo.render(function(data) {
            return template($.extend(data, {IsAdmin: is_admin, AURID: aur_id}));
        }, view);

        $('#discussion_display').html(html);
    });

    datasource.read().then(function() {
        var data = datasource.data();
        data = data[0];

        global_container_id = container_id;

        //bind the edit buttons
        $('a[id*="add_comment_"]').click(function(){
            //add comment button for each edit form
            var comment_id = $(this).data("commentid");
            var text = $('#comment_' + comment_id).val();

            addEditComment(comment_id, text);
        });
    });
}

function addEditComment(comment_id, text) {
    if (text.length == 0) {
        alert('temp error - no comment text entered');
    }
    else {
        var comment_data = {};

        comment_data["AURID"] = aur_id;
        comment_data["ContainerID"] = global_container_id;
        comment_data["CommentID"] = comment_id
        comment_data["Text"] = text;

        $.ajax({
            type: "POST",
            url: '/Discussions.cfc?method=addEditComment',
            processData: true,
            dataType: 'json',
            data: {
                CommentData: JSON.stringify(comment_data)
            },
            success: function(data){
                location.reload(true);
            },
            error: function(xhr, textStatus, errorThrown){
            }
        });
    }
}

function deleteComment(poster_id, comment_id) {
    var comment_data = {};

    comment_data["PosterID"] = poster_id;
    comment_data["CommentID"] = comment_id;

    $.ajax({
        type: "POST",
        url: '/Discussions.cfc?method=deleteComment',
        processData: true,
        dataType: 'json',
        data: {
            CommentData: JSON.stringify(comment_data)
        },
        success: function(data){
            location.reload(true);
        },
        error: function(xhr, textStatus, errorThrown){
        }
    });
}

function editComment(comment_id) {
    //hide the display div and show the edit div
    $('#display_comment_' + comment_id).hide();
    $('#edit_comment_' + comment_id).show();
}

Sample data:

{"Comments":[{"CommentID":23,"Created":"2016-06-28 14:06:47","Text":"New comment test 1","Photo"
:"/Photo/42C43CDE1353C9BEB9B78D7D2B338C6D06229.jpg","Editable":1,"Poster":"Ashleigh
 Lodge"},{"CommentID":24,"Created":"2016-06-28 14:06:08","Text":"New comment test 2"
,"Photo":"/Photo/42C43CDE1353C9BEB9B78D7D2B338C6D06229.jpg","Editable":1,"Poster"
:"Ashleigh Lodge"}]}

 

I know I'll need to make the datasource a global variable, but as I said above, doing that and then doing a read on it in the places where I currently have location.reload() didn't work as expected.

[Stefan]

Hello shimmoril,

I was not able to replicate an issue with the Kendo UI DataSource, related to data not being refreshed after calling the read() method.

I can suggest checking the CRUD operations of the Kendo UI DataSource as I can see that custom functions are used for Update and Delete:

http://docs.telerik.com/kendo-ui/framework/datasource/crud

In other words, it may be more convenient to integrate the creation, updates and deletion of comments/posts with the native DataSource CRUD functionality.

Also, the read() method is triggering the change event of the DataSource by design. Please test if the change event is triggered after the datasource.read() is called and the new data is returned. This can help isolating the issue. You may also want to check if the server response actually contains the new data.

If this does not help to resolve the issue, please send a runnable example so we can investigate it further.

Regards,
Stefan
Telerik by Progress

 

 

[Ashleigh L]

I think you misunderstood my question. It's not about whether the datasource data is refreshed on a read, it's how to reload the template during/after the read so that the changes are displayed.

I have checked, and yes, the change event in the datasource is being triggered, and the server does have the new comment. Again, it's not an issue w/ the datasource, it's an issue w/ the template (which is why I posted to this forum).

I'm aware of the CRUD functionality of the datasource, and we may move in that direction in the future, but for now we need to get this working as-is.

[Stefan]

Hello shimmoril,

Apologies for the misunderstanding, but without a runnable example I was trying to analyze where the issue may be coming from, with the DataSource being the first step.

Can you please debug the dataSource change handler and verify the following:

- dataSource.view() returns the correct new data
- the generated markup in the "html" variable is consistent with the new data

- also verify there is only one element on the page with an ID of "discussion_display"

In order to assist you further and make a deeper investigation of the issue, we will need a runnable Dojo or an isolated solution that reproduces the issue.

Regards,
Stefan
Telerik by Progress