【django】テンプレートからjQueryに複数の値を渡す方法

April 16, 2022

djangoのテンプレートからjQueryに複数の値を渡したいときがあります。その方法を一つ思いついたので、記載しておきます。

models.pyでは、uuid4を使用しています。

class Sample(models.Model):

  id       = models.UUIDField(default=uuid.uuid4, primary_key=True, editable=False )
  comment  = models.CharField(verbose_name="コメント", max_length=200)
  target   = models.ForeignKey("self",verbose_name="コメント先",on_delete=models.CASCADE, null=True, blank=True)

template

<input id="sample" class="sample" type="button" value="{{ sample.target.id }}_{{ sample.id }}">
<label for="sample"></label>

jQueryに送られてきたvalueはuuid4の連結なので、36文字で前後から切り取って2つのidを取り出すことができます。

window.addEventListener("load" , function (){
    $(document).on("click",".sample", function(){ sample( $(this).val() );});
});

function sample(pk){
    var target_pk = pk.slice(0,36);
    var pk        = pk.slice(-36);

    (以下、略)

他にも、次のような方法があります。複数の値をonclick関数からjquery関数に送信を参照。

template

<a href="#" id="button" data-params='hello|world'>click</a>

jQuery

$(function () {
    $("#button").on("click", function() {
        var data = $(this).data('params').split('|');
        console.log(data[0]);
        console.log(data[1]);
    });
});

宜しければ、参考にしてください。