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
Highlighted
Developer
Posts: 79
Registered: ‎09-17-2012
My Device: Torch 9800
My Carrier: DiGi

Selecting Dynamically Created Div

Hi all. I have trouble trying to select a dynamically created div. 

 

The div is populated from calling web services.(pendRefNo is reference number from database)

 

strPendList += '<div id="workqList_'+pendRefNo+'" class="pendClaimDisplay" x-blackberry-focusable="true" onmouseover="refHighlight(this)" onmouseout="noRefHighlight(this)" onclick="qClaimDetails(\''+pendRefNo+'\')">';
            strPendList += '<div class="pendRefLabel">REF NO </div>';
            strPendList += '<div class="pendRefValue">: '+pendRefNo+'</div>';
            strPendList += '<div class="pendRequesterLabel">REQUESTER : </div>';
            strPendList += '<div class="pendRequesterValue">'+pendEmpNo+' '+pendRequester+'</div>';
			//strPendList += '<div class="pendRequesterValue">'+pendRequester+'</div>';
            strPendList += '<div class="pendDateLabel">DATE </div>';
            strPendList += '<div class="pendDateValue">: '+pendDate+'</div>';
            strPendList += '<div class="pendAmountLabel">AMT : </div>';
            strPendList += '<div class="pendAmountValue">'+pendAmount+'</div>';
            strPendList += '</div>';//end of pendClaimDisplay

 To select the any highlighted div, user will have to press the BB Menu key to call the a function

 

function bbMenuWorkQueue()
{
  blackberry.ui.menu.clearMenuItems();
  var topDivider = new blackberry.ui.menu.MenuItem(true, 1);
  blackberry.ui.menu.addMenuItem(topDivider);
  //var itemHome = new blackberry.ui.menu.MenuItem(false, 2, "Home", mainMenu);
  //blackberry.ui.menu.addMenuItem(itemHome);
  //blackberry.ui.menu.setDefaultMenuItem(itemHome);
  var itemApprove = new blackberry.ui.menu.MenuItem(false, 2, "Approve", approveCheck);
  blackberry.ui.menu.addMenuItem(itemApprove);
  var itemReject = new blackberry.ui.menu.MenuItem(false, 3, "Reject", rejectCheck);
  blackberry.ui.menu.addMenuItem(itemReject);
}

 The approveCheck function:

function approveCheck()
{
  $('.pendClaimDisplay').mouseover(function(){
    alert($(this).attr('id'));
  });
}

 For now, for testing approveCheck just return the id of the selected div. The problem I'm having is that, when I select a div, then press the BB Menu key and select Approve, it will not return the id ffrom the currently selected div but unless if I scroll down the div listing only approveCheck will be called.

 

Another error is that, after Approve have been clicked from the BB Menu key, whenever I scroll down the div listing, the approveCheck function will be called. Shouldn't approveCheck be called when I select it from BB Menu key?

 

I think I'm missing out something here. 

 

Any advice/suggestion will be greatly appreciated. Thank you.

Retired
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Selecting Dynamically Created Div

Your approveCheck() method is using the class name as its selector which means that if you have more than one DIV with the same class being used on the page, each of them will have the same behavior.

 

Try being more specific in which div elements you are trying to target?

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Developer
Posts: 79
Registered: ‎09-17-2012
My Device: Torch 9800
My Carrier: DiGi

Re: Selecting Dynamically Created Div

I'm trying to select workqList_'pendRefNo'. But I have do not know the value for pendRefNo as it is being retrieved from database. The class name is the closest I can think of using. 

New Developer
Posts: 17
Registered: ‎12-05-2011
My Device: BlackBerry 10 Dev Alpha
My Carrier: Not provided

Re: Selecting Dynamically Created Div

Try using HTML5 data attributes. I have a similar application which pulls info from a database and renders like so:

 

$("#expensesListView").append("<li data-icon='false' data-expenseid=" + value.ExpenseID + "><a h... [snip]

 Then on my tap event you can get the data attribute by using this:

 

var expenseid = $(this).data("expenseid");

Admittedly my interaction with the list is slightly different to yours as I used jQuery Mobile but the general paradigm might help you.