画像でわかるように、私はこのページを持っています。
このページには 3 つのタブがあります。これらのタブを 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 というページがあります。このページでは、タブを作成しました。1 つのタブがクリックされると、そのタブの URL が呼び出されます。3 つのタブすべてに独自のページがあります。それらは同じページにありません。)
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 関数を呼び出し、この関数で他の 3 つの関数を呼び出して、次のようにフォームの検証を確認します。
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を返すようにコードを書いている間、なぜこのようになっているのかわかりません。