This is a migrated thread and some comments may be shown as answers.
Tablet behaviour of TabStrip with onSelect event
3 Answers 89 Views
This is a migrated thread and some comments may be shown as answers.
supsym
Top achievements
Rank 1
supsym asked on 22 May 2012, 03:04 PM
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!

3 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 24 May 2012, 02:29 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
supsym
Top achievements
Rank 1
answered on 25 May 2012, 08:21 AM
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 :)
0
Kamen Bundev
Telerik team
answered on 28 May 2012, 09:03 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
supsym
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
supsym
Top achievements
Rank 1
Share this question
or