0

我有这个页面,你可以在图片中看到。 我的页面 此页面包含三个选项卡。我希望这些选项卡可以与 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>

{% 端块 %}

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

如果我想在页面加载时默认加载第一个选项卡,我应该怎么做?
EDIT2:我在 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。

4

1 回答 1

2

主要问题是您实际上并没有阻止表单提交,这是执行 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>

工作小提琴:http: //jsfiddle.net/5zbpp/3/

如果我希望每当加载页面时,我应该怎么做,它默认加载第一个选项卡?

在 base.html 中,更改:

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

对此:

$( document ).ready( function() {
    $( '#backup' ).html( 'waiting ...' ).load( '{% url backup %}');
    $( '#backup_list' ).click( function() {
于 2012-09-15T07:24:39.667 回答