2012-03-10 13 views
0

現在、私がコーディングしたものはうまく機能していますが、それはかなり粗雑です。基本的にここで私は(簡体字)しているものです:フォーム提出からIDを引き出すためのより良い方法Javascript/Django

jQueryの準備:

<script type="text/javascript"> 

    $(document).ready(function() { 
     $('div.partDelete').click(function() { 

     // TODO this seems like a dirty hack 
     var split = this.id.split('_'); 
     if(split.length == 3) { 
      $('#part_id').val(split[0]); 
      alert($('#part_id').val()); 
      $('#removePartForm').submit(); 
     } else { 
      alert('There was a problem removing the selected part'); 
     } 
    }); 

</script> 

私が使用していますフォーム:私がやろうとしているすべて取るために隠された入力を設定されている

<form id="removePartForm" action="{% url remove_part %}" method="post"> 
    <input type="hidden" id="part_id" name="part_id" value="-1" /> 

    {% for part in current_build.parts.all %} 
     <div id="{{ part.id }}_part_id" class="partDelete">remove</div> 
    {% endfor %} 
</form> 

ユーザーが選択したpart.idを私のビューで使用できるようにします。

私はこれが正しい方法であることを知っているが、私はそれがそうではないと感じている。私はDjango & JQueryの新機能ですので、まだ見つからない機能が組み込まれているかもしれません。

お寄せいただきありがとうございます。ありがとうございます。

ソリューション(以下mikaelbの回答を参照してください)

Javascriptを:

$('div.partDelete').click(function() { 
    var selected_id =$(this).data("id"); 
    $('#part_id').val(selected_id); 
    $('#removePartForm').submit(); 
}); 

HTMLの変更:すべての

<div class="partDelete" data-id="{{ part.id }}">remove</div> 

答えて

3

まず、 IDは数字で始めるべきではありません(http://www.w3.org/TR/html4/types.html#type-name)。

とは別に、通常、サーバー側からJSと通信するためにIDを設定するためにdata- *属性を使用します。 data- *属性は、任意の値にすることができます。したがって、data-foo = ""は有効な属性です。

例:
HTML:

<div class="item" data-id="{{ part.id }}"> 
    <p>Foo</p> 
</div> 

Javascriptを:

$(function() { // same as document read 

    $(".button-class").on("click", function() { 
     // Here "this" will be the element 
     var id = $(this).data("id"); // same as getting attribute data-id 
     // Could also use $(this).attr("data-id") 
    }); 
}); 

・ホープ、このことができます。

編集:より明確にするためにコメントを移動し、OPの問題に固有の例を変更しました。

+0

ありがとうございます!結局 '.each'関数を使う必要はありませんでした。私は 'data- *'属性について知りませんでした! –

関連する問題