jquery, html 및 트위터 부트 스트랩 프레임 워크

Question

메신저를 사용하여 confimation 창을 올바르게 구현하는 방법 twitter 부트 스트랩 프레임 워크를 사용하여 im을 약간 수정하여 triyng을 올바르게 구현하여 modal (확인 창)을 올바르게 구현하십시오.

내 사이트가 링크가있는 테이블을 렌더링하는 순간, 각 링크에는 "삭제 버튼"이 있습니다. 사용자가 다른 페이지로 이동하면 확인을 요청하는 버튼이 나타납니다. delete.php?ref=THE-LINK과 같은 링크

$('.remove_link').live('click', function(e) { window.location = 'delete.php?ref=' + $(this).attr('id'); }); 

가, 지금은 사용자가 에 테이블 페이지에서 가고 싶어 확인 해달라고 : 문자열 더 - LINK JQuery와에 의해 전달 그냥 고유 ID 삭제하는 것을 링크를 식별하기 위해입니다 페이지를 삭제하십시오. 모달을 사용하고 싶습니다. 트위터 모달 그냥 형식의 HTML과 자바 스크립트를 포함하여 매우 쉽게 작동합니다 $('#modal-from-dom').modal('show'); :

<script src="JS/jquery-1.7.min.js"></script> 
<script src="JS/bootstrap-modal.js"></script> 
      <div id="modal-from-dom" class="modal hide fade"> 
      <div class="modal-header"> 
       <a href="#" class="close">&times;</a> 
       <h3>Delete URL</h3> 
      </div> 
      <div class="modal-body"> 
       <p>You are about to delete one track url, this procedure is irreversible.</p> 
       <p>Do you want to proceed?</p> 
      </div> 
      <div class="modal-footer"> 
       <a href="delete.php?confirm=yes&ref=THE-URL" class="btn danger">Yes</a> 
       <a href="#" class="btn secondary">No</a> 
      </div> 
      </div> 

은 그럼 그냥하여 불 수 있습니다. 문제는,이 시점에서 모달이 두 가지 옵션 (링크, 예 또는 아니오)을 요구하기 때문에 동적 인 것으로 만들기 위해 어떻게이 ID를 THE-URL을 모달에 전달할 수 있습니까? 링크가 다이내믹이어야합니다. 그것을 호출하는 삭제 버튼 ( $(#remove_link).attr('id'))의 ID에 따라 변경해야합니다. 그러면 내가 어떻게이 일을 할 수 있을까? 어떤 도움을 주셔서 감사합니다!

Answer 1

이 예제를 확인하십시오 : http://jsfiddle.net/MjmVr/1/
그것은 이상적이지는 않지만 일을합니다.

Answer 2

당신은이 방법

동적 모달를 사용할 수는 식별자 i 모든 레코드에 대한 고유 ID와 인덱스 값이 가정합니다.

하는 스팬 속성에 id 값을 넣어

(I는 JSP 구문이 표시) :

<c:forEach items="${elements}" var="element" varStatus="i"> 
    <tr> 
     <td><c:out value='${element}' /></td> 
     <td> 
     <div class="center"> 
     <span id='${element["ID"]}'> 
      <a href='#deleteElement' data-toggle="modal" > 
       <i class="icon-trash"></i> 
      </a> 
     </span> 
     </div> 
     </td> 
    </tr> 
    </c:forEach> 

준비 문서 후 jQuery를 설정을 추가 할 양식 모달

<form action="/submitUserDeleteUrl" 
     id="submitDelete">  
    <hidden name="id"> 
    <div id="deleteElement" class="modal hide fade"> 
     <div class="modal-header"> 
      <a class="close" data-dismiss="modal" >&times;</a> 
      <h3>delete form</h3> 
     </div> 
     <div class="modal-body"> 
      <p>do you want to cancel element: </p> 
     </div> 
     <div class="modal-footer"> 
     <a class="btn" data-dismiss="modal" href="#"> 
     CANCEL 
     </a> 
     <input class="btn btn-primary" type="submit" value="OK"/>              
     </div> 
    </div> 
</form> 

을 정의 . 이것은 에 바인딩됩니다. 모달에 대한 모든 링크는 검색된 매개 변수의 주입에 대한 것입니다.

jQuery('#yourtableid a[data-toggle|="modal"]').on('click', function() { 
    var id=jQuery(this).parent('span').attr('id'); 
    jQuery('#deleteElement').one('show', function() { 
     //here made simple, you should append 
     jQuery(this).find('.modal-body p').text(id); 
     var action = jQuery(this).parent('form').attr('action'); 
     //shouldn't because there is a hidden in the form anyway check it out 
     jQuery(this).parent('form').attr('action', action+'?id='+id); 
    }); 
});