I'm using this link; http://jqueryui.com/tabs/#manipulation

I'm loading pages dynamically within tabs.

But.

When changing from tab. Refresh the page again

How I can remove this effect?


This is my code. I'm using jsf + primefaces:

<script type="text/javascript">
    jq = jQuery.noConflict();
   
    $(function() {

var tabTitle = 'hola';
var tabContent = jq("#tab_content");
var tabTemplate = '<li><a href="#[href]">#[label]</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>';
var tabCounter = 2;

        var tabs = jq('#tabs').tabs();

        // actual addTab function: adds new tab using the input from the form above
      function addTab() {
            var label = tabTitle || 'Tab ' + tabCounter,
                id = 'tabs-' + tabCounter;
            //var li = jq(tabTemplate.replace( /#\{href\}/g, '#' + id ).replace( /#\{label\}/g, label ));
            var li = '<li><a href="http:#{request.contextPath}/pages/system/modules.xhtml">Modulos</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>';
            var tabContentHtml = tabContent.val() || 'Tab ' + tabCounter + ' content.';

            tabs.find( '.ui-tabs-nav' ).append( li );
            tabs.append( '<div></div>' );
            tabs.tabs( 'refresh' );
            tabCounter++;
            return;
        }

        // addTab button: just opens the dialog
        jq('#add_tab')
            .button()
  .click(function() {
                addTab();
            });
       
        // close icon: removing the tab on click
        jq( '#tabs span.ui-icon-close' ).live( 'click', function() {
            var panelId = $( this ).closest( 'li' ).remove().attr( 'aria-controls' );
            $( '#' + panelId ).remove();
            tabs.tabs( 'refresh' );
        });


        jq('#tabs').tabs({
            select: function(event, ui) {
                var uri = ui.tab.rel;
                if( uri ) {
                    location.href = uri;
                    return false;
                }
                return true;
            }
        });
           

    });
    </script>


<div id="tabs">
<ul>
  <li><a href="#{request.contextPath}/pages/system/entity.xhtml">Hola</a><span
class="ui-icon ui-icon-close">Remove Tab</span></li>

</ul>

</div>