2015-11-08 55 views
0

我使用Flask和Jinja2模板來創建自定義窗體。在這些形式中,當字段值發生更改時,我需要更改表單的一部分。在導入時退出HTML

基本上,我的表單有一個select#content-type,我可以在其中選擇一種內容類型,然後fieldset#content,其select的值更改時其HTML應該會有所不同。我有幾個HTML模板,取決於select的值。

我的JS是這樣的:

<script type="text/javascript"> 
    $(function() { 
     $("select#content-type").change(function() { 
      switch ($(this).val()) { 
       case "type1": 
        var html = "{% include "type1.html" | escape %}"; 
        $("fieldset#content").html(html); 
        break; 
       // ... 
      } 
     }); 
    }); 
</script> 

的事情是,在escape過濾器不會在include聲明上班,也沒有safe。我怎樣才能做到這一點,還是有更好的方法來做我想做的事情?

回答

0

有幾個解決方案。

實現此目的的一種簡單方法是使用輔助CSS類隱藏表單中與內容類型相關的所有部分,例如, .hide {display: none;},當客戶端選擇某些東西時,只需從相應的div中刪除此類:$("div#type1").removeClass("hide");

另一種方法是使用Ajax請求加載表單的內容類型依賴部分。您可以定義一個類似/loadform的路由,其中​​服務器讀取相應的模板文件並將其打印出來。然後,您可以將響應HTML注入原始表單。

第三種方法是在客戶端選擇內容類型時提交使用javascript的部分填充表單,然後呈現完整表單。