Tablet behaviour of TabStrip with onSelect event

[supsym]

Hi again here guys,

I've noticed another strange problem on my tablet with "select" event on TabStrip:

here's functions:

$(document).ready(function() {

    tabStrip = $("#chPage").kendoTabStrip({

            select: onSelect,

            animation: false

    });

 

 

 

function onSelect(e) {$(document).ready(function() {

    switch(e.item.id) {

        case "chBtn1" :

             $('#chPage-1').empty();

        break; 

        case "chBtn2" :

            $('#chPage-2').empty();

        break; 

        case "chBtn3" :

            $('#chPage-3').empty();

        break; 

    }

    fillPages();

}

On my Desktop, it works like a charm, with no problem at all, but on my tablet it's broken and I'm stucked. Console says :

Uncaught TypeError: Cannot read property 'id' of undefined

Any help would be appreciated!

[Kamen Bundev]

Hi Mario,

Your onSelect event handler looks rather strange - do you actually set the document ready event on every TabStrip selection or is this a copy/paste mistake? Also it would help if you also post the markup from which you initialize the TabStrip.

Greetings,
Kamen Bundev
the Telerik team

[supsym]

Hi Kamen,

That was just a copy/paste problem... The issue remains...

here's the correct code...

$(document).ready(function() {

    tabStrip = $("#chPage").kendoTabStrip({

            select: onSelect,

            animation: false

    });

  

  

  

function onSelect(e) {

    switch(e.item.id) {

        case "chBtn1" :

             $('#chPage-1').empty();

        break;

        case "chBtn2" :

            $('#chPage-2').empty();

        break;

        case "chBtn3" :

            $('#chPage-3').empty();

        break;

    }

    fillPages();

}

... and the markup...

<div id="chPage">

    <ul>

      <li id="chBtn1" class="k-state-active"> Btn1 </li>

      <li id="chBtn2"> Btn2 </li>

      <li id="chBtn3"> Btn3 </li>

    </ul>

    <div id="chAjaxContent1">

        <div id="chAjaxContentData1"></div>

        <div id="chAjaxContentDetails1"></div>

    </div>

    <div id="chAjaxContent2">

        <div id="chAjaxContentData2"></div>

        <div id="chAjaxContentDetails2"></div>

    </div>

    <div id="chAjaxContent3">

        <div id="chAjaxContentData3"></div>

        <div id="chAjaxContentDetails3"></div>

    </div>

</div>

But I've figured out how solve that (leaving this solution for other people): my bad move was calling the #chPage-<number> which is made directly by Kendo. 
It's easier (and safer) to call the inside divs without touching the Kendo generated ids, and it works very well.
Thanks again for you support and keep on with Kendo :)

[Kamen Bundev]

Hi Mario,

From the followup you posted it seems that the ID's are not yet generated when you try to use them, maybe due to slower javascript execution. Glad you fixed it in your case.

Greetings,
Kamen Bundev
the Telerik team