Как получить значения строк таблицы в функции javascript из динамически созданной таблицы, используя цикл for в django?

#django #django-rest-framework #django-forms #django-views #django-templates

#django #django-rest-framework #django-forms #django-представления #django-шаблоны

Вопрос:

Итак, по сути, я передаю контекст из представлений в свой шаблон.

В моем шаблоне я использую «цикл for» для просмотра контекста в табличной форме, а также прикрепляю кнопку для каждой строки таблицы.

При нажатии этой кнопки я хочу вызвать функцию javascript (с вызовом ajax). Мне нужно получить значения элементов строки для этой конкретной строки для использования в моей функции.

Моя функция просмотра:

 def asset_delivery(request):
  deliverylist = Delivery.objects.filter(status='Added to Delivery List')
  context = {'deliverylist': deliverylist}
  return render(request, 'gecia_ass_del.html', context)
  

До сих пор я пытался передавать эти значения в качестве параметров следующим образом.
Моя таблица шаблонов html:

 <table class="table">
  <thead style="background-color:DodgerBlue;color:White;">
    <tr>
      <th scope="col">Barcode</th>
      <th scope="col">Owner</th>
      <th scope="col">Mobile</th>
      <th scope="col">Address</th>
      <th scope="col">Asset Type</th>
      <th scope="col">Approve Asset Request</th>
    </tr>
  </thead>
  <tbody>
  {% for i in deliverylist %}
    <tr>
      <td id="barcode">{{i.barcode}}</td>
      <td id="owner">{{i.owner}}</td>
      <td id="mobile">{{i.mobile}}</td>
      <td id="address">{{i.address}}</td>
      <td id="atype">{{i.atype}}</td>
      <td><button id="approvebutton" onclick="approve({{i.barcode}},{{i.owner}},{{i.mobile}},{{i.address}},{{i.atype}})" style="background-color:#288233; color:white;" class="btn btn-indigo btn-sm m-0">Approve Request</button></td>
    </tr>
  {% endfor %}
  </tbody>
</table>
  

Таблица отображается отлично, но кнопка, или onclick, или вызов функции, похоже, не работают.

Моя функция javascript:

 <script>
    function approve(barcode2, owner2, mobile2, address2, atype2){
        console.log('entered approved');
        var today = new Date().getFullYear() '-' ("0" (new Date().getMonth() 1)).slice(-2) '-' ("0" new Date().getDate()).slice(-2);
        $.ajax({
            type:'POST',
            url: 'deliveryupdate/' barcode '/',
            dataType: 'json',
            data:{
                barcode: barcode2,
                owner: owner2,
                mobile: mobile2,
                address: address2,
                atype: atype2,
                status:'Authority Approved',
                statusdate: today,
                csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
            },
            beforeSend: function() {
                    console.log('before send');
                  },
            success: function(){
              console.log("success log");
              swal("Success!","Asset request has been approved","success");
            },
            error: function(){
              console.log("error");
            }
        });
    }

</script>
  

Я проверил журналы браузера, и похоже, что функция не выполняется, что означает, что проблема связана с вызовом функции или кнопкой. Пожалуйста, помогите.

Ответ №1:

Код работает с моей стороны. Я сократил функцию до:

 function approve(){console.log('entered approved');}
  

без каких-либо параметров и «введено одобрено» регистрируется в консоли. Проверьте, правильно ли вы задаете параметры, и выдает ли консоль ошибку. Упростите свою функцию и добавьте параметры один за другим, чтобы устранить неполадки.