how to not execute a scriptlet code in a tab when using jquery ui tab plugin

Question

I just came across jquery ui tabs plugin.

Its a very nice implementation but what If current code is in place.

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab1 </a></li>
        <li><a href="#tabs-2">tab2</a></li>

    </ul>
    <div id="tabs-1"><%System.out.println("test1");%></div>
    <div id="tabs-2"><%System.out.println("test2");%></div>
</div>

in this case, when the page initially loads, tab1 is the default tab. However, both the sys out statements are executed initially. It does not matter what the default tab is. Ideally first sys out should execute when tab1 is selected and second when tab2 is selected.

Is there any way to avoid this? Or the only way is to have different pages for different tabs?

Answer 1

the scriptlet will execute because it is not restrained by javascript. If you have content in tabs-1 and tabs-2 that you do not want to execute until unless the tab is clicked then you should use the 'ajax' feature of this plugin. The demo site shows how to do this.