How to use (js-spatial-navigation)focus for pages(elements) to render data from an api ?

[shaikzubeer1]

I am working on a web application for smart TV , i find it difficult to get the focus on element i create with data that gets rendered from the api. I believe only rendered elements or already available elements are focused right now for my application. Also i am using pure JavaScript with no framework for my app, can you please help me on this ?

[shaikzubeer1]

@luke-chang can you please help me on this ??

[Luke Chang]

Hi @shaikzubeer1, I'm a bit not sure what your problem is. Do you mean that SpatialNavigation can't move focus to the elements that are not rendered initially? If so, I wonder how you set up your "selector". Would you mind sharing your code snippets? It would be much helpful. Thanks.

[shaikzubeer1]

Hi @luke-chang , here's the code :

SpatialNavigation.add('horz_content', {
selector: '.focusable',
enterTo: 'last-focused'
});

getJSON('API').then(function(data) {
populateMenuList(data);
}, function(status) { //error detection....
alert('Something went wrong.');
});

function populateMenuList(data){
var pdata = data['data'];
var program = pdata['horizontal_menu'];
var vert_content = document.getElementById('vert_content');
for (var i = 0; i < program.length; i++) {
var programTitle = document.createElement('div');
programTitle.textContent = program[i].title;
programTitle.className = 'focusable';
vert_content.appendChild(programTitle);
}
}

So, here i do not get the focus at all, how can i tackle this ? also if my elements size in the page is not constant or is dynamic , how can i get focus on those elements ??

Thanks.

[Luke Chang]

Since <div> isn't focusable natively and SpatialNavigation.makeFocusable doesn't apply to new elements by design, I believe it is the root cause of your problem. You can either set programTitle.setAttribute('tabindex', '-1') by yourself or call SpatialNavigation.makeFocusable again whenever new elements have been appended to the DOM tree.

[shaikzubeer1]

thanks allot @luke-chang , SpatialNavigation.makeFocusable works absolutely fine :-) Thank you

[shaikzubeer1]

Another query @luke-chang , how to keep two elements on focus ? suppose i select an item from menu, sub-menu to that item opens, i want to keep menu item highlighted/focused as long as i get a key event from seb-menu item. Is there a way to keep both menu and sub-menu item focused ??

[Bytet]

I have been able to develop a small test site using your code http://loopzine.tv/firetv.htm
just one persistent problem. My links open a new page to play mpeg4 videos when I use the return or back button on the fireTV d-pad my home page defaults to the first focusable element on the page instead of the last focused element. I think its working as expected on my windows chrome browser but not on the firetv???