jQuery UI tabs selected tab.

[annet]

I am working on a timetable app using jQuery UI tab.


This is the timetable view:

<!-- Tabs -->
<h2 class="demoHeaders">Lesrooster</h2>
<div id="tabs">
<ul>
<li><a href="{{=URL('classtimes',args=[1])}}">Monday</a></li>
<li><a href="{{=URL('classtimes',args=[2])}}">Tuesday</a></
li>
<li><a href="{{=URL('classtimes',args=[3])}}">Wednesday</a></
li>
<li><a href="{{=URL('classtimes',args=[4])}}">Thursday</a></
li>
<li><a href="{{=URL('classtimes',args=[5])}}">Friday</a></li>
<li><a href="{{=URL('classtimes',args=[6])}}">Saturday</a></
li>
<li><a href="{{=URL('classtimes',args=[7])}}">Sunday</a></
li>
<li><a href="{{=URL('classtimes',args=['week'])}}">Week</
a></li>
</ul>
</div> <!-- tabs -->


This the controller:

def timetable():
return dict()

def classtimes():
if request.args(0)=='week':
weekday='all'
rows=db(db.lesrooster.bedrijf_id==1).select(db.lesrooster.ALL,
\
orderby=db.lesrooster.dag_id|db.lesrooster.tijd)
else:
weekday=[]

rows=db((db.lesrooster.bedrijf_id==1)&(db.lesrooster.dag_id==request.args(0))).select(db.lesrooster.ALL
\
,orderby=db.lesrooster.tijd)
return dict(rows=rows)

The classtimes view is a table based view.

This all works, what I don't get to work is the selected tab being
today's tab, i.e. when today is Friday, Friday's classes should be
displayed in the Friday tab.

I hope one of you will be able to help me solve this problem.

Kind regards,

Annet

[Richard Vézina]

Here the api of tabs plugin :

selected

Number

Default:

0

Zero-based index of the tab to be selected on initialization. To set all tabs to unselected pass -1 as value.

Code examples

Initialize a tabs with the selected option specified.

$( ".selector" ).tabs({ selected: 3 });

Get or set the selected option, after init.

//getter
var selected = $( ".selector" ).tabs( "option", "selected" );
//setter
$( ".selector" ).tabs( "option", "selected", 3 );

I think you only have to pass the actual weekday as a selected value of you tabs init code...

You can do this like that :

    var actual_day = "{{=actual_weekday_passed_from_web2py_controller}}"

$( ".selector" ).tabs( "option", "selected", actual_day );

I didn't test any thing... But, I guest it should works...

Richard

[Cliff]

Haven't tried Richard's way, but here is how I do it.

You need landing areas for your data.
Something like this:

<div id="tabs"><ul>
<li><a href="{{=URL('classtimes',args='tab_1')}}">Monday</a></
li>
<li><a href="{{=URL('classtimes',args='tab_2')}}">Tuesday</
a></
li>
<li><a href="{{=URL('classtimes',args='tab_3')}}">Wednesday</
a></
li>
<li><a href="{{=URL('classtimes',args='tab_4')}}">Thursday</
a></
li>
<li><a href="{{=URL('classtimes',args='tab_5')}}">Friday</a></
li>
<li><a href="{{=URL('classtimes',args='tab_6')}}">Saturday</
a></
li>
<li><a href="{{=URL('classtimes',args='tab_7')}}">Sunday</

a></
li>
<li><a href="{{=URL('classtimes',args=['week'])}}">Week</
a></li>
</ul>
</div><!--tabs-->

<div id="tab_1">
{{=stuff_to_go_on_tab_1}}
</div>
<div id="tab_2">
{{=stuff_to_go_on_tab_2}}
</div>
.
.
.

In the controller:

def function_associated_with_the_view():

## get records for tab 1 from the db
## build the table of info for tab 1
stuff_to_go_on_tab_1 = TABLE(...yada, yada) # or whatever


## get records for tab from the db
## build the table of info for tab 2
stuff_to_go_on_tab_2 = TABLE(...yada, yada)

...

return dict(
stuff_to_go_on_tab_1=stuff_to_go_on_tab_1,
stuff_to_go_on_tab_2=stuff_to_go_on_tab_2,
...
)

Also note you don't need to use line continuation inside a tuple,
list, or dictionary.

URL doesn't need the list delimiters if there's only one arg.


On Oct 21, 1:12 pm, Richard Vézina <ml.richard.vez...@gmail.com>
wrote:

> Here the api of tabs plugin :
>

> selected <http://jqueryui.com/demos/tabs/#option-selected>NumberDefault:0

>
> Zero-based index of the tab to be selected on initialization. To set all
> tabs to unselected pass -1 as value.

> Code examplesInitialize a tabs with the selected option specified.

[annet]

Hi Richard,

Thanks for your reply. I tried in web2py_ajax.html:

<script type="text/javascript">
$(function(){
// Tabs
$('#tabs').tabs();

$(".selector").tabs({selected: 3});

});
</script>

(for convenience I used the constant 3) ... and in the view I tried:

<script type="text/javascript">
var actual_day = "{{=weekday}}"

$(".selector").tabs("option", "selected", actual_day );

</script>

Neither of these solutions work. Do you have any idea why not?


Hi Cliff,

Thanks for your reply.

> You need landing areas for your data.

That's what I thought, however, from the ajax example I learned I
somehow don't need them. The plugin creates landing areas for every
tab with the id set to: id="ui-tabs-1", id="ui-tabs-2" etc.

Which in my case is quite convenient for all tabs but the last have
the same content: class times for a specific day. So the controller
and the view are rather simple:

rows=db((db.lesrooster.bedrijf_id==1)&(db.lesrooster.dag_id==request.args(0))).select(db.lesrooster.ALL,orderby=db.lesrooster.tijd)

and the view a table with class times.

> Also note you don't need to use line continuation inside a tuple,
> list, or dictionary.

> URL doesn't need the list delimiters if there's only one arg.

Thanks, I removed them all.


Kind regards,

Annet.