We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Create tab dynamically

Thread ID:

Created:

Updated:

Platform:

Replies:

116227 Apr 29,2014 05:58 PM UTC May 2,2014 01:47 PM UTC JavaScript 4
loading
Tags: ejmTab
Mario Zucca
Asked On April 29, 2014 05:58 PM UTC

Hi,
can you provide a sample on how to create a tab dynamically?

Aravindan V [Syncfusion]
Replied On April 30, 2014 12:41 PM UTC

Hi Mario,

Thanks for your interest in Syncfusion products.

To create tab dynamically, create wrapper element without data-role=”ejmtab” attribute as in below code snippets.

HTML

 <div id="tabsample">// Tab Wrapper

        <ul>

            <li data-ej-rel='nofollow' href="#default1" data-ej-text='Movies'></li> // Tab Item

            <li data-ej-rel='nofollow' href="#default2" data-ej-text='Music'></li>// Tab Item

            <li data-ej-rel='nofollow' href="#default3" data-ej-text='Favourites'></li>// Tab Item

            <li data-ej-rel='nofollow' href="#default4" data-ej-text='Playlist'></li>// Tab Item

        </ul>

</div>

 

 

 

 

 







To initialize tab dynamically please call ejmTab() plugin on document.ready. Please refer the below code snippets.

Script


Option 1

 

<script>

        $(document).ready(function () {

            $('#tabsample').ejmTab(); // Creating Tab Dynamically with default values 

        });
</script>

Option 2

 

<script>

        $(document).ready(function () {

            $('#tabsample').ejmTab({theme:”dark”}); // Creating Tab Dynamically with custom values 

        });
</script>

 

Also we have attached reference sample in the below link.

 

Tab_Sample.zip

Please check this let us know if you have any queries.

 

Regards,
Aravindan 


Mario Zucca
Replied On May 1, 2014 03:08 PM UTC

Hi Aravindan,
thanks for your reply. I wasn't really clear, I meant to ask how to create a tab panel inside an already created tab and if the new tab can be loaded by an Ajax call.

best regards
mario

Mario Zucca
Replied On May 1, 2014 04:38 PM UTC

Hi tried this simple code:
var tab = $("#mainTab");
tab.ejTab("add","#tabItem1","New Item",3);

It works but after the tab has been added all the tabs seem to be disabled (when I click over any tab nothing happens). And I don't know how to ajax load the tab

thanks in advance

Harikrishnan P [Syncfusion]
Replied On May 2, 2014 01:47 PM UTC

Hi Mario,

Sorry for the inconvenience caused. We have tried your code in our sample and we are unable to reproduce the issue in our side, since we are able to load a new tab item successfully. We have attached a sample below, in which new tab is added as you have tried. Also, the sample showcases how to load a tab item through AJAX call. Could you please check with the attached sample? If still you face problem please revert back the sample along with the replication procedure of issue. This will help us to serve you better. Please find the sample location as follows,

 

Sample location: Tab Sample

 

Query: how to ajax load the tab

Please refer the code snippet below,

 

            $.ajax({

                url: "Gridcontent.TXT",

                datatype: "html",

                success: function (content) {

                    if (success) {

                        tabObj.add("#NewTabItem", "GridItem", 2);

                        $("#NewTabItem").html(content);  //The content from Gridcontent.TXT is loaded to the newly added tab item

                        success = false;

                    }

                },

            });

 

Here, the AJAX “url” specifies the path of the file, using the text content of “Gridcontent” file we are going to load the content for the new tab item on success. On AJAX success function, new tab item is added using tab object and the content for the new tab item is added by using the method html().

 

Please let us know if you have further queries.

Regards,

HariKrishnan.


Attachment: Tab_Ajax_Call_27dc6673.zip

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;