How to hide close (x) button on tab, call from iframe?

[Aod47]

I created dynamic tabs from the example code.

Code:

function addTab(title, url){
    if ($('#tt').tabs('exists', title)){
        $('#tt').tabs('select', title);
    } else {
        var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
        $('#tt').tabs('add',{
            title:title,
            content:content,
            closable:true
        });
    }
}

In iframe content I have disabled form. When user click 'Edit Form' link button for enable form to edit data. I need to hide close (x) button on present selected tab. Prevent user close tab before save form.

I don't know how to refer to parent tabs object. Could you please advice?

Thank you.

[jarry]

Define a function to disable the current tab panel.

Code:

function disableCurrTab(){
  var t = $('#tt');
  var p = t.tabs('getSelected');
  var index = t.tabs('getTabIndex', p);
  t.tabs('disableTab', index);
}

And then call this function in your iframe: parent.disableCurrTab()

[Aod47]

Ah!.. It's work great. Thank you very much.

[Aod47]

I changed your code to

Code:

function disableCurrTab(){
  var t = $('#tt');
  var p = t.tabs('getSelected');
  var tab = p.panel('options').tab;
  tab.panel({ closable: false });
}

then the close (x) button hide when user click edit button

and I add function to show close (x) button agian.

Code:

function enableCurrTab(){
  var t = $('#tt');
  var p = t.tabs('getSelected');
  var tab = p.panel('options').tab;
  tab.panel({ closable: true });
}

But the close button not show.

Where am i missing? Could you please advice?

Thank you.

[jarry]

Please call this function to show or hide the close button.

Code:

function setCloseButton(closable){
  var t = $('#tt');
  var p = t.tabs('getSelected');
  t.tabs('update', {
    tab: p,
    type: 'header',
    options: {
      closable: closable
    }
  });
}

[Aod47]

It's work great.

Thank you very much.