I'm creating a web-application in which user adds a tab and put his content. This tabs are dynamically created. I searched for it on google and tried for given solutions but none of them worked for me. So i posted a question here.
My code is:
<div id="tabs" class="htabs">
<a href="#tab-general"><?php echo $tab_general; ?></a>
<a onclick="addtab();" id="add-tab"><?php echo $add_tab; ?></a>
</div>
And script is :-
<script type="text/javascript">
$('#tabs a').tabs();
var tab_count = '<?php echo $tab_count; ?>';
function addtab(){
var html = '';
$('#add-tab').before('<a href="#product-tab-'+tab_count+'" class="nearest">Tab '+tab_count+'</a>');
html += '<div id="product-tab-'+tab_count+'" class="nthDiv">';
html += '<table class="form">'
html += '<tr>';
html += '<td>';
html += 'Name'+tab_count;
html += '</td>';
html += '<td>';
html += '<input type="text">';
html += '</td>';
html += '</tr>';
html += '</table>';
html += '</div>';
$('#form').append(html);
$('#tabs a').tabs("refresh");
//$('#tabs a').tabs( "option", "selected", -1 ); tried but doesn't work
//$('#tabs a').tabs("option", "active", -1); tried but doesn't work
tab_count++;
}
</script>
My jquery version is jquery-1.7.1.min.js
and jquery ui version is 1.8
.
The problem is the new tab is not get active/selected. I have to manually click on that tab to make it active.