javascript - 使用 AJAX 加载的选项卡

Question

我有这个页面，如图所示。 此页面包含三个选项卡。我希望这些选项卡能够与 AJAX 配合使用。所以我希望如果用户单击这些选项卡(而不是通过直接地址)，它们就会被打开。但这些选项卡有表单，您可以看到备份表单。我希望当用户单击提交按钮时，如果发布数据成功，页面将返回到此选项卡(例如备份选项卡)。由于使用 AJAX，它不像我想要的那样工作，并且在响应 div 中也没有向我显示任何内容。看来submitSearchForm功能根本不起作用!你能告诉我出了什么问题吗？

我的 HTML 是:

<form name="backupForm" action="backup/" method="POST" id="backupSubmit">
   //my form fields are here
  <p><input type="submit" onclick="submitSearchForm('backupSubmit')"  value="دانلود"  id="sendButton" style="margin-bottom:10px; cursor:pointer;></p>
<div class="response" style="height: auto;></div>

我的AJAX功能:

function submitSearchForm(id){
                event.preventDefault();
                var temp = $("#"+id).serialize();
                validateForm();
                jQuery.ajax({
                    type:"POST",
                    data:temp,
                    url:'/backup/',
                    success:function(data){
                        $(".response").slideDown(800).html(data);
                    }
                });

以及我在views.py中的代码:

def backup(request):
    if request.is_ajax():
        if request.method=='POST':
            variables = RequestContext(request,{})
            return render_to_response('backup.html',variables)
        else:
            return render_to_response('backup.html')
    else:
        return render_to_response("show.html", {
            'str': "bad Request! :(",
            }, context_instance=RequestContext(request))
backup = login_required(backup)

编辑: 我有一个名为 base.html 的页面。在此页面中，我创建了选项卡，单击一个选项卡时，将调用该选项卡的 url。我的所有三个选项卡都有自己的页面。它们不在同一页面。)

base.html

{% block extrahead %}
    <script type="text/javascript">
        $( document ).ready( function() {
            $( '#backup_list' ).click( function() {
                $('#firstRemove').remove();
                $( '#backup' ).html( 'waiting ...' ).load( '{% url backup %}');
            });
            $( '#restore_list' ).click( function() {
                $('#firstRemove').remove();
                $( '#restore' ).html( 'waiting ...' ).load( '{% urlrestore %}');
            });
            $( '#expert_question' ).click( function() {
                $('#firstRemove').remove();
                $( '#expertQuestion' ).html( 'waiting ...' ).load( '{% url expertQuestion %}');
            });
        });
        $( document ).ajaxStart( function() {
            $( '#loading' ).fadeIn(400);
        }).ajaxStop( function() {
                    $( '#loading' ).fadeOut(400);

                });
    </script>

{% 结束 block %}

        <div id="dRtabs">
            <ul class="tabber">
                <li><a id="backup_list" href="#backup">backup</a> </li>
                <li><a id="restore_list" href="#restore">restore</a> </li>
                <li><a id="expert_question" href="#expertQuestion">Expert Question</a> </li>
            </ul>
            <div class="clear"></div>
            <div id="backup" class="tabContent">
                <div id="firstRemove">
                    {% block mSettings_body %}{% endblock %}
                </div>
            </div>
            <div id="restore" class="tabContent">
                loading...
            </div>
            <div id="expertQuestion" class="tabContent">
                loading...
            </div>
        </div>

如果我希望每次加载页面时都默认加载第一个选项卡，我该怎么办？
编辑2: 我在 jQuery.ajax 之前调用 validateForm 函数，在这个函数中我调用其他三个函数来检查表单验证，如下所示:

function validateForm()
    {      
        validateStartDate();
        validateEndDate();
        validateCheckbox();
    }

我检查用户没有将这些字段留空。 例如 validateStartDate() 类似的事情:

function validateStartDate()
    {
        var x=document.forms["backupForm"]["startDate"].value;
        if (x==null || x=="")
        {
//            alert("Start date must be filled out");
//            or show a hidden label with this error
            return false;
        }
    }

但它会发出警报，然后成功函数中的代码就会执行!我不知道为什么会这样，而我编写代码强制它返回 false。

Answer 1

主要问题是您实际上并没有阻止表单提交，而这是执行 AJAX 代码所必需的。 event.preventDefault() 仅在将 event 对象传递给函数时才起作用。

这会起作用:

$(function() {
  $('#sendButton').click(function(e) {
      e.preventDefault();
      var temp = $("#backupSubmit").serialize();
      $.ajax({
          type: "POST",
          data: temp,
          url: 'backup/',
          success: function(data) {
              $(".response").slideDown(800).html(temp);
              console.log(data);
          }
      });
  });
});​

jsFiddle:http://jsfiddle.net/G722S/5/

在 success 函数中，您需要放置提交表单后应执行的所有代码。你的 html 应该看起来像这样:

<a href="#" id="tab1" class="tab">Tab1</a>
<a href="#" id="tab2" class="tab">Tab2</a>
<a href="#" id="tab3" class="tab">Tab3</a>

<div class="content" id="page1">
   <!-- content that should show when you click tab1 -->
</div>

<div class="content" id="page2">
   <!-- content that should show when you click tab2 -->
</div>

<div class="content" id="page3">
   <!-- content that should show when you click tab3 -->
</div>

然后对于你的js你想要类似的东西

$(function() {
 $('.tab').click(function(e) {
    e.preventDefault();
    the_id = $(this).attr("id").replace("tab","page");
    $('.content').hide();
    $('#'+the_id).show();
 });
});​

不要忘记这个CSS:

<style type="text/css">
  #page2, #page3 {display:none;}​
</style>

工作 fiddle :http://jsfiddle.net/5zbpp/3/

what should i do if i want whenever the page is loaded, it loads the first tab by default?

在base.html中，更改以下内容:

$( document ).ready( function() {
        $( '#backup_list' ).click( function() {

对此:

$( document ).ready( function() {
    $( '#backup' ).html( 'waiting ...' ).load( '{% url backup %}');
    $( '#backup_list' ).click( function() {