How do I use JQuery UI tabs with Django (or other tab-solution)?

[Torbjorn]

Hi,

I would like to use the JQuery UI tabs in my Django app but how should
I do that? I cannot figure it out with Django's template system. One
problem is inheritance but maybe I should skip that? In my first shot
I got the tabs nice looking, one template for each tab and I can
navigate between the tabs, but, when I do something on a tab, for
instance posting a form, I would like to get back to that tab. How do
I do that?

Or, is it another smoother way to get tabs in a Django app?

Thanks
/Torbjörn

[Jonathan Barratt]

On 13 ต.ค. 2010, at 14:14, Torbjorn wrote:

> <snip>

>
> Or, is it another smoother way to get tabs in a Django app?

If you're not completely tied to jQuery, you might consider dojango, which is Django-integrated version of the Dojo ajax toolkit, which does support tabs.

Good luck!
Jonathan

[David De La Harpe Golden]

On 13/10/10 08:14, Torbjorn wrote:

> In my first shot
> I got the tabs nice looking, one template for each tab and I can
> navigate between the tabs, but, when I do something on a tab, for
> instance posting a form, I would like to get back to that tab. How do
> I do that?
>

Well, django is server-side. When you say "one template for each tab
and I can navigate between the tabs", there are several different ways
to do that, and depending on how you've structured things somewhat
different things might be appropriate.

If you're using the tabs in "ajax mode" [1] (i.e. you have some toplevel
django view that responds with a skeleton page including your tabs, and
then when the client runs that page it does a bunch of ajax gets to
further inner/partial django views that respond with the individual tab
pane contents) then, well, the best thing to do is probably to use ajax
to post your form too, in which case the user then wouldn't be doing a
toplevel navigate away in the first place. There's a plugin which makes
that really easy [2].

OTOH you might prefer working in whole-page terms in which case you can
e.g. set a cookie to remember what tab was selected the last time the
page was run [3].

[1] http://jqueryui.com/demos/tabs/#Ajax_mode
[2] http://jquery.malsup.com/form/
[3] http://jqueryui.com/demos/tabs/#cookie

[Torbjorn]

Thanks for the replies.

Jonathan: No I'm not stuck to JQuery, I will consider dojango. Thanks

David: I'm newbie at JavaScript (as we can see) and I only use JQuery
UI for the tabs. Here is how I use it in my base.html

<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
<li><a href="{% url newsite.mealplan.views.currentweek %}">First</
a></li>
<li><a href="{% url newsite.mealplan.courseviews.courses
%}">Second</a></li>
<li><a href="{% url newsite.mealplan.courseviews.categories
%}">Third</a></li>
</ul>
</div>

That works, but when I choose tab Third and post a form (django) I get
to the "original" page without tabs by rendering the category
template. Here is the code for that

return render_to_response("categories.html",
{"categories":categories, 'form':form})

So, how should I rewrite this so the third tab is shown instead of the
template only? Is cookies the solution to that?

Thanks
/Torbjörn

[David De La Harpe Golden]

On 13/10/10 16:17, Torbjorn wrote:
> Thanks for the replies.
>
> Jonathan: No I'm not stuck to JQuery, I will consider dojango. Thanks
>

[Another thing to be aware of is dajaxproject.com]

> <li><a href="{% url newsite.mealplan.courseviews.categories %}">Third</a></li>

Okay, so you _are_ using the tabs' ajax mode.

> That works, but when I choose tab Third and post a form (django) I get
> to the "original" page without tabs by rendering the category
> template.

Because the browser client is still doing a normal form post and
therefore it shows the server's response as a whole new toplevel page,
presumably.

> Here is the code for that
>
> return render_to_response("categories.html",
> {"categories":categories, 'form':form})
>

> So, how should I rewrite this so the third tab is shown instead of the
> template only?

Rewrite newsite.mealplan.courseviews.categories the django view ? No
need to do much there, at least if you're going with the method I
suggested (using the jquery-form plugin), maybe some small changes to
the categories.html django template (only a html fragment, it's one
place you could put the ajaxification script since jquery takes pains

Please take a close look at this example:

http://jquery.malsup.com/form/#html

As you can see, you can use the plugin to hijack a form submission into
an ajax [xmlhttp]request, and then put the server's (django's) response
back into a particular place in the document (right back into the
relevant tab being an obvious choice!)

There certainly are a number of other approaches possible, but that one
is a one-liner or close enough and, well, you have already gone down the
ajax path.

> Is cookies the solution to that?

cookies were relevant if you were re-rendering the whole of base.html
with the tabs in a view that you'd redirected to or something and wanted
the client to remember to switch to the tab it had used last time it
showed the response.

[David De La Harpe Golden]

On 13/10/10 17:55, David De La Harpe Golden wrote:

> it's one
> place you could put the ajaxification script since jquery takes pains

sorry, meant to finish that sentence - "takes pains to make dom
injection of scripts tags work" - see discussion @
http://api.jquery.com/append/#dsq-comment-message-67912032