Отправка данных по клику

Question

Я использую Ajax (вместе с Django) для выполнения некоторых действий при нажатии кнопки. Прежде чем я получу представление, я не могу передать данные функции javascript. Что происходит не так? Как я могу передать идентификационные данные кнопки функции? Я получаю сообщение о том, что мой request_data не определен.

template.html

<button class="btn-green" onclick="request_access()" id="{{ data }}">Join Group</button> 

javascript.js

function request_access(){ 
    console.log("button clicked"); 
    var request_data = $(this).attr('id'); 
    console.log("data: " + request_data); 
    $.post({ 
     url: "request_access/", 
     data : { request_data: request_data}, 
     success : function(json) { 
      $("#request-access").hide(); 
      console.log("requested access complete"); 
     } 
    }) 
} 

Answer 1

Синтаксис $.post не является правильным, а также передать экземпляр this в onclick обработчика. Внутри функции this ссылается на объект окна, а не на элемент DOM с щелчком.

HTML

<button class="btn-green" onclick="request_access(this)" id="{{ data }}">Join Group</button> 

JQuery

function request_access($this){ 
    console.log("button clicked"); 
    var request_data = $this.id; 
    console.log("data: " + request_data) 
    $.post("request_access",{ request_data: request_data},function(json) { 
     $("#request-access").hide(); 
     console.log("requested access complete"); 
    }) 
} 

Answer 2

свяжи событие OnClick с помощью JQuery также, как это:

jQuery(function($){ 
    $('.btn-green').on('click', function(e) { 
      var request_data = $(this).attr('id'); 
      $.post ....... 
      ..... 
    }) 
}) 

и избавиться от onclick="request_access()" в HTML

ТАКЖЕ: Возможно, вы не передали «данные» в шаблон django. Можете ли вы показать нам созданную функцию html AND django view?

Answer 3

<button class="btn-green" onclick="request_access('{{ data }}')" id="{{ data }}">Join Group</button> 

javascript.js

function request_access(id){ 

    var request_data =id; 
    console.log("data: " + request_data); 
    $.post({ 
     url: "request_access", 
     data : { request_data: request_data}, 
     success : function(json) { 
      $("#request-access").hide(); 
      console.log("requested access complete"); 
     } 
    }) 
} 

Answer 4

это объект окна. не используют обработчики событий в html-тегах. это одна из причин. разделите свой код javascript и структуру html.

если вы не можете этого сделать: используйте window.event для обнаружения владельца события.