How to select a tab with javascript:

  • Fabiano Zara

    Fabiano Zara - 2011-12-23

    Hello everybody,
    is it possibile to select a tab using javascript postFunction  ?
    Thanks in advance.

  • Victor Homyakov

    Victor Homyakov - 2011-12-23

    1. Tab with <ajax:tab id="…" defaultTab="true" /> will be selected automatically. Isn't this what you need?
    2. postFunction in ajax:tabPanel tag is invoked only after AJAX request, and request is issued after click on tab, so this tab is already selected. Or you need to select another tab?

  • Fabiano Zara

    Fabiano Zara - 2011-12-27

    Yes, I need to select another tab after executing an ajax update field request: if  update is ok I need to select a tab. I think that I have to write some code in the  postFunction's update field tag , but I don't know how !

  • Victor Homyakov

    Victor Homyakov - 2011-12-27

    OK, I understood your question.

    1. You can write JavaScript code in preFunction, postFunction and errorFunction as follows:
    <ajax:sometag …
      preFunction="function() { /* your code goes here, return string "cancel" to abort request */ }"
      postFunction="function(response) { /* your code goes here, also you have access to AJAX response */ }"
      errorFunction="function(response) { /* your code goes here, also you have access to AJAX response */ }"

    2. There are several ways to activate tab "tab1" from JavaScript for given JSP example (insignificant details omitted):
    <ajax:tabPanel eventType="click" … ><%- switching tabs on click event (default) -%>
      <ajax:tab id="tab1" … /><%- this tab will have id "tab1" to simplify access from script -%>

    a) fire/simulate event (this requires additional event simulation library) on anchor (<A> element) in desired tab:

    b) directly call event handler (onclick for eventType="click", onmouseover for eventType="mouseover" - you've got the idea):

    c) remember tab panel script in some variable and call execute() - the JSP example should be modified:
    <ajax:tabPanel var="tabPanel1" eventType="click" … >
      <ajax:tab id="tab1" … />
    In JavaScript will be created object with name tabPanel1, and you can invoke:

    P.S. Which version of ajaxtags are you using?

  • Fabiano Zara

    Fabiano Zara - 2011-12-28

    The b) option works fine with IE Explorer but it doesn't  with Google Chrome: it is not a problem for now.
    The Chrome's version is 16.0.912.63.
    The c) option goes to crash, this is the error:

    JSPG0123E:impossible to get  info about  var tag attribute.

    it seems that the statement 'var=' is not recognized. I'm using    the 1.5.6 version of ajaxtags.

    Thanks very much for the support!

  • Victor Homyakov

    Victor Homyakov - 2011-12-29

    > The b) option works fine with IE Explorer but it doesn't  with Google Chrome

    Strange enough… it should work. Can you give additional info? Can you execute in console of Chrome's Web Inspector on your test page this line of code (tab1 - your tab identifier) and give me results:
    $$("#tab1 a")

    > The c) option goes to crash

    You are right, "var" attribute was added to ajax:tabPanel only in 1.5.7-SNAPSHOT - try to use this version.

  • Fabiano Zara

    Fabiano Zara - 2011-12-29

    This is the result  ("010" is my tag ID)

    >$$("#010 a");

    When I execute  '$("010").down("a").onclick();' statement inside the HTML page  ,
    the Chrome's  console give me this:
    Uncaught Error: SYNTAX_ERR: DOM Exception 12
    Class.create.findElements prototype.js:3525
    Object.extend.findChildElements prototype.js:4112 prototype.js:2256
    Element.Methods.down prototype.js:2225
    _methodized prototype.js:431
    (anonymous function) javascript.jsp:68

  • Victor Homyakov

    Victor Homyakov - 2011-12-30

    Accordingly to standards identifier cannot start with a digit - this is a cause of error. You should prepend numbers in your identifiers with some prefix, e.g. $("tab010").down("a").onclick(); should work

  • Fabiano Zara

    Fabiano Zara - 2012-01-09

    You are right! Now it  works fine.
    Thank you very much.


Log in to post a comment.

Get latest updates about Open Source Projects, Conferences and News.

Sign up for the SourceForge newsletter:

JavaScript is required for this form.

No, thanks