Question

I have for tabs in a page which work with ajax. in the third tab (compose) there is a form, i want when teh form is submitted, then we go to the first tab (inbox).

I want to know how is it possible? what have i do?
i have a base.html:

{% block extrahead %}
    <script type="text/javascript">
        $( document ).ready( function() {
           $( '#inbox' ).html( '{% trans "waiting ..." %}' ).load( 'inbox/');

           $( '#inbox_list' ).click( function() {

               $( '#inbox' ).html( '{% trans "waiting ..." %}' ).load( 'inbox/');
            });
            $( '
                $( '#outbox' ).html( '{% trans "waiting ..." %}' ).load( 'outbox/');
            });
            $( '#compose_list' ).click( function() {

                $( '#compose' ).html( '{% trans "waiting ..." %}' ).load( 'compose/');
            });
            $( '#trash_list' ).click( function() {

                $( '#trash' ).html( '{% trans "waiting ..." %}' ).load( 'trash/');
            });
        });
     </script>

<div id="dRtabs">
            <ul class="tabber">
                <li><a id="inbox_list" href="#inbox">{% trans "inbox" %}</a> </li>
                <li><a id="outbox_list" href="#outbox">{% trans "sent" %}</a> </li>
                <li><a id="compose_list" href="#compose">{%  trans "compose" %}</a> </li>
                <li><a id="trash_list" href="#trash">{%  trans "trash" %}</a> </li>
            </ul>
            <div class="clear"></div>
            <div id="inbox" class="tabContent">
                loading...
            </div>
            <div id="outbox" class="tabContent">
                loading...
            </div>
            <div id="compose" class="tabContent">
                loading...
            </div>
            <div id="trash" class="tabContent">
                loading...
            </div>
    </div>

and in compose.html i have this function:

<script type="text/javascript">
        $(function() {
            alert("first");
            $('#compose_form').submit(function() {
                alert("second");
                var temp = $("#compose_form").serialize();
                $.ajax({
                    type: "POST",
                    data: temp,
                    url: 'compose/',
                    success: function(data) {
                       ???
                    }
                });
                return false;
            });
        });
    </script>

i don’t know what to do in success function.
and i have this view function for compose:

def compose(request, recipient=None):  
    if request.is_ajax():
        if request.method == "POST":
            sender = request.user
            form = ComposeForm(request.POST, recipient_filter=recipient_filter)
            if form.is_valid():
                form.save(sender=request.user)
                messages.info(request, _(u"Message successfully sent."))

                return ???
        else:
            form = ComposeForm()            
        return render_to_response('message/compose.html', {
            'form': form,
            }, context_instance=RequestContext(request))

so i want to know how to switch between these tabs and what i should return in vews.py. I really need your help. thanks
i’m using django

Answer 1

A simple trigger would work for switching tabs.

$('#inbox_list').trigger('click'); // .click() may also work.

You would run this when the form is complete and submitted

You can return true of false and you can check this value and if true show him the inbox page, else show him an error message.