[SonamGyato]

I’ve got a list element and am trying to add list-items dynamically.

I tried to mimic the dom created by the gui builder

my code is below.

the problem is that it does not look like the default list item.

the first entry is the gui created item
the 2nd is mine created dynamically.

* height is different
* not clickable
* the right-angle image appears on the left
* 2 rows

phoneui.documentReadyHandler = function()
{
$(window).load( function ()
{
var list = document.getElementById(“m1-my-sample-list-list1”); // this is the UL element

var li = document.createElement(“li”);
li.setAttribute( “id”, “m1-my-sample-list-listItem2” );
li.setAttribute( “class”, “m1-last m1-clickable” );

{
var img = document.createElement(“img”);
img.setAttribute( “id”, “m1-my-sample-list-accessoryImage2” );
img.setAttribute( “src”, “res/images/tableRowDisclosureIndicator.png” );
li.appendChild( img );
}

{
var div = document.createElement(“div”);
div.setAttribute( “id”, “m1-my-sample-list-text3” );
div.setAttribute( “class”, “m1-text” );
div.innerText = “Hello”;
li.appendChild( div );
}

list.appendChild( li );
} );
}

Attachments:

You must be logged in to view attached files.

[support-michael]

@everest
We have intentions of greatly simplifying custom list creation in the near future. In the meantime as you have identified it is a manual coding effort. Do to limited weekend time I am providing a simple example that created below. Note the attached sample code uses the JQuery framework. I will investigate your code example on Monday.

Step-1: mockup the List location and a single list-item. When we generate the HTML for the UI the list-item’s HTML will serve as a template for programmatically creating multiple rows. The following screenshot shows the UI created in the Design Center (left) and the customized list running in the Test Center (right).
See attachment custom-list-ui.png
Step-2: generate HTML for design and customize it
Remove the single list-item and replace it with 5 similar list-items but with a custom label
See attachment custom-list-js.png

Following is the code for this example:
See attachment dynamic-list.zip

Attachments:

You must be logged in to view attached files.

[SonamGyato]

i tested your sample app.

it does create the list dynamically.

i need to test why my documentReadyHandler()
is not being called.

but in your app, did you notice the list-items
looked a little bit different than standard items and
also NOT clickable.

maybe a CSS issue.

[support-michael]

@everest
Thanks for the feedback. I was short on time (12:30am) developing the example and omitted click handling. I will update the example asap with a few improvements.

We investigated the issue with document_ready() not being invoked. The root issue is that the mobione layout manager is bonking on the list-item you commented out. The generated html includes a javascript layout manager that attempts to create an exact replication of your design user interface. HTML/CSS are good but can not layout many of the user interfaces that users create. That is where the mobione layout manager comes in to fill in the gap. In your case the layout manager is looking for the 2nd list-item in the DOM but it is N/A since you commented it out.

1) for 1.2, limit your DOM modifications to using javascript

2) we are investigating making the layout manager much more robust so that it is not sensitive to minor code modifications such as your scenario.

[SonamGyato]

no worries…

the workaround is to create just a single template list-item
and remove it using javascript (as in your sample).

so we’re good on this!

so just need the click-handler…can you tell me why the
default list-item (created by gui) seems to have a click
handler w/o an explicit handler in the generated code.

[res005ru@verizon.net]

Wayne

I am trying to do the same thing, build a contacts list like the apple version.
I am using both the test center and safari, and my code is ran thru the post page transitions function of the _custom.js file. I have attached the page the one to change, HandTalkContactsList.jsp also HandTalkMain_Custom.js.
/**
* Notification that the UI has transition to a new page.
*
* @param {String} newPageId
*/
phoneui.postPageTransition = function(newPageId)
{
szCurrentPageId = newPageId;

if(newPageId == “m1-HandTalkMain-HandTlakCfg”) // setup for local storage using
{ // of program values in key pair format
}
if(newPageId == “#m1-HandTalkContactList”)
{
SQLContact( ); <—– this starts my page reconstruction
}

return;
}

The code executes and seems to do what I want, except the displayed page is not modified with the contacts. All pages are .jsp, Win 7 x86_64 6 g memory.

A second problem I am having, this may be beyond the scope of your support, but
on local storage, web db, the following exsist, code follows:

/**
* get all records into data and then make ready to insert data
*/
FetchContacts = function(szsFetchSql)
{
DB.transaction(function(tx) <—- problem here
{
tx.executeSql(szsFetchSql, [], function (tx, data)
{
var AllContacts = new Array(new Array()); //results; // set data to [] and it will be returned to user
for(var iIndx = 0; iIndx < data.rows.length; ++iIndx)
{
AllDBRecord[iIndx] = data.rows.item(iIndx);
}
}, errorHandler);
});
return;
};

@ <—- problem here, the code executes, but then returns without executing
any other code, tx.executeSql(…). However when ever I submit the page a second time or more the code executes as expected.

Any help is appreciated and I know you are a busy person.

Thanks

Rick

Attachments:

You must be logged in to view attached files.

[Darshan Patel]

is it possible to change the value/contents of listitem without repopulating it???

like in the above example, changing the value of “m1-text”….

[Author]

Posts