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

x-blackberry-focusable Focus Order

Hi all.

 

As far as I understand x-blackberry-focusable works based on the way elements are arranged on the screen so elements that get declared will receive focus first. But for this paging function, the focus goes to the last element even though there are other focusable elements before it.

 

function showPaging()
{
  var strPageList = "";
  
  strPageList += '<div id="pages">';
  if(pageno > 1)
  {
    strPageList += '<a onclick="getWQList('+(pageno-1)+')" title="go to page '+ (pageno-1)+'" rel="prev"><span class="page-numbers prev" x-blackberry-focusable="true" onmouseover="pageHighlight(this)" onmouseout="noPageHighlight(this)">prev</span></a>';
  }
  
  if(pageno > 0)
  {
    if(pageno == 1)
   {
      strPageList += '<span class="page-numbers current">1</span>';
   }
   else
   {
     strPageList += '<a onclick="getWQList(1)" title="go to page 1"><span class="page-numbers" x-blackberry-focusable="true" onmouseover="pageHighlight(this)" onmouseout="noPageHighlight(this)">1</span></a>';
   }
  }
  
  if(totalpage > 5 && pageno >= 5)
  {
    strPageList += '<span class="page-numbers dots" x-blackberry-focusable="true">&hellip;</span>';
  }
  
 if(pageno > 1)
 {
    if(pageno > 4 && totalpage > 8 && ((totalpage - pageno) >= 4))
     {
       strPageList += '<a onclick="getWQList('+(pageno-2)+')" title="go to page ' + (pageno -2) + '"><span class="page-numbers" x-blackberry-focusable="true" onmouseover="pageHighlight(this)" onmouseout="noPageHighlight(this)">' + (pageno-2) + '</span></a>';
       strPageList += '<a onclick="getWQList('+(pageno-1)+')" title="go to page ' + (pageno - 1) + '"><span class="page-numbers" x-blackberry-focusable="true" onmouseover="pageHighlight(this)" onmouseout="noPageHighlight(this)">' + (pageno-1) + '</span></a>';
      strPageList += '<span class="page-numbers current">' + (pageno) + '</span>';
      strPageList += '<a onclick="getWQList('+(pageno+1)+')" title="go to page ' + (pageno + 1) + '"><span class="page-numbers" x-blackberry-focusable="true" onmouseover="pageHighlight(this)" onmouseout="noPageHighlight(this)">' + (pageno+1) + '</span></a>';	 
      strPageList += '<a onclick="getWQList('+(pageno+2)+')" title="go to page ' + (pageno +2) + '"><span class="page-numbers" x-blackberry-focusable="true" onmouseover="pageHighlight(this)" onmouseout="noPageHighlight(this)">' + (pageno+2) + '</span></a>';	  
  }
    else 
    {
      if(pageno <= 4)//displaying pages 2-4 if pageno is less than 5
      {
         for(var i = 2; i <=5; i++)
        {
           if(pageno == i)
          {
             strPageList += '<span class="page-numbers current">' + pageno + '</span>';
          }//closing for if(pageno == i)
        else
        {
          strPageList += '<a onclick="getWQList(' + (i) + ')" title="go to page ' + i + '"><span class="page-numbers" x-blackberry-focusable="true" onmouseover="pageHighlight(this)" onmouseout="noPageHighlight(this)">' + i + '</span></a>';
        }
   } 
}
  
   if(pageno > 4)
    {
       for(var i = (totalpage-4); i <= totalpage; i++)
      {
         if(pageno == i)
        {
           strPageList += '<span class="page-numbers current">' + i + '</span>';
        }
       else
       {
          strPageList += '<a onclick="getWQList(' + i + ')" title="go to page ' + i + '"><span class="page-numbers" x-blackberry-focusable="true" onmouseover="pageHighlight(this)" onmouseout="noPageHighlight(this)">' + i + '</span></a>';
        }
      }
     }
    }
  }
  
  else if(pageno == 1)
  {
    for(var i = 2; i <= 5; i++)
   {
	  strPageList += '<a onclick="getWQList(' + (i) + ')" title="go to page ' + i + '"><span class="page-numbers" x-blackberry-focusable="true" onmouseover="pageHighlight(this)" onmouseout="noPageHighlight(this)">' + i + '</span></a>';
	}
  }
  
  if((totalpage-pageno) >= 4 && totalpage > 5)
  {
    strPageList += '<span class="page-numbers dots" x-blackberry-focusable="true">&hellip;</span>';
	strPageList += '<a onclick="getWQList(' + (totalpage) + ')" title="go to page ' + totalpage + '"><span class="page-numbers" x-blackberry-focusable="true" onmouseover="pageHighlight(this)" onmouseout="noPageHighlight(this)">' + totalpage + '</span></a>';
  }
  
  if(totalpage > 5 && pageno < totalpage)
  {
    strPageList += '<a onclick="getWQList(' + (pageno+1) + ')" title="go to page ' + (pageno+1) + '" rel="next"><span class="page-numbers next" x-blackberry-focusable="true" onmouseover="pageHighlight(this)" onmouseout="noPageHighlight(this)">next</span></a>';
  }
  strPageList += '</div>';
  $('#content').append(strPageList);
}

 It should be on 2 but the focus in on "next". I'm really confused.

Please use plain text.
Regular Contributor
iruka
Posts: 79
Registered: ‎09-17-2012
My Device: Torch 9800
My Carrier: DiGi

Re: x-blackberry-focusable Focus Order

I just discovered it was a listing of records that caused the focus to be on the last element in the paging list.

 

The listing of records are retrieve from webservices and then loop through a for loop to create div with css display properties and x-blackberry-focusable="true" in each of the div. After user has scroll to the last div in the listing, the focus will to to page 10 instead of page 2.

 

Anyone has any advice?

 

 

Please use plain text.