Load content on select?

[fedor01Member]

Hello,

I’m creating ajax website and I want to use the tab as a navigation. When the user select any item I want to load the content dynamically via ajax. Can you give me an example for this?

Fedor.

[supportParticipant]

Hi Fedor,

In your scenario, you can do the following:

1. Add the HTML markup required for creating the jqxTabs.

       <div id='jqxTabs'>
            <ul>
                <li>Tab 1</li>
                <li>Tab 2</li>     
            </ul>
            <div id='jqxtabs-1'>
            </div>
            <div id='jqxtabs-2'>  
            </div>        
        </div> 

2. Create the jqxTabs.

$('#jqxTabs').jqxTabs({ width: 550, height: 240 });

3. Bind to the ‘selected’ event. In the event handler, find the selected tab’s panel and load its content dynamically.

$('#jqxTabs').bind('selected', function (event) {
    var item = 1 + event.args.item;
    var panel = $('#jqxtabs-' + item);
    panel[0].innerHTML = "New Content " + item;
});

Please feel free to contact us, if you have any additional questions.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts