javascript - UIkit tabs and switcher do not work after partial refresh -

ok, bit special. using uikit in our xpages application. use tabs , switcher component (http://getuikit.com/docs/tab.html , http://getuikit.com/docs/switcher.html). work fine until partial refresh of page. reason components initiliazed once after pages loaded. happens directly in lib bind page - no own init script etc. after refresh must re-init whole stuff - not familiar syntax or possibilities. searched uikit lib though , found this:

(function(ui) {  "use strict";  ui.component('tab', {      defaults: {         'target'    : '>li:not(.uk-tab-responsive, .uk-disabled)',         'connect'   : false,         'active'    : 0,         'animation' : false,         'duration'  : 200     },      boot: function() {          // init code         ui.ready(function(context) {              ui.$("[data-uk-tab]", context).each(function() {                  var tab = ui.$(this);                  if (!tab.data("tab")) {                     var obj = ui.tab(tab, ui.utils.options(tab.attr("data-uk-tab")));                 }             });         });     },      init: function() {          var $this = this;          this.current = false;          this.on("click.uikit.tab", this.options.target, function(e) {              e.preventdefault();              if ($this.switcher && $this.switcher.animating) {                 return;             }              var current = $this.find($this.options.target).not(this);              current.removeclass("uk-active").blur();              $this.trigger("change.uk.tab", [ui.$(this).addclass("uk-active"), $this.current]);              $this.current = ui.$(this);              // update aria             if (!$this.options.connect) {                 current.attr('aria-expanded', 'false');                 ui.$(this).attr('aria-expanded', 'true');             }         });          if (this.options.connect) {             this.connect = ui.$(this.options.connect);         }          // init responsive tab         this.responsivetab = ui.$('<li class="uk-tab-responsive uk-active"><a></a></li>').append('<div class="uk-dropdown uk-dropdown-small"><ul class="uk-nav uk-nav-dropdown"></ul><div>');          this.responsivetab.dropdown = this.responsivetab.find('.uk-dropdown');         this.responsivetab.lst      = this.responsivetab.dropdown.find('ul');         this.responsivetab.caption  = this.responsivetab.find('a:first');          if (this.element.hasclass("uk-tab-bottom")) this.responsivetab.dropdown.addclass("uk-dropdown-up");          // handle click         this.responsivetab.lst.on('click.uikit.tab', 'a', function(e) {              e.preventdefault();             e.stoppropagation();              var link = ui.$(this);              $this.element.children('li:not(.uk-tab-responsive)').eq(link.data('index')).trigger('click');         });          this.on('show.uk.switcher change.uk.tab', function(e, tab) {             $this.responsivetab.caption.html(tab.text());         });          this.element.append(this.responsivetab);          // init uikit components         if (this.options.connect) {             this.switcher = ui.switcher(this.element, {                 "toggle"    : ">li:not(.uk-tab-responsive)",                 "connect"   : this.options.connect,                 "active"    : this.options.active,                 "animation" : this.options.animation,                 "duration"  : this.options.duration             });         }          ui.dropdown(this.responsivetab, {"mode": "click"});          // init         $this.trigger("change.uk.tab", [this.element.find(this.options.target).filter('.uk-active')]);          this.check();          ui.$win.on('resize orientationchange', ui.utils.debounce(function(){             if ($this.element.is(":visible"))  $this.check();         }, 100));          this.on('display.uk.check', function(){             if ($this.element.is(":visible"))  $this.check();         });     },      check: function() {          var children = this.element.children('li:not(.uk-tab-responsive)').removeclass('uk-hidden');          if (!children.length) return;          var top          = (children.eq(0).offset().top + math.ceil(children.eq(0).height()/2)),             doresponsive = false,             item, link;          this.responsivetab.lst.empty();          children.each(function(){              if (ui.$(this).offset().top > top) {                 doresponsive = true;             }         });          if (doresponsive) {              (var = 0; < children.length; i++) {                  item = ui.$(children.eq(i));                 link = item.find('a');                  if (item.css('float') != 'none' && !item.attr('uk-dropdown')) {                      item.addclass('uk-hidden');                      if (!item.hasclass('uk-disabled')) {                         this.responsivetab.lst.append('<li><a href="'+link.attr('href')+'" data-index="'+i+'">'+link.html()+'</a></li>');                     }                 }             }         }          this.responsivetab[this.responsivetab.lst.children('li').length ? 'removeclass':'addclass']('uk-hidden');     } }); })(uikit); 

similar code created connected switcher component.

you can see demo of problem here: http://notesx.net/customrenderer.nsf/demo.xsp

source code here: https://github.com/zeromancer1972/customrendererdemo/blob/master/odp/xpages/demo.xsp

as part of library i'd find way call outside library.

any ideas highly appreciated!

newer versions of uikit have init method, upgrade , call oncomplete event of combo box.

<xp:combobox     id="combobox1">     <xp:selectitems>         <xp:this.value><![cdata[#{javascript:return ["value 1", "value 2"];}]]></xp:this.value>     </xp:selectitems>     <xp:eventhandler         event="onchange"         submit="true"         refreshmode="partial"         refreshid="page"         oncomplete="$.uikit.init();">     </xp:eventhandler> </xp:combobox>