This is a migrated thread and some comments may be shown as answers.

Tabstrip show wrong content when tab changed

2 Answers 198 Views

TabStrip

This is a migrated thread and some comments may be shown as answers.

Juergen asked on 29 Oct 2013, 10:09 AM

onetab.jpg

twotabs.jpg

backtofirsttab.jpg

Hi,

i'm new using kendo ui ... and i try to use tabstrip (loading content using ajax).

Here's my example:

<body>

<div id="kub-tabstrip">

<ul>

<li class="k-state-active">Willkommen</li>

</ul>

</div>

<script type="text/javascript">

$(document).ready(function () {

$("#kub-tabstrip").kendoTabStrip({

contentUrls: [

'/Home/WelcomeDisplay'

]

});

</script>

<a href="#" onclick="addTab()">neuer Tab</a>

</body>

Really easy ... and works.

I try to add a tab using javascript like this ...

01.<a href="#" onclick="addTab()">neuer Tab</a>

02.<script type="text/javascript">

03. function addTab() {

04. var tabStrip = $("#kub-tabstrip").kendoTabStrip().data("kendoTabStrip");

05. tabStrip.append({

06. text: "neuer Tab",

07. contentUrl: "/Seminar/Index"

08. });

09. var index = tabStrip.tabGroup.children("li").length;

10. tabStrip.select(index - 1);

11. }

12. </script>

This also seems to work. The new tab will be created and content is loaded.
My Problem occurs when i click on first tab. Then on my page the content of fist tab and second tab is rendered in first tab.
(looked like shown in screenshots).

I try this on IE and Chrome with sameresult.

Head of my html-demo-file ...

01.<!DOCTYPE html>

02.<html lang="de-DE">

03.<head>

04. <title></title>

05. <link href="Content/kendo/2012.3.1315/kendo.common.min.css" rel="stylesheet" type="text/css" />

06. <link href="Content/kendo/2012.3.1315/kendo.silver.min.css" rel="stylesheet" type="text/css" />

07. <script src="Scripts/kendo/2012.3.1315/jquery.min.js" type="text/javascript"></script>

08. <script src="Scripts/kendo/2012.3.1315/kendo.web.min.js" type="text/javascript"></script>

09. <script src="Scripts/kendo/2012.3.1315/cultures/kendo.culture.de-DE.min.js" type="text/javascript"></script>

10.</head>

Where is my error ?
What i'm doing wrong ?

Regards.

Jürgen Meyer

2 Answers, 1 is accepted

Accepted