Updating a <span> with jQuery not working

3 posts, 0 answers
  1. Markus
    Markus avatar
    205 posts
    Member since:
    Nov 2005

    Posted 07 Nov 2013 Link to this post

    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());
    window.localStorage.setItem("prayerCount", dataSource_prayers.total());

    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


    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
            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({
                    url: URL,
                        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) {
                    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());
                window.localStorage.setItem("prayerCount", dataSource_prayers.total());
                return dataSource_prayers;
            else {
                var noData = "no prayers for today";

    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.



  2. Steve
    Steve avatar
    10941 posts

    Posted 11 Nov 2013 Link to this post

    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.

    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.
  3. Markus
    Markus avatar
    205 posts
    Member since:
    Nov 2005

    Posted 12 Nov 2013 Link to this post

    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.


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