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

tab strips and forms?

8 Answers 805 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
sebastian
Top achievements
Rank 1
sebastian asked on 18 Nov 2011, 01:30 AM
Hey guys,

having fun with kendo and jquery, learning and stuff.

i tried pulling up a html form within tab strips, and quickly found they dont work, or at least not to me.
is it possible to make this work, or would it be asking too much.

thanks in advanced

8 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 18 Nov 2011, 11:10 AM
Hi Sebastian,

I wasn't able to reproduce your issue by simply adding a form in the TabStrip and submitting it. Can you provide some sample code so I can check what is happening?

Best wishes,
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
sebastian
Top achievements
Rank 1
answered on 18 Nov 2011, 01:34 PM
<html>
<head>
<link href="Kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="Kendo/styles/kendo.kendo.min.css" rel="stylesheet" />
<script language="javascript" src="jquery-1.6.4.js"></script>
<script language="javascript" src="Kendo/js/kendo.all.min.js"></script>
<!--<script type="text/javascript" src="jquery.maskedinput-1.3.js"></script>!-->
 
 
</head>
 
 
<div id="example" class="k-content">
            <div id="tabstrip">
                <ul>
                    <li class="k-state-active">
                        First Tab
                    </li>
                    <li>
                        Second Tab
                    </li>
                   
                </ul>
                <div>
                     
                </div>
                <div>
                </div>
                 
            </div>
            <script>
                $(document).ready(function() {
                    $("#tabstrip").kendoTabStrip({
                    contentUrls: ['agregarViajes.php', null ]
                        });
                });
            </script>
        </div>
         
</html>


agregarViajes.php is the form im trying to load into tabstrips.

edit:
ok,i got it to work fine on firefox and ie8, however it doesnt on chrome. had some syntax issues

btw, is there a way to submit the form and keep processing it, and loading other pages within tabstrips.

thanks a bunch
0
Kamen Bundev
Telerik team
answered on 22 Nov 2011, 08:45 AM
Hello Sebastian,

You can use either jQuery $.ajax() calls to send the data and process it back or use an iframe, but it will reload at the same place.

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
sebastian
Top achievements
Rank 1
answered on 26 Nov 2011, 01:33 AM
thanks for the replies kamen,

however just when i thought i had it done, i got pulled back down,

currently on firefox i cant display the code listed above. i cant figure out why it just stopped.

i swicthed to ie9, and it works but they are not tabs, as Marcus posted on his thread below mine.

what am i missing?
0
Kamen Bundev
Telerik team
answered on 30 Nov 2011, 08:32 AM
Hello Sebastian,

I'm not sure what do you mean by "they are not tabs". Can you post an updated code sample and describe the steps to reproduce your problem? Are there any errors reported in Firebug or IE9 console?

Best wishes,
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
sebastian
Top achievements
Rank 1
answered on 07 Dec 2011, 05:32 PM
ok , so since tabstrips went ballistic on me i havent done much else with it. im putting my tester cap on, and resuming, cause i really love combox and other widgets.

these are a few things i have so far.

1. Fill form button selects tab, tab gets selected, but the select option/function does not load.
2. tabs look weird, no matter what browser i use, either in my home cpu or others. 
3. at least ie9 loads the contentUrl specified, ff and chrome fail on me.
4. how would i go about processing .ajax() calls to fill out the form?



<td> <input name="seleccionCliente1" id="seleccionCliente1" /></td>
 
<script>
 
var data =[<?php echo $searchbox1; ?>];
 
$("#seleccionCliente1").kendoAutoComplete({
    dataSource: data,
    change: function(){
    var autocomplete = $("#seleccionCliente1").data("kendoAutoComplete");
   
    //window.location = "/mensajeria/mensajeriamain.php?value="+ autocomplete.value(); 
    }
    });
 
</script>
 
<div id="example" class="k-content">
            <div id="tabstrip">
                <ul>
                    <li><!--class="k-state-active"-->
                        First Tab
                    </li>
                    <li>
                        Second Tab
                    </li>               
                </ul>
                <div>                 
                </div>
                <div>
                </div>
                 
            </div>
            <script>
               $(document).ready(function() {
                    function onselect(){
                    alert('checking on Fill Button');
                    };
                    function onload(){         
                    };         
                     
                  $("#tabstrip").kendoTabStrip({
                    select: onselect,
                    contentLoad: onload,
                    collapsible: true,
                    contentUrls: ['agregarViajes.php' , null]
                     
                    });
                    });
     
     
            </script>
        </div>
 
<button id="Fill" class="k-button">Fill Form</button>
<script>
 
$('#Fill').live('click', function(){
  var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
  tabstrip.select(tabstrip.tabGroup.children("li:first"));
  
  });
</script>
</html>

hope my noob questions arent much of a bother,
i eagerly await your answer kamen!
0
Bob
Top achievements
Rank 1
answered on 14 Jan 2012, 04:47 PM
i also have a problem with the KendoUI tabs ... on IE9.0.8..  Exact same code works fine on FireFox 9.0.1,   and Chrome 16.0.912

on IE9, the tabs render vertically, looking almost like a malfunctioning accordion.

Please advise ...
0
Kamen Bundev
Telerik team
answered on 18 Jan 2012, 05:01 PM
Hi Sebastian,

1. Seems the missing select event is a bug. I've fixed it and the fix will be available with the service pack. I've also updated you points for finding it. As a workaround, add this code first after the Kendo scripts:
kendo.ui.TabStrip.prototype.select = function (element) {
   var that = this;

   if (arguments.length == 0) {
       return that.element.find("li.k-state-active");
   }

   $(element).each(function (index, item) {
       item = $(item);
       if (!item.hasClass("k-state-active") && !that.trigger("select", { item: item[0], contentElement: that.contentElement(item.index()) })) {
           that.activateTab(item);
       }
   });

   return that;
};

Please also don't reinitialize the TabStrip on every button click or this won't work, e.g. use something like this:
$('#Fill').live('click', function(){
    var tabstrip = $("#tabstrip").data("kendoTabStrip");
    tabstrip.select(tabstrip.tabGroup.children("li:first"));
});


2. and @Bob - Kendo UI doesn't support Quirksmode, you need to set your doctype or you will experience all kinds of issues due to IE's old 5.5 engine that handles Quirksmode.
3. Can you provide a live sample where we can reproduce the non-loading content issue?
4. Check the jQuery documentation about its syntax and usage.

All the best,
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!
Tags
TabStrip
Asked by
sebastian
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
sebastian
Top achievements
Rank 1
Bob
Top achievements
Rank 1
Share this question
or