Updating a <span> with jQuery not working

[Markus]

I am about to go nuts and pulling my hair out.

I have an application where I get records from an SQL Server and want to display the number of records in a <span> 

I tried about everything and somehow it seems the <span> gets updated but the updates do not reflect on the UI.

The below part it what puzzles me.

alert( $('#prayerCount').text());
console.log(dataSource_prayers.total());
window.localStorage.setItem("prayerCount", dataSource_prayers.total());
$('#prayerCount').text(window.localStorage.getItem("prayerCount"));

If I alert the text of the span it will alert the updated number or records (so I know that jquery is correct to get to the <span>
the console.log will write the correct updated number of records
the setItem will set the correct updated number

However the

$('#prayerCount').text(window.localStorage.getItem("prayerCount"));
or
$('#prayerCount').text(dataSource_prayers.total());

do not reflect the changes.

---------------------------------

I thought it has to do with either AJAX or the page part reloading

function updatePrayers(PID) {
    //now we set the next prayer date
    app.application.showLoading();
    $.ajax({
        url: 'https://icenium.mydomain.com/api/T_dpd_prayers/UpdatePrayer',
        type: 'PUT',
        contentType: "application/json",
        data: JSON.stringify({
            PID: PID,
            dpdID: window.localStorage.getItem("dpdID"),
            uPasswort: window.localStorage.getItem("uPasswort"),
            uEmail: window.localStorage.getItem("uEmail"),
            Login : false
        })
    }).done(function() {
        //now we update the list
        dataSourcePrayers(window.localStorage.getItem("dpdID"), window.localStorage.getItem("uEmail"), window.localStorage.getItem("uPasswort"), false);
    });


}

dataSourcePrayers = function(dpdID, uEmail, uPasswort, Login) {
    var URL = "https://icenium.mydomain.com/api/T_dpd_prayers/GetPrayersForUser?dpdID=" + dpdID + "&uPasswort=" + encodeURIComponent(uPasswort) + "&uEmail=" + uEmail + "&Login=" + Login;
    var dataSource_prayers = new kendo.data.DataSource({
        transport:{
            read:{
                url: URL,
                data:{
                    Accept: "application/json"
                }
            }
        }
        ,
        schema: {
            model: {
                id: "myVerses",
                fields: {
                    PID :{},
                    PTitel :{},
                    PText : { },
                    PNextPrayerDate: {  },
                    total: "total",

                }
            }
        }
        ,
        sort: {
            field: "PNextPrayerDate",
            dir: "DESC"
        },


        /* serverPaging: true,
        serverSorting: true,
        pageSize: 2,*/

        requestEnd: function(e) {
            dataSource_prayers.bind('error', dataSource_error);
        },
        error: function(e) {
        }


    });

    dataSource_prayers.fetch(function() {
        var data = this.data();
        if (data.length > 0) {
            $("#userPrayers").kendoMobileListView({
                dataSource: dataSource_prayers
                , template: "<div class='prayer_title'><br />${PTitel}</div><div class='prayer_text'>${PText}<br/><div class='prayer_button_wrapper'><a  onclick='updatePrayers(${PID})'><span  class='prayer_button' ></span></a></div></div>"

            });

            //I would acutally like to show the number of records - but its noot working!!
            //tried everywhere - Logo shows correct number but #prayerCount just not updating :-(
            // even this shows correct
            // alert( $('#prayerCount').text());

            console.log(dataSource_prayers.total());
            window.localStorage.setItem("prayerCount", dataSource_prayers.total());
            $('#prayerCount').text(window.localStorage.getItem("prayerCount"));

            $('#has-prayers').show();
            $('#no-prayers').hide();

            return dataSource_prayers;
        }
        else {
            var noData = "no prayers for today";
            app.application.hideLoading();
            $("#login-error").text(noData);
            $('#has-prayers').hide();
            $('#no-prayers').show();
        }
    });


}

I think I tried to add $('#prayerCount').text(window.localStorage.getItem("prayerCount")); about everywhere.

on device ready it works but of course does not update
I tried in requestEnd of the function
and placed it about everywhere.


-----------

HEEEELP  

Markus

[Steve]

Hi Markus,

We do not have your html markup, but according to your explanation (the records are there) and javascript (which uses id selector), we have a suspicion what might be happening. The id selector finds only the first element with the specified ID, so if you're using a shared markup for several views you would have n number of spans, where n is the number of your views. Such problems are usually resolved by using class selector instead.

If that is not the case, it would be best to prepare a simple jsbin.com sample that exhibits the problem, so we or other users can advise you.

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.

[Markus]

Dear Steve 

You made just 100 out of 100 point. Comming from .net development where usuall two controls can not have the same ID I never thought about this.

The span was in the header and exactely what you described seemed to have happend.

Case closed another thing learned. 

Thanks for the outstanding analysis of my short comming.

Markus

PS: There is still so much to learn for me in this new aerea.