Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Trusted Contributor
Posts: 100
Registered: ‎03-31-2012
My Device: Blackberry 9780
My Carrier: Telkomsel

How to createElement with looping

Help, i want to do looping when the data is displayed to the div tag as the following code :

 

function GetDataFromServer() {

var url = "http://berthojoris.com/developer/services21/DataReadNP.php";
JSONP.get(url, {}, function(response){
    var listItem, container, dataList = document.getElementById("dataList"), str = "", str2 = "";
            for ( var i = 0; i < response.length; ++i ) {
                str += response[i].title;
                str2 += response[i].fetch_date;
            }

    listItem = document.createElement('div');
    listItem.setAttribute('data-bb-type', 'item');
    listItem.setAttribute('data-bb-img', 'images/icons/icon11.png');
    listItem.setAttribute('data-bb-title', str);
    listItem.innerHTML = str2;

    container = document.createElement('div');
    container.appendChild(listItem);

    bb.imageList.apply([container]);

    dataList.appendChild(container.firstChild);

    if (bb.scroller) {
        bb.scroller.refresh();
    }

});  

}

My JSONP output : http://berthojoris.com/developer/services21/DataReadNP.php?callback=tmp123

 

Then, to display the list to the screen :

 

function dataOnTheFly() {
   document.getElementById('waiting').style.display = 'none';
   GetDataFromServer()  
}

But my results have not been the way I want. Please see pictures below :

 

http://s13.postimage.org/68w2zfmh3/data_BB.png

Regards,
Bertho
Developer
Posts: 119
Registered: ‎05-27-2010
My Device: 9900
My Carrier: Vodafone NL

Re: How to createElement with looping

function GetDataFromServer() {

var url = "http://berthojoris.com/developer/services21/DataReadNP.php";
JSONP.get(url, {}, function(response){
    var listItem, container, dataList = document.getElementById("dataList"), str = "", str2 = "";
       container = document.createElement('div'); 
            
        for ( var i = 0; i < response.length; ++i ) {
                listItem = document.createElement('div');
                str = response[i].title;
                str2 = response[i].fetch_date;

                listItem.setAttribute('data-bb-type', 'item');
                listItem.setAttribute('data-bb-img', 'images/icons/icon11.png');
                listItem.setAttribute('data-bb-title', str);
                listItem.innerHTML = str2;
                container.appendChild(listItem);

            }

    bb.imageList.apply([container]);

    dataList.appendChild(container) // .firstChild); //I would think you will need to add all nodes, not just firtsChild.

    if (bb.scroller) {
        bb.scroller.refresh();
    }

});  

}

 

OK a bit Raw and from the Hip.

 

But in your code you try to add all the tiltes and images to a single element, and that's what you then also see on your screen.

You'll need to create individual elements (divs) for each listitem and those to your container.

 

Hope the changes above help you in the rigth direction

@reumerd-- @BBDevGroupNL -- about me
If you like it, LIKE it ;-) ----- If it's solved, press solved ! --- If you solved it yourself, please let us know! We might have the same problem!
Trusted Contributor
Posts: 100
Registered: ‎03-31-2012
My Device: Blackberry 9780
My Carrier: Telkomsel

Re: How to createElement with looping

It's works..

 

oh ya, If I want to add the ID in the DIV tag with the intention that if any of the data can be clicked to the page detail.html with the ID as a parameter and then read to the server with the ID of whether to use tags<ul> <li> As the use of the jQuery like this :

 

$('#myDiv').append(
'<li><a href="detail.html?id=' + data.id + '">' +
'<p>' + data.title +'</p>' +
'<p>' + data.date+'</p>' +

 Do you have to wear <li> <ul> tag or can use <div> as in the example above?

 

Regards,
Bertho
Developer
Posts: 119
Registered: ‎05-27-2010
My Device: 9900
My Carrier: Vodafone NL

Re: How to createElement with looping

As bbUI.js is already doing the heavy lifting for you, just bind to the class of the div instead of trying to use ul li tags. They are useful if you also have to build your own CSS styling and can help retrieve elements in the DOM, butif you're using jquery and or bbUI.js these platform already help you out with this, so it would just be overkill.
@reumerd-- @BBDevGroupNL -- about me
If you like it, LIKE it ;-) ----- If it's solved, press solved ! --- If you solved it yourself, please let us know! We might have the same problem!
Trusted Contributor
Posts: 100
Registered: ‎03-31-2012
My Device: Blackberry 9780
My Carrier: Telkomsel

Re: How to createElement with looping

Do you mean bbUI alone can do it yourself without using jQuery?

It's just not have the style to support <ul> <li> tags

Regards,
Bertho
Highlighted
Developer
Posts: 119
Registered: ‎05-27-2010
My Device: 9900
My Carrier: Vodafone NL

Re: How to createElement with looping

[ Edited ]

If you just want to add (an) id to the elements in the bbUI list then just add this line to the loop generating the bb elements.

 

listItem.setAttribute('id', *YourID');

 

no need for <li> <lu> things to be added, nor would I add any <a href >  tags.

 

bbUI.js can handle the clicks on your listitems. I haven't worked extensively yet with the bUI.js framework, but check out the examples from their github : https://github.com/tneil/bbUI.js/tree/master/samples to lrean more how to use the different elements they support and how they handle the clicks.

 

Use for instance this option: 

listItem.setAttribute('onclick', *MyAction );

 To add your own onclick event to the listItem.

 

 

@reumerd-- @BBDevGroupNL -- about me
If you like it, LIKE it ;-) ----- If it's solved, press solved ! --- If you solved it yourself, please let us know! We might have the same problem!