2012-01-05 50 views
-1

jqueryをロードするコードを持つ基本テンプレートを拡張するdjangoテンプレートがあります。このテンプレートには単純なテキストボックスがあり、ajaxでオブジェクトを取得したかったのです。このテンプレートでdjangoテンプレートからのAjax呼び出し

{% extends 'base.html' %} 
{% block content %} 

<form id="ajaxform"> 
    <input type="text" name="first_name" id="name" /> 
    <input type="submit" value="Submit" /> 
</form> 

<div id="dataDiv"> 

</div> 

<script> 
    $('#ajaxform').submit(function(){ 
     console.log('Form submitted'); 
     $.get('{% url get_ajax_data %}', $(this).serialize(),function(data){ 
      $('#dataDiv').text(data); 

     }) 
     return false; 
    }); 

</script> 
{% endblock %} 

、私はget_ajax_data URLに、私は単にreturn HttpResponse('Ajax respose')としてテキストを返され、対応するビューにAJAX呼び出しを作ってみました。しかし、これはうまくいかないようで、私がfalseを返している間にフォームが提出されます。私はどこに行かなかったのか分からない。

+1

は常に '$(ドキュメント).ready(関数(){ここで が//あなたのコード})のようなものを使用します;'。表示されるエラーの詳細を教えてください。今あなたの質問は非常に答えにくいです。 – tback

+1

$(document).readyを追加しようとしましたが、うまくいかないようです。主な問題は、フォームが提出され、私は '' submit''でfalseを返すようにしてはいけないということです。 – Sandeep

+1

私は考え出した。セミコロンがありませんでした。 – Sandeep

答えて

2

これまでの回答では、submit()ハンドラを初期化することが一般的でした。これは、ページの準備ができたら設定します。現在、あなたは通常の方法でフォームを提出する必要があります、それはあなたのjavascriptで登録していません。あなたが書くことができ、それを修正するには:

$(document).ready(function() { 
    $('#ajax_form').submit(fun // the rest of your code here. 
}); 
+0

私は間違いを理解しました。ご協力ありがとうございました。 – Sandeep

+0

それは技術的に正しいわけではありません。 '$(document).ready()'を使うのがベストプラクティスですが、javascriptが* after *影響を受けるすべての要素とjQueryが既に初期化されている限り問題はないはずです。ほとんどの場合、jQueryはページの最下部にロードされていましたが、このJavaScriptはjQueryよりも先に利用可能でした。 –

1

jQueryイベントハンドラは、エラーが発生した場合、自動的に失敗します。セミコロンがないなどの明白な事を確認します。イベントハンドラですべてが有効であることを確認してください。

+0

私は間違っていて、間違いがありましたが、コンソールにエラーログはありませんでした。それが問題だった。エラーログはありませんでしたので、私はそれが正しいと仮定し、Ajaxに対応する他の方法がいくつかあると考えました。この問題を指摘してくれてありがとうございます。これはデバッグに大いに役立ちます。 – Sandeep