EasyUI Forum
May 16, 2024, 06:14:50 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Update EasyUI Tab Without Refreshing  (Read 9965 times)
mkruluts
Newbie
*
Posts: 2


View Profile
« 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
        }
    });
}
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 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'
});
Logged
mkruluts
Newbie
*
Posts: 2


View Profile
« Reply #2 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.
Logged
phunksta
Jr. Member
**
Posts: 54


View Profile Email
« Reply #3 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.
« Last Edit: March 04, 2015, 07:52:52 AM by phunksta » Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!