How to reload the tabs in jquery easyui plugin?

Question

I am using the jquery easyui to implement tabs. However, there is no reload function on the tabs. There is an reload example on official document, but it seems that it is just adding a reload icon instead of having an actual reload function:

<div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;display:none;">

enter image description here

Therefore, how to have the actual reload function when I press the reload icon?

Here is that document , it is short and finish read in a minute tabs document

Updated:

Refresh function:

$(document).ready(function(){
    $('#tt').tabs({
        onSelect: function (title) {
            var currTab = $('#tabs').tabs('getTab', title);
            var iframe = $(currTab.panel('options').content);
            var src = iframe.attr('src');
            $('#tt').tabs('update', {
                tab: currTab, options: { content: createFrame(src)}
            });
         }
    });
});

Add tab will add a icon-reload:

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, 
            iconCls:'icon-reload', 
            content:content, 
            closable:true
        });  
    }  
}

The icon in html:

<a href="javascript:void(0)" class="tabs-inner">
 <span class="tabs-title tabs-closable tabs-with-icon">Create List</span>
 <span class="tabs-icon icon-reload"></span>
</a>

How do I use icon-reload to call the function to reload the tab?

jsfiddle link added

another similar post with some info: http://stackoverflow.com/questions/1634909/refresh-tab-content-on-click-in-jquery-ui-tabs — jeffery_the_wind, Apr 07 '12 at 11:57
@jeffery_the_wind Thanks, that is for jquery ui but not jquery easy ui, i found that act in different way — user782104, Apr 07 '12 at 12:46
@Raminson Thanks, i provide all the relevant codes here , since there are a lot of code, i may have to filter it out before the jsfiddle works. — user782104, Apr 07 '12 at 12:48
That icon doesn't do what you think it does. See this demo, and notice the small grey button on the first tab: http://www.jeasyui.com/easyui/demo/tabs.html That button actually does what you want, view source to see how they added it. — Jared Farrish, Apr 07 '12 at 13:12
@JaredFarrish great i can add function now , but the function can not fit in — user782104, Apr 07 '12 at 13:27

score 1 · Accepted Answer · answered Apr 07 '12 at 13:58

This refresh icon is not supposed to update the content of the tab, but you can tweak the plugin to do so.

HTML:

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">  
</div>

CSS:

.icon-reload {
    cursor: pointer;
}

jQuery:

$('#tt').tabs({
    border: false,
    onSelect: function(title) {
        //alert(title+' is selected');  
    }
}); 

function addTab(title, url) {
    if ($('#tt').tabs('exists', title)) {
        $('#tt').tabs('select', title);
    } else {
        var content = 'added tab';
        $('#tt').tabs('add', {
            title: title,
            iconCls: 'icon-reload',
            content: content,
            closable: true
        });
    }
}

function myTabUpdate(index) {
    return Math.random() + ' index ' + index;
}

$(".icon-reload").live('click', function() {
    var t = $('#tt');  
    var tabs = t.tabs('tabs');  
    var tabIndex = $(this).closest('li').index();

    $('#tt').tabs('update', {
        tab: tabs[tabIndex],
        options: {
            content: myTabUpdate(tabIndex)
        }
    });
});

addTab('Tab1', 'http://google.com');
addTab('Tab2', 'http://google.com');
addTab('Tab3', 'http://google.com');

Working jsFiddle here: http://jsfiddle.net/YvdjR/4/

Notice the three ressources in ressources tab on the left (in the jsFiddle website):

jquery.easyui.min.js
icon.css
easyui.css

How to reload the tabs in jquery easyui plugin?

1 Answers1