Correct way to replace NavBar with a new one

[NormBParticipant]

This may be a general question for any jQwidget, but I have a specific problem with a NavBar .

I create a holding div in my html – <div id=’CalledProgNavBar’></div>
At the time of creation I do not know how many elements it will need to hold.
The content of each element will be a small grid, one for each of “nsess” sessions
When I need to populate it I insert the rest of the structure of the div and then create the NavBar as follows:

for(i=0 ; i<nsess ; i++) {
gridshtml += ‘<div>’+sessions[i].Name+'</div><div id=CalledProgGrid_’+sessions[i].ID+’></div>’;
}
$(‘#CalledProgNavBar’).html(gridshtml);
$(‘#CalledProgNavBar’).jqxNavigationBar({
theme: JQtheme,
expandMode: ‘multiple’,
width: ‘800px’
});
I then populate the grids.
This works just fine the first time.
The problem arises when I load a new event, which may have more or fewer sessions.
I tried the simple approach of emptying the holding div – $(‘#CalledProgNavBar’).empty() and then re-running the code above. However, the NavBar does not get recreated.

Is there a more correct way of doing this?

Thanks

NormB

[HristoParticipant]

Hello NormB,

The internal elements that you want to be nested in the navbar should be wrapped in the <li/> tags.
You cannot simply add an additional element (or remove), you should destroy everything and re-create the example with more or fewer elements.
You could provide me more details what you want to achieve and I could try to provide you a solution.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts