Selecting Accordion tab on log in

[markster]

In my app, when the user logs in, I set the procedure to one located on a different Accordion "tab" than the startup one. When I open this procedure I would like to set the appropriate Accordion tab to be the active one. I see in the jQuery API the following example code to accomplish this:   

$( ".selector" ).accordion( "option", "active", 2 );

However there are two problems: 1) that is not Clarion syntax and 2) which procedure and which embed would I put the appropriate Clarion code in?

Thanks,

Mark

[Bruce]

Hi Mark,

First think to point out - if you want to get very fine-grained about the user interface, then sooner or later you're gonna want to learn some JavaScript - and specifically jQuery. That said, you can do a lot with a very little.

In your case you want to set the tab which will be open when the form opens. There is already a session value for this though. So at the top of the GenerateForm routine you can do something like;

p_web.SSV('showtab_UpdateTrosk',1)

where the 1 is the tab you want to open. (NOTE Accordions are numbered from 0, so number 1 is the second tab).

This approach gets complicated though if you are on a form, which has a Lookup button, in Page mode. In Popup mode you should be ok.

If it was some other property you wanted to set, then use Loc:Options as before.

If you want to change the accordion when the page is open, then it gets a tad more complicated, and will depend on the trigger. Say, for example you wanted to change to a different tab if the user clicks on a button, then you would use the syntax you mention. This would go into the "Server code" for the button (ie the Validate::Fieldname routine)

In this context p_web.jquery is used. This takes 4 or 5 parameters;

String p_id,String p_Action,String p_options,<String p_more>,Long p_Html=0

the first parameter matches the selector. Which means you need to know the name of the accordion. this is also the first parameter where the accordion options were set. So, in an app here I have (search for 'accordion' to find this line)

Packet = clip(Packet) & p_web.jQuery('#' & lower('Tab_UpdateTrosk') & '_div','accordion',loc:options)

meaning that the id is

'#' & lower('Tab_UpdateTrosk') & '_div'

the "action" parameter is the widget you are talking to - ie in this case accordion.

options is everything  inside the brackets, ie
"option", "active", 2

so the call becomes

p_web.jquery('#' & lower('Tab_UpdateTrosk') & '_div','accordion','"option", "active", 2');

But remember this approach is only necessary if you want to change options _after_ the form has been presented.

[markster]

Thanks for the comprehensive response. That gives me all I need to get that working.

Mark

[Bruce]

Update: As from build 7.27

If you want to change the tab when the page is open, set a variable loc:tabto to the tab number you want, and call do ChangeTab. Remember that tabs are numbered from 0. So, for example


  loc:tabTo = 3
  do ChangeTab

sets the user onto the _fourth_ tab which is visible on the form.
This code can be done most anywhere on a form. It is also "tab type" independent - meaning it'll work for all three tab types where it makes sense (Tab, Accordion and Wizard.)

cheers
Bruce