삭제 확인 상자 생성

Question

내 응용 프로그램 결과에 테이블 형식으로 표시됩니다. 내 코드의

일부는

{% for device in devices %} 
    <tr> 
    <td>{{ device.operator}}</td> 
    <td>{{ device.state }}</td> 
    <td>{{ device.tstampgps }}</td> 
    <td><button id='rec_delete'>Delete</button></td> 

    </tr> 
{% endfor %} 

우리는 내가 데이터베이스에서 특정 레코드를 삭제해야, 삭제 버튼을 눌러도이다. 그 전에 나는 그 확인 상자를 물어보고 싶다. 아무도 도와 줄 수 있습니까?

Answer 1

고유 한 레코드 추가 식별자 tha DB에 버튼을 연결할 수 있습니다. 확인이되면이 식별자를 AJAX가있는 서버에 보내고 코드를 삭제하면 DB가 삭제됩니다. ID 년대는 어떤 다른 형태의 요소 이름

와 마찬가지로

HTML

<tr> 
    <td>{{ device.operator}}</td> 
    <td>{{ device.state }}</td> 
    <td>{{ device.tstampgps }}</td> 
    <td><button class='rec_delete' data-record_id="{{ device.DB_ID }}">Delete</button></td> 

    </tr> 

JS가

$('button.rec_delete').click(function(){ 
    /* data() method reads the html5 data attribute from html */ 
    var record_id=$(this).data('record_id'); 

    if(confirm('Are you sure')){ 
     $.post('serverPage.php', { id: record_id}, function(){ 
      /* code to run on ajax success*/ 
      $(this).closest('tr').remove(); 
     }) 
    } 
}) 

서버 id 후 키를 받게됩니다 고유해야하기 때문에 또한 반복되는 요소에 클래스 ID를 변경

Answer 2

당신은 자바 스크립트에 클릭 이벤트를 추가 할 수 있으며, 사용자가 "확인"버튼을 선택하면, 당신은

Answer 3

이 시도 기록 또는 무엇이든을 제거을 담당보기에 요청을 보낼 수 있습니다

를

<button id='rec_delete' onclick="return confirm('Are you sure?')">Delete</button> 

Answer 4

장고에 대해 잘 모르기 때문에 여기에 삭제 부분이 포함되어 있지 않습니다.이 부분은 AJAXify (삭제할 비동기 요청)라고 가정합니다. 여기에 로컬 변수로 $devices과 $deletes 변수를 따로 따로 보여주고 있습니다. 따라서 참조를 저장하고 그 참조에서 작업하는 방법을 볼 수 있습니다. (반복해서 다시 선택하는 것보다 더 나은 방법이라고 생각합니다). 또한

주 사용 : 나는 더 큰 응용 프로그램에서 당신이 $()를 사용할 수있는 다른 라이브러리/프레임 워크와 충돌을 막기 위해 할 항상해야 전역 범위에 jQuery()을 사용하고

jQuery(document).ready(function r($){ 

. 이것도 모범 사례이며 익명 함수 (클로저) 내에서 $()을 사용할 수 있습니다. 이 방법으로 익숙해지는 것이 가장 좋습니다, IMO.

<table> 
    <thead> 
     <tr> 
      <th>Operator</th> 
      <th>State</th> 
      <th>T-Stamp GPS</th> 
      <th>&nbsp;</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="device"> 
      <td>Verizon</td> 
      <td>OK</td> 
      <td>033830928</td> 
      <td> 
       <button type="button" id="d001" class="delete">Delete</button> 
      </td> 
     </tr> 
     ... 
    </tbody> 
</table> 

참고

AJAX와이 범위를 벗어 this 후 success 핸들러를 실행하기 때문에 내가의 $self을 참조하여, 약간하지만 중요한 변화를 만들어 :

jQuery(document).ready(function r($){ 
    var $devices = $('tr.device'), 
     $deletes = $devices.find('button.delete'); 

    $deletes.click(function d(){ 
     var $self = $(this).parents('tr.device'), 
      del = confirm('Delete device?'); 

     if (del) { 
      // Do $.ajax() request, maybe using the 
      // clicked button's ID. Or you could put 
      // the row to delete ID on the TR element. 
      // And then on success of the AJAX, run: 
      $self.fadeOut(500, function f(){ 
       $self.remove(); 
      }); 
     } 
    }); 
});​ 

http://jsfiddle.net/wMqr8/2