2009-12-10 101 views
0

當使用jQuery表單插件提交我的表單時,目標視圖接收到的請求與以標準方式(無javascript)提交表單時收到的請求不同,以及我的Django模板不按預期呈現。 以標準方式提交時,模板呈現表單錯誤(「form。[field_name] .errors),而當通過javascript提交時,模板不會呈現。 使用javascript submit,我如何獲得允許渲染,因爲它不使用標準提交 的代碼,並在這兩種情況下接受對象的要求之間的差異如下所示的模板使用jQuery表單插件提交Django表單時的問題

感謝 七月

javascript代碼:?

var is_geocoded = false; 
var interval; 

$(function(){ 

    $("#submit").click(function() { 
     var options = { 
      beforeSubmit: getPosition, // pre-submit callback 
      success:  showResponse // post-submit callback  
     }; 

     // bind form using 'ajaxForm' 
     $('#addresto').ajaxForm(options); 
    }); 

}); 

function getPosition() { 

    var geocoder = new GClientGeocoder(); 
    var country = $("#id_country").val(); 
    var city = $("#id_city").val(); 
    var postal_code = $("#id_postal_code").val(); 
    var street_number = $("#id_street_number").val(); 
    var street = $("#id_street").val(); 
    var address = street_number+", "+street+", "+postal_code+", "+city+", "+country; 

    geocoder.getLatLng(address, function(point) { 

     if (point) { 

      $("#id_latitude").val(point.lat()) 
      $("#id_longitude").val(point.lng()) 
      is_geocoded = true; 
     } else { 
      is_geocoded = true; 
     } 
    }); 

    interval = setInterval("doSubmit()", 500); 

    return false; 
} 

function doSubmit() { 

    if (is_geocoded) { 
     $("#addresto").ajaxSubmit(); 
     clearInterval(interval); 
    } 
} 

Django模板鱈魚E:

<form id="addresto" action="" method="POST"> 

<p><label for="id_name">Name:</label>{{form.name.errors}} {{ form.name }} </p> 
<p><label for="id_country">Country:</label>{{form.country.errors}} {{ form.country }} </p> 

<!-- more stuff --> 

<p style="clear: both;"><input type="Submit" id="submit" value="Submit" /></p> 
</form> 

下面是用標準視圖收到的請求之間的差別提交和使用javascript提交:

[email protected]:~$ diff javascript_submit standard_submit 
7c7 
< 'CONTENT_TYPE': 'application/x-www-form-urlencoded; charset=UTF-8', 
--- 
> 'CONTENT_TYPE': 'application/x-www-form-urlencoded', 
24c24 
< 'HTTP_ACCEPT': '*/*', 
--- 
> 'HTTP_ACCEPT': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8', 
28d27 
< 'HTTP_CACHE_CONTROL': 'no-cache', 
33d31 
< 'HTTP_PRAGMA': 'no-cache', 
36d33 
< 'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest', 
70c67 
< 'wsgi.input': <socket._fileobject object at 0x891d064>, 
--- 
> 'wsgi.input': <socket._fileobject object at 0x898b09c>, 

回答

4

當你通過AJAX提交的錯誤不會出現的原因是,你AREN不會刷新頁面。

您需要將json或xml傳遞迴您的javascript並將錯誤插入頁面中。

你也可以只呈現形式爲HTML的BLOB和覆蓋頁面上的當前形式(但是這是一個有點複雜,它是效率不高)

基本上我只想用Django的reccomende request.is_ajax()方法來確定表單是否提交與Ajax,並返回json的AJAX請求

+0

+1,但我個人更喜歡給ajax請求一個不同的URL命名空間,可能只是通過將'json'放在路徑的某處。 – SingleNegationElimination

+0

感謝您的提示。由於我並不真的需要Ajax,所以我只會使用JavaScript,這樣我就不必改變我的觀點。 – jul