0

Hello I am trying to update a badge every time a new item is added to the list. I am making an Ajax call to the list and created a function with a counter; I also created a function with a setInterval calling the counter function.

 $(document).ready(function() {

    var badgeContainer = document.getElementById('services');
    //Create counter
    var counter = document.createElement('div');
    counter.setAttribute('id', 'counter');
    counter.classList.add('counter');
    var counterText = document.createElement('p');
    counterText.setAttribute('id', 'counterText');


     $.ajax({
        url: "http://bcnet/Sandbox/juandev/_api/web/lists/GetByTitle('Qlinks')/items",
        method: "GET",
        headers: {
            "Accept": "application/json; odata=verbose"
    },
    success: function(data) {
        var items = data.d.results;
        //console.log(items);


        if (items.length > 0 ) {

        badgeContainer.appendChild(counter);
        counter.appendChild(counterText);

var count = ' ';

        function changeCounter() {
            count++;
            var newCounterText = count;
            counterText.innerHTML = newCounterText;


        }//end changeCounter function   

        changeCounter();

        function newUpdate() {
        update = setInterval(changeCounter, 2000);

    }//endf newUpdate function

    newUpdate();

    }//en if statement

                },
             error: function(data) {
             alert("Error: " + data);
        }
    }); //End Service Icons  //End Service Icons

 }); //End ready function  

 /*setInterval(function() {
  //your jQuery ajax code
}, 1000 * 60 * X); // where X is your every X minutes*/

/*function send(){
    $.ajax({
        type: "get",
        url: "test.php",
        success:function(data)
        {
            //console.log the response
            console.log(data);
            //Send another request in 10 seconds.
            setTimeout(function(){
                send();
            }, 10000);
        }
    });
}
//Call our function
send();*/
0

You have a couple of nested functions that might not be optimized. As you are already using jquery I think you could use something like this for your script editor:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript" src="../SiteAssets/js/test01.js"></script> 
<div id="itemCounter"></div>

And this for the linked test01.js file (makes it easier to edit):

function RefreshCounter() {
$.ajax({
    url: "../_api/web/lists/GetByTitle('Test01')/items",
    method: "GET",
    headers: {
        "Accept": "application/json; odata=verbose"
    },
    success: function(data) {
        var items = data.d.results;
        //console.log(items);

        if (items.length > 0 ) {
            $('#itemCounter').html('\
                <div id="counter">\
                    <p id="counterText">' + items.length + '</p>\
                </div>\
            ');
        }
    }
});    
}

$(document).ready(function() {
  setInterval(RefreshCounter, 2000);
});
  • thanks for your reply @SteveT. I was working on a different script so it compares the current date vs the created date of the item. if there is a new item it will create a badge with the number of new items created. – Juan Angelogianopulos Feb 26 at 13:42
  • So this would probably be a new question. Is this one answered? – Steve T Mar 6 at 19:53
  • this is one is new and has not been answered – Juan Angelogianopulos Mar 8 at 13:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.