javascript - 成功后如何切换选项卡

Question

我在页面中有用于使用 ajax 的选项卡。在第三个选项卡(撰写)中有一个表单，我希望提交表单时，然后我们转到第一个选项卡(收件箱)。

我想知道这怎么可能？我该怎么办？ 我有一个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>

在 compose.html 中我有这个函数:

<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>

我不知道在成功函数中该怎么做。 我有这个用于撰写的 View 功能:

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))

所以我想知道如何在这些选项卡之间切换以及我应该在 vews.py 中返回什么。我真的需要你的帮助。谢谢 我正在使用 Django

Answer 1

一个简单的触发器就可以用于切换选项卡。

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

您将在表单完成并提交后运行此命令

您可以返回 true 或 false，您可以检查此值，如果 true 则向他显示收件箱页面，否则向他显示错误消息。