Print Page - Update EasyUI Tab Without Refreshing

Title: Update EasyUI Tab Without Refreshing
Post by: mkruluts on March 15, 2014, 05:12:16 PM

I really do like this javascript tab control. I am using it pretty heavily and somehow managed to work out everything except this issue. I am doing an inline frame (like most people probably are), but I am having trouble with updating the tab title without refreshing the contents of the entire panel. I navigate away from the page I start with, and when I update the tab title it defaults back to the initial page. Below is my code, any help would be greatly appreciated.

Code:

function MarkTabPendingSave(title) {
    var tab = $('#tcContent').tabs('getSelected');

    $('#tcContent').tabs('update', {
        tab: tab,
        options: {
            title: title
        }
    });
}

Title: Re: Update EasyUI Tab Without Refreshing
Post by: stworthy on March 16, 2014, 07:45:29 AM

Please try to extend a new method to only update a tab panel's title.

Code:

<script>
$.extend($.fn.tabs.methods, {
    updateTitle: function(jq, param){
        return jq.each(function(){
            var t = $(param.tab);
            var opts = t.panel('options');
            opts.title = param.title;
            opts.tab.find('.tabs-title').html(param.title);
        })
    }
})
</script>

Call the code below to update a tab panel's title.

Code:

var tab = $('#tcContent').tabs('getSelected');

$('#tcContent').tabs('updateTitle', {
    tab: tab,
    title: 'new title'
});

Title: Re: Update EasyUI Tab Without Refreshing
Post by: mkruluts on March 17, 2014, 05:38:41 AM

Thank you so much... This worked 100%.
I am new to this forum, is there a "Mark as Answer" function? I can't seem to find it, but for anyone who stumbles across this using google, stworthy had the correct answer. Thanks again.

Title: Re: Update EasyUI Tab Without Refreshing
Post by: phunksta on March 03, 2015, 08:59:07 AM

Further to this thread, I have needed a method to update a tab panel body, but I was struggling to find a method to do this.
Can anyone comment if this looks ok?

Code:

    // Add a tab update method that will work from local variables.
    $.extend($.fn.tabs.methods, {
        updateNoAjax: function (jq, param) {
            return jq.each(function () {
                var t = $(param.tab);
                var opts = t.panel('options');
                opts.title = param.options.title;
                var tt = opts.tab.find('.tabs-title')
                tt.html(param.options.title);
                opts.content = param.options.content;
                t.html(param.options.content);
                $.parser.parse(t);
            })
        }
    })

Edit: Without $.parser.parse(t); the panel did not populate the easyui controls.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: mkruluts on March 15, 2014, 05:12:16 PM