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>

我不知道在成功功能中该怎么做。我有这个用于撰写的视图功能：

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，则向他显示收件箱页面，否则向他显示错误消息。