How to add items dynamically (jpList Api)

ptr1120 commented 8 years ago

Hello everybody,

can anybody help me with the usage of the jpList -API? I am trying to fill a list dynamically and I use this minimal example, but nothing happens, so no items are added. What are I am doing wrong???

<!doctype html>
<html>
    <head>      
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />              
        <!-- jQuery lib -->     
               <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>      
        <!-- jPList core js and css  -->
        <link href="dist/css/jplist.core.min.css" rel="stylesheet" type="text/css" />       
        <script src="dist/js/jplist.core.min.js"></script>  
    </head>
    <body>

        <div id="demo"> </div>  

        <script>
        $('document').ready(function(){
        var $demo = $('#demo')
            ,items = [];

        //add item
        items.push($('<div class="list-item box">\
            <div class="block right">\
                <p class="date">03/15/2012</p>\
                <p class="title">Arch 1</p>\
                <p class="desc">Test description 1</p>\
                <p class="like">6 Likes</p>\
                <p class="theme">\
                    <span class="architecture">Architecture</span>\
                </p>\
            </div>\
        </div>'));

        //init jplist 
        $demo.jplist({              
           itemsBox: '.list' 
           ,itemPath: '.list-item' 
           ,panelPath: '.jplist-panel'  
           ,debug: true
           ,redrawCallback: function(collection, $dataview, statuses){
                    console.log("HIT");
            }   
        });

        //add items to jplist collection
        $demo.jplist({
            command: 'add'
            ,commandData: {
                $items: items,
                index: 0 
            }
        });     
        });
        </script>   
    </body>
</html>

thanks and best regards, peter

1rosehip commented 8 years ago

You're missing the html structure here - please check out the following demo pages: https://github.com/no81no/jplist/blob/master/demo/14-add-items-range-dynamically.html https://github.com/no81no/jplist/blob/master/demo/14-add-items-range-dynamically-2.html

ptr1120 commented 8 years ago

thank you very much, these demo pages I haven't found. Now its working and clear.

1rosehip commented 8 years ago

You're welcome :)

1rosehip / jplist

How to add items dynamically (jpList Api) #184