this plug-in is not working with dynamically created tabs

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Create tabs dynamically.
   ex.

     $.each(jsonData, function (i, elem) {
                    $("<li><a href='#" + elem.AttributeId + "'>" + elem.AttributeName + "</a></li>").appendTo(ul);
                    $("<div id='" + elem.AttributeId + "'></div>").appendTo(tabs);
                });    
2. add paginations
    tabs.tabs('paging', { cycle: true, nextButton: 'next &gt;', prevButton: '&lt; prev' });

3.

What is the expected output? What do you see instead?
all tabs to be aligned in one line and add paging functionality. But i got 
exception at 

 function destroy() {
                // remove buttons
                $('.ui-tabs-paging-next', self.element).remove();
                $('.ui-tabs-paging-prev', self.element).remove();

                // show all tabs
                self.tabs.show(); -- Here is error ( tabs is undefined ).

                initialized = false;

                $(window).unbind('resize', handleResize);
            }


What version of the product are you using? On what operating system?

I am using latest version.


Please provide any additional information below.

Original issue reported on code.google.com by Sai.Lax...@gmail.com on 27 Dec 2013 at 7:56

[GoogleCodeExporter]

Are you running "tabs.tabs();" before "tabs.tabs('paging' ...);" ?  You need to 
initialize the regular jQuery "tabs" plugin on the list before using this 
extension.  If you are doing this and still encountering an error, please 
provide a fully working reduced test case that I can run myself.

Original comment by brian.se...@gmail.com on 27 Dec 2013 at 10:18

[GoogleCodeExporter]

Hi,

Thanks for the reply. I have just copied example that available on this web 
site. Please see attached files.

First I have clicked on continue when I got exception ( exception1.png ) and I 
got output as show in excecption1.png.

Thanks,
Sai

Original comment by Sai.Lax...@gmail.com on 30 Dec 2013 at 2:23

Attachments:

• exception.png
• exception1.png
• html.txt

[GoogleCodeExporter]

I can't reproduce the problem with the example you provided in html.txt.  I 
even tried it with the latest jQuery on the Google CDN (jQuery 2.0.3 and jQuery 
UI 1.10.3) and couldn't produce any error in the latest Chrome or IE 11.  
You'll need to provide a complete example (including which version of jQuery or 
jQuery UI).

If you are adding tabs dynamically, you should remove the paging before adding 
your tab then initialize it again...

   jQuery('#tabs').tabs('pagingDestroy');
   ... logic to add tab ...
   jQuery('#tabs').tabs('paging');

Original comment by brian.se...@gmail.com on 28 Jan 2014 at 3:14

[GoogleCodeExporter]

I had this exact problem and it was because I was using the latest version of 
jquery-ui-tabs-paging with JQuery-1.7.2.

I switched to using the legacy version and the problem was solved. 

The key issue was that in later versions of JQuery > 1.7 it appears that 
self.lis was renamed self.tabs.

Original comment by aaron.tr...@gmail.com on 8 Jul 2014 at 12:59

[GoogleCodeExporter]

It was the exact issue that I had and it fixed with destroy and recreating 
paging again.

Original comment by masiha1...@gmail.com on 22 Apr 2015 at 2:35