Get KoolPHP UI with 30% OFF!

KoolTabItem.select method

  1. Index
  2. KoolPHP UI
  3. KoolTabs
Post a reply

KoolTabItem.select method

Jayme
Reply
Hello,
I am using KoolPHP controls version 8.9 and I have built a page which uses a KoolTab.
I have a JavaScript method which calls the KoolTabItem.select() method, but although the correct tab is selected the OnTabSelect event is not fired when the select method is called, only when the user clicks on the tab.
Is this the correct behaviour of the component?
Thank you very much.
Best regards
Jayme Jeffman
Posted Oct 11, 2017 Kool
Anthony Amolochitis
Reply
That sounds like you are selecting the tab.
Are you trying to reload the page or not reload the page when the tab selects?
You are probably trying to hide and show "div" tags when clicking those tabs. That is probably what you need to do when selecting the tab.
Hope this helps :)
Posted Oct 12, 2017 Kool
Jayme
Reply
Thank you very much for answering me.
As a matter of fact I am showing and hiding div panels which has been rendered before, so there is no page reload, only I might be using AJAX eventually.
I will make an example of what I am doing to check and show if it happens on another application. If it happens I think it is a bug of the component itself.
I have made a workaround moving the code I would like to be run in both situations to a convinient point, which can survive without the calling of OnTabSelect event.
Best regards.
Jayme Jeffman Filho
Posted Oct 12, 2017 Kool
Anthony Amolochitis
Reply
Here is their demo page for the Kooltabs too.
http://demo.koolphp.net/Examples/KoolTabs/Client_Side_API/RegisterEvent/index.php
Posted Oct 13, 2017 Kool
Jayme
Reply
I have made a simple example on I am dealing with KoolTabs and the example works fine, my real application do not, though.
<?php
  $KoolControlsFolder ="../../KoolPHPSuite/KoolControls";
  require $KoolControlsFolder."/KoolAjax/koolajax.php";
  require $KoolControlsFolder."/KoolTabs/kooltabs.php";
  $ktm = new KoolTabs("ktm");
  $ktm->scriptFolder = $KoolControlsFolder."/KoolTabs";
  $ktm->styleFolder="office2007";
  $ktm->position = "top";
  $ktm->Width = "1000px";
  $this_tab = $ktm->addTab("root","tsFirst","First Tab",NULL,true);
  $this_tab->width = "200px";
  $this_tab = $ktm->addTab("root","tsSecond","Second Tab",NULL,false);
  $this_tab->width = "200px";
?>
<!DOCTYPE HTML>
<html>
<head>
  <title>Solve this please!</title>
  <META name="purpose" content="check and show KoolTabItem::select method behaviour">
  <META name="generator" content="Rapid PPHP 2015">
  <script type="text/javascript">
    //-----------------------------------------------
    //            Global Variábles
    //-----------------------------------------------
    var Blocks         = ["first","second","code"];
    function pageLoad()
    {
      var blk = null;
      for( var i=0; i < Blocks.length; ++ i ){
            blk = document.getElementById(Blocks[i]);
            if(blk) blk.style.display = "none";
      }
      blk = document.getElementById("first");
      if(blk) blk.style.display = "block";
      if( ktm ) { ktm.registerEvent("OnSelect", ktmTabSelect); }
    }
  //----------------------------------------------------------------------
  function selectChosen()
  {
    var tabItem = null;
    selObj = document.getElementById("seltab");
    if(selObj){
      if(selObj.selectedIndex > 0 ){
        tabItem = ktm.getTab(selObj.options[selObj.selectedIndex].value);
        if(tabItem) tabItem.select();
      }
      else alert("You must choose a tab to select!");
    }
  }
  //----------------------------------------------------------------------
  function ktmTabSelect( sender, arg )
  {
    var blk    = null;
    blk = document.getElementById("first");
    if(blk) blk.style.display = "none";
    blk = document.getElementById("second");
    if(blk) blk.style.display = "none";
    blk = document.getElementById("altprop");
    if(blk) blk.style.display = "none";
    blk    = null;
    if( arg.TabId == "tsFirst") blk = document.getElementById("first");
    if( arg.TabId == "tsSecond") blk = document.getElementById("second");
    if(blk) blk.style.display = "block";
  }
  //----------------------------------------------------------------------
  </script>
  <STYLE type="text/css">
    <!--
    -->
  </STYLE>
</head>
<body onload="pageLoad();">
  <?php echo $koolajax->Render(); ?>
  <div id="header">
    <p>
      <select name="seltab" id="seltab" style="margin: 0px 8px 0px 50px;">
        <option value="tsNone"></option>
        <option value="tsFirst">First Tab</option>
        <option value="tsSecond">Second Tab</option>
      </select> <input type="button" value="Select Tab" onclick="selectChosen();" />
    </p>
  </div>
  <div id="tabcnt"> <?php echo $ktm->Render(); ?> </div>
  <div id="first"  style="display: block;" class="ktItem"><p style="margin: 30px; font: italic bold 24px/30px Arial, Sans Serif">This is the content of the First Tab</p></div>
  <div id="second" style="display: block;" class="ktItem"><p style="margin: 30px; font: italic bold 24px/30px Arial, Sans Serif; color: #CC0000">This is the content of the Second Tab</p></div>
  <div id="code"   style="display: block;" class="ktItem">
    <textarea name="" id="codeText" style="resize: none; width: 1000px; height:400px; overflow:auto; "></textarea>
  </div>
</body>
</html>
Posted Oct 13, 2017 Kool
Anthony Amolochitis
Reply
Make sure you set your requires and to create your KoolAjax object too.
Posted Oct 13, 2017 Kool
Jayme
Reply
Of course I am doing that.
It might be something inside the JavaScript functions I am calling inside the event handler methods, perhaps the order of actions might be important.
I will check it.
Thank you very much.
Best regards.
Jayme Jeffman
Posted Oct 13, 2017 Kool