Dear Friends, Please Help Me,
I am Loading/Initializing a Tab in a Ajax return. The problem is the tab closing is not working when i click to load the Tab more than one... here is the code..
- $("#billtracker-search-searchbtn").bind('click',function(){
- var Actionlink="/root/billtracke
- $("#billtracker-search-resultdiv").mask("Searching Data... Please wait...");
-
- $.ajax({
- url: Actionlink,
- type:"POST",
- data:{
- perform:"SearchPO",
- bpaNumber:bpaNumber
- },
- cashe:false,
- success:function(data){
- $("#billtracker-search-resultdiv").unmask();
- $("#billtracker-search-resultdiv").empty();
- $("#billtracker-search-resultdiv").html(data);
- var tab_counter = 2;
- var tabcount=0;
- var tabheading="";
- var ActionUrl="/AshtecManager/root/billtracker.action";
- var $tabs = $('#billtracker-search-tabs').tabs({
- //<a href={href}>#{label}</a>
- tabTemplate: '<li><a href=#{href}>#{label}</a><span class=\"ui-icon ui-icon-close\">Remove Tab</span></li>',
- add: function(event, ui) {
- $(ui.panel).load(ActionUrl,{
- 'perform':'NewTab'
- });
- $tabs.tabs('select', '#' + ui.panel.id);
- }
- });
- $('#billtracker-search-tabs span.ui-icon-close').live('click', function() {
- var index = $('li',$tabs).index($(this).parent());
- $tabs.tabs('remove', index);
- tabcount--;
- });
- function addTab(){
- $tabs.tabs('add', '#billtracker-search-tabs-'+tab_counter,tabheading);
- tab_counter++;
- tabcount++;
- }
- $("a.clicka").bind('click',function(){ // this <a> tag is placed in first tab
- tabheading="More";
- //alert("hi");
- addTab();
- });
-
- }
- });
-
- });
This is the Error showing in Firefox error console:
Error: uncaught exception: cannot call methods on tabs prior to initialization; attempted to call method 'remove'