I have been searching and trying to understand how to change div's with help of javascript and use of timer, but dont quite get it.

I am working with a API that outputs json. At the moment i have managed to format it with my function, and given each "element" (job) a unique div to live in. What I'm trying to do now is do make a function that uses a timer to shows the content of each div. And it has to do it without any button clicks.

The if statement in my function is there just to limit the output.

My function:

function getAllOrdersAjax() {

    $.get('/api/ordersystem', function(data){

        var orderSystemDataAppendToView = [];
        var i = 0;

        $(data).each(function(key, value){

            //Add's up the products sold to customer
            for(var j = 0 in value['order_products'])
            {
                j++
            }

            //Sends the information to view
            orderSystemDataAppendToView.push('<div id="product' + i + '"><h3> ID: ' + value['customer'].id + '</h3>' + '<p> Kundenavn: ' + value['customer'].name +
                '</p>' + '<p> Selger: ' + value['sold_by'].firstname + ' ' + value['sold_by'].lastname + '</p>' +
                '<p> Antall produkter solgt : ' +  j + '</p>' + '<p> Pris : ' +  value['price'] + '</p>' + '</div>');

            if(i === 10){
                return false;
            }

            i++;
        });

        $('#hei').html(orderSystemDataAppendToView).append();

    })
}

For every job the div gets a id: product0, product1, product2, ....

How can i display these div's one after the other with at set interval in my index file. And how do i call the function then?

Thanks for all the help!

up vote 1 down vote accepted

You just need to loop over the setTimeout() function and use append() directly. Something like:

function getAllOrdersAjax() {

  $.get('/api/ordersystem', function(data){

    var i = 0;
    // We store the element so that we don't look for it at each iteration
    var parent = $('#hei');
    $(data).each(function(key, value){

        //Add's up the products sold to customer
        for(var j = 0 in value['order_products'])
        {
            j++
        }


        setTimeout(function(){
           //Appends the information
           parent.append('<div id="product' + i + '"><h3> ID: ' + value['customer'].id + '</h3>' + '<p> Kundenavn: ' + value['customer'].name +
            '</p>' + '<p> Selger: ' + value['sold_by'].firstname + ' ' + value['sold_by'].lastname + '</p>' +
             '<p> Antall produkter solgt : ' +  j + '</p>' + '<p> Pris : ' +  value['price'] + '</p>' + '</div>');
        }, 1000 * i); // ~ 1s apart (first is instant as you init i=0) 

        i++;

    });
  });
}
  • So you can store the div element in a variable? I did not know that, and it works like a charm! I ended up changing from parent.append to parent.html , that way only one div was shown at a time. Thank you so much! – Smajo Mar 4 '15 at 9:17
  • Well you can store pretty much anything even functions. When you loop over elements it's best for performance so that the client doesn't have to parse the markup each time. That and I find it often improves readability. – Tom Toms Mar 4 '15 at 13:14

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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