By Marco Buettner

28 Apr 2015 01:35 English 10 Replies

Hi,

I'm trying to add in my application a dynamic list with checkboxes. But all tries failed and the result isnt a correct display of the list item - or better the checkbox looks not like on a static list, its just a small native checkbox.

With all other types I have no problem to generate the list dynamic, only checkboxes.

My code

function generateChechkboxList() {
    var ls = localStorage.getItem('db'),
        list = document.querySelector('div.ui-page-active div[data-role=content] ul'),
    	listView = tau.widget.Listview(list);

    if(ls)
    {
        var data = JSON.parse(ls).results,
            listItem = '';

        listItem = '<li data-role="list-divider" data-style="dialogue">Selected: <span id="count">0</span></li>';
    	listView.addItem(listItem, 0);

        jQuery.each(data, function(index, value) {
            listItem = '<li class="ui-li-has-multiline ui-li-dialogue"><a href="#">'
    			+ '<input type="checkbox" name="deleteCheckbox" id="li'+i+'" data-event-id="'+item.eventId+'" />'
				+ item.title
				+ '<span class="ui-li-text-sub">'+status+': '+item.person+'</span>'
				+ '</a></li>';
			listView.addItem(listItem, 1);
        });
    }
}

Without checkbox the list item will show correct :)

Responses

10 Replies

AVSukhov

28 Apr 2015 04:38

Hello,

I have tested your code on Z1 and i get following result:

Do you have the same result?

Also, a don`t known structure of your data, and i use simple array and "for" loop.

Reply to this post
Mark as answer

Marco Buettner

28 Apr 2015 07:02

Yeah the result on your Z1 looks like I want, but it looks different... My structure is a array of objects, so yeah... maybe I change to a for-loop. In previous version I used a bunch of objects instead an array (I dont know why :D)

In my result the checkbox was not display like the Tizen UI it should, it was just the native checkbox...

Reply to this post
Mark as answer

Marco Buettner

29 Apr 2015 05:35

My result :(

Reply to this post
Mark as answer

Vikram

29 Apr 2015 11:00

Hi Marco Buettner,

As your sample code, "<input type="checkbox" name="deleteCheckbox" id="li'+i+'" data-event-id="'+item.eventId+'" />"

The "i" should be "index" according to the context.

Possible, this is the root cause. :)

Reply to this post
Mark as answer

Marco Buettner

29 Apr 2015 02:39

I have change the code from jQuery.each to for-loop and now the i is correct, but it change nothing for the display :(

Reply to this post
Mark as answer

Marco Buettner

30 Apr 2015 01:57

Thats my result

What I do

Click on button and change the page from "overview" to "delete".

My code on "delete" page

$(document).on('pageshow', '#page_delete', function() {
    generateDeleteList();
});

list.js

function generateDeleteList() {
    var storage = localStorage.getItem('db'),
        list = document.querySelector('div.ui-page-active div[data-role=content] ul'),
        listView = tau.widget.Listview(list);
    
    if(storage)
    {
        var results = JSON.parse(storage).results, // return array of object
            length = results.length,
            result = null,
            i = null,
            listItem = "";

        listItem = '<li data-role="list-divider" data-style="dialogue">Selected: <span id="count">0</span></li>';
        listView.addItem(listItem, 0);

        for(i = 0; i < length; i++)
        {
            result = results[i];
            listItem = '<li class="ui-li-has-checkbox ui-li-has-multiline ui-li-dialogue">'
                        + '<a href="#">'
                        + '<input type="checkbox" name="deleteCheckbox" id="li'+i+'" data-event-id="'+result.eventId+'" />'
                        + result.title
                        + '<span class="ui-li-text-sub">'+result.person+'</span>'
                        + '</a>'
                        + '</li>';
            listView.addItem(listItem, 1);
        }
    }
}

Reply to this post
Mark as answer

AVSukhov

30 Apr 2015 08:46

Hello,

This is my code:

function generateChechkboxList() {
        var ls = null,
            list = document.querySelector('ul'),
            listView = tau.widget.Listview(list);

        ls = {
        		results: [
        		    { 
        		    	item:  "name"
        		    },
        		    { 
        		    	item:  "name"
        		    },
        		    { 
        		    	item:  "name"
        		    },
        		    { 
        		    	item:  "name"
        		    },
        		    { 
        		    	item:  "name"
        		    },
        		    { 
        		    	item:  "name"
        		    },
        		    { 
        		    	item:  "name"
        		    }
        		]
        };
        
        if(ls)
        {
             var   listItem = '';

            listItem = '<li data-role="list-divider" data-style="dialogue">Selected: <span id="count">0</span></li>';
        	listView.addItem(listItem, 0);

        	for(var i=0;i<ls.results.length;i++) {
        		listItem = '<li class="ui-li-has-multiline ui-li-dialogue"><a href="#">'
        			+ '<input type="checkbox" name="deleteCheckbox" id="li'+i+'" data-event-id="'+i+'" />'
    				+ ls.results[i].item
    				+ '<span class="ui-li-text-sub">'+ls.results[i].item+': '+ls.results[i].item+'</span>'
    				+ '</a></li>';
    			listView.addItem(listItem, 1);
        	}
        }
    }
    
    generateChechkboxList();

and html:

<div data-role="content">
    <ul></ul>
</div>

Tested on Z1

Reply to this post
Mark as answer

Marco Buettner

30 Apr 2015 11:25

I dont know where is my failure...

I find out when I open the page a second time, I see for short time (at least 1s) the correct result and than, it will appear like on my screenshot. I need to load the list on pageshow, because it should reload every time when the page will be show.

Reply to this post
Mark as answer

Marco Buettner

01 May 2015 03:10

AVSukhov can I contact you on a private way to share my project? Maybe you can find a solution or my failure??

Reply to this post
Mark as answer

AVSukhov

06 May 2015 09:32

Hi Marco,

You can contact with me by: avsukhov.nn@mail.ru

Reply to this post
Mark as answer

User Menu

Tizen Forums

Community

Community

Responses

Search form

Responses