How can I update underlying JSViews data from onclick event

Question

I have a photogallery produced from a JSViews template with an upvote and downvote button. The OnClick triggers a database update to increment the underlying score. I also need to increment the Score field in the HTML rendered in the page so that it is consistent with the new values in the database.

The code below is my first attempt, but it doesn't work. How could I achieve this?

     <script type="text/x-jsrender" id="gallerycat1">
    {{for List}}
    <ul>
        <li data-type="media" data-url="{{:MainImage}}"></li>
        <li data-thumbnail-path="{{:Thumbnail}}"></li>
        <li data-thumbnail-text>
            <p  data-link="Score"  class="largeLabel"><span id="span-a-{{:ProfileId}}">{{:Score}}</span> {{:FirstName}} {{:LastName}}, {{:Company}}</p>

            <p class="smallLabel">Click to vote.</p>
        </li>
        <li data-info="">
            <div class="voting-buttons">
                <a href="#" data-link="Score" onclick="upVote('<%= userVoted%>',{{:[ImageId]}},1);">
                    <img width="30" src="/client/images_webdev/buttons/heart.png" alt="Upvote this" />
                </a>
                <a href="#"  data-link="Score"  onclick="downVote('<%= userVoted%>',{{:[ImageId]}},0);">
                    <img data-link="Score" width="30" src="/client/images_webdev/buttons/thumbs.png" alt="Downvote this" />
                </a>

            </div>
            <p class="mediaDescriptionHeader"><span data-link="Score" id="scorem">{^{:Score}}</span> {{:FirstName}} {{:LastName}}, {{:Company}}</p>
        </li>
    </ul>
    {{/for}}
</script>

Here's the onClick event for voting

function castVote(userVoted, imageId, vote) {
    jQuery.ajax({
        url: '/client/webservice/voting.asmx/InsertVote',
        type: "POST",
        data: "{'userVoted':'" + userVoted + "','imageId':" + imageId + ",'vote':" + vote + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {
            if (response.d == 'True') {
                var counter = jQuery('#scorem').text();
                if (vote > 0) {
                    counter++;
                } else {
                    counter--;
                }
                jQuery('#scorem').text(counter);
                upVoteConfirm();
            } else {
                downVoteConfirm();
            }
        }
    });

BorisMoore BorisMoore · Accepted Answer · 2014-03-31T17:45:29

I assume you are using JsViews, not just JsRender. Are you calling the link method, or just the render method? The data-link expressions you have above won't work unless you are actually data-linking using JsViews link method.

If you are data-linking, then you need to call $.observable(listItem).setProperty("Score", listItem.Score+1); - and that will automatically update either data-link expressions like <span data-link="Score"></span> or data-linked tags like {^{:Score}}.

See for example http://www.jsviews.com/#jsvplaying, where there are two samples which have "Change" buttons to modify the name property.

How can I update underlying JSViews data from onclick event

1 Answers