이 질문은 중복 될 수 있지만 찾고있는 솔루션을 찾기 위해 검색 할 좋은 키워드를 몰랐습니다.
사용자에게 테이블을 보여주는 웹 사이트에서 작업 중입니다. 한 열에 테이블에는 사용자가 편집 할 수있는 메모가 포함되어 있습니다. 이를 위해 해당 열의 모든 행에 버튼을 추가하여 사용자가 특정 행과 관련된 메모를 편집 할 수있는 부트 스트랩 모달 대화 상자를 열었습니다. 또한 모달 대화 상자의 입력 필드에서 입력 된 텍스트를 읽고 ajax 게시물을 통해 서버로 보내는 JavaScript 기능 "saveNote (recordId)"도 있습니다.
이제 내 질문은 다음과 같습니다. saveNote () 함수에 전달할 수 있도록 현재 편집중인 행의 ID를 어떻게 그리고 어디에 저장할 수 있습니까? 부트 스트랩 문서에서 예제를 찾았지만 모달 대화 상자 ( Varying modal content )에 동적으로 데이터를 전달하는 방법 만 다룹니다 . 모달 대화 상자에서 이것을 수행하는 일반적인 방법이 있습니까? 아니면 JavaScript에서 전역 변수가 필요합니까?
기본적으로 id각 행 data-id의을 행 버튼 의 속성에 넣습니다 . 그런 다음 모달을 show.bs.modal이벤트에 바인딩 한 다음을 사용 하여 모달을 연 버튼 $(e.relatedTarget).data('id')을 가져옵니다 data-id. 다른 설명은 주석을 확인하십시오.
$(function() {
$('#exampleModal').on('show.bs.modal', function(e) {
$('.modalTextInput').val('');
let btn = $(e.relatedTarget); // e.related here is the element that opened the modal, specifically the row button
let id = btn.data('id'); // this is how you get the of any `data` attribute of an element
$('.saveEdit').data('id', id); // then pass it to the button inside the modal
})
$('.saveEdit').on('click', function() {
let id = $(this).data('id'); // the rest is just the same
saveNote(id);
$('#exampleModal').modal('toggle'); // this is to close the modal after clicking the modal button
})
})
function saveNote(id) {
let text = $('.modalTextInput').val();
$('.recentNote').data('note', text);
console.log($('.recentNote').data('note'));
console.log(text + ' --> ' + id);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input class="modalTextInput form-control" placeholder="Text Here" />
</div>
<div class="modal-footer">
<button type="button" class="saveEdit btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<table class="table table-bordered">
<tbody>
<tr>
<td>Some data here</td>
<td>
<button class="btn btn-success btn-sm" data-id="1" data-toggle="modal" data-target="#exampleModal">Edit</button>
</td>
</tr>
<tr>
<td>Another data here</td>
<td>
<button class="btn btn-success btn-sm" data-id="2" data-toggle="modal" data-target="#exampleModal">Edit</button>
</td>
</tr>
<tr>
<td>More data here</td>
<td>
<button class="btn btn-success btn-sm" data-id="3" data-toggle="modal" data-target="#exampleModal">Edit</button>
</td>
</tr>
</tbody>
</table>
<p class="recentNote"></p>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다