1
사용자가 단추를 클릭하여 항목을 삭제할 때 확인 메시지를 표시하도록 수정 된 부트 스트랩 모달이 있습니다. 그것에 대해 생각한 후에 사용자가 새 항목이나 업데이트 및 항목을 만들려고 할 때 확인을 얻고 자 할 때 동일한 부트 스트랩 모달 서식 파일을 사용할 수 있기를 원합니다.자바 스크립트 및 모달 HTML 개선
동일한 모달 템플릿을 사용할 수 있지만 필요한 상황 (작성, 업데이트, 삭제)에 따라 jQuery로 텍스트를 수정할 수 있습니다. 내가 더 쉬울 것이라고 생각하는 것은 또한 생성, 업데이트, 삭제를위한 자바 스크립트 함수를 갖는 것이다. 나는 gritter jQuery 플러그인을 사용하고 있으며 코드를 복사하여 이동하고 싶습니다.
모달 HTML에서이 작업을 수행하려면 어떻게해야합니까? 뿐만 아니라 내 javascript 할 수 있도록이 만든, 업데이트, 삭제 메서드에서 온 경우 알 수 있습니다. 또한 복제 코드가 없도록 그리터 코드를 수정하려면 어떻게해야합니까? 시간은 끈적 거리는 이미지와 동일해야합니다.
<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Delete Confirmation</h4>
</div>
<div class="modal-body">
<p>Are you sure?</p>
</div>
<div class="modal-footer">
<button type="button" id="deleteModalCancel" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" id="deleteModalConfirm" class="btn btn-primary">Yes</button>
</div>
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
$(document).ready(function(){
$(function()
{
var $modal = $('#deleteModal');
$('.js-ajax-delete').on('click', function(e)
{
e.preventDefault();
var deleteUrl = $(this).attr('href');
$modal.data('delete-url', deleteUrl);
$modal.modal('show');
$('#deleteModalConfirm').on('click', function(e)
{
$modal.modal('hide');
var deleteUrl = $modal.data('delete-url')
submitDeleteRequest(deleteUrl);
});
});
});
});
function submitDeleteRequest(route) {
$.post(route, {"_method" : "DELETE"}, function(response) {
if (response.errors > 0) {
$.gritter.add({
title: 'This is a regular notice!',
text: 'Deletion was successful.',
class_name: 'growl-error',
image: 'images/screen.png',
sticky: false,
time: ''
});
} else {
$.gritter.add({
title: 'This is a regular notice!',
text: 'Deletion was successful.',
class_name: 'growl-success',
image: 'images/screen.png',
sticky: false,
time: ''
});
}
})
}
UPDATE 나는 현재에있는 삭제 아이콘을 누를 때 모달하지만 내가 모달 텍스트의 조각을 수정할 수있는과를 보여주기 위해 필요하고 무엇
. 예를 들어 그것이 무엇을 말하는가에 대한 문단. 내 코드 내에서이 배치를 잘 모르겠습니다. 나는 이것이 어떻게해야 하는지를 안다. 그래서 어떻게 든 요청의 유형을 알기 위해 그것이 어떤 데이터 집합이 모달로 전달 될 것인지를 알 수있는 방법이 될 것입니다. 그런 식으로이 모달이 생성 페이지에 표시되면이 항목을 삭제 하시겠습니까?
$(document).ready(function(){
// Put together default options for gritter notifications.
$.extend($.gritter.options, {
position: 'top-right',
fade_in_speed: 'medium',
fade_out_speed: 2000,
time: 6000,
image: 'images/screen.png'
});
// Define the modal to be used for the application.
var $modal = $('#myModal');
// What to do when a user clicks on a delete icon. Icon should only be used in the index pages.
$('.js-ajax-delete').on('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$modal.data('url', url);
$modal.modal('show');
});
$('#confirm').on('click', function(e) {
var url = $modal.data('url')
submitDeleteRequest(url);
$modal.modal('hide');
});
});
function submitDeleteRequest(route) {
$.gritter.removeAll();
$.post(route, {"_method" : "DELETE"}, function(response) {
if (response.errors > 0) {
$.gritter.add({
title: 'Deletion Is Successful!',
text: 'You have a few errors that you need to correct before this can be properly deleted.',
class_name: 'growl-error'
});
} else {
$.gritter.add({
title: 'Deletion Is Successful!',
text: 'You have successfully deleted your item.',
class_name: 'growl-success'
});
}
})
}
UPDATE :
나는 submitDeleteRequest 기능을 만드는 일을했고 나는 그것을 만하지만 내가 할 수있는 경우에 알아 내기 위해 노력하고있어에 대한 책임을해야하는데 일을 믿습니다 내 다른 코드에서 기능을 만드십시오. 사용자가 삭제 링크를 클릭하면 모달 내부의 텍스트가 수정 된 다음 표시되고 확인 버튼을 클릭하면 submitDeleteRequest 함수가 수행됩니다. 링크를 클릭하면 링크 경로로 이동합니다. 그래서 어떤 이유로 그것은 기본 동작을 방해하지 않습니다. 이 줄에 오류가 발생했습니다. $ (모달 .modal-body p) .text ('정말로이 항목을 지우시겠습니까?');
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Delete Confirmation</h4>
</div>
<div class="modal-body">
<p>This is the default text.</p>
</div>
<div class="modal-footer">
<button type="button" id="myModalCancel" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" id="myModalConfirm" class="btn btn-primary">Yes</button>
</div>
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
$(document).ready(function(){
// Put together default options for gritter notifications.
$.extend($.gritter.options, {
position: 'top-right',
fade_in_speed: 'medium',
fade_out_speed: 2000,
time: 6000,
image: 'images/screen.png'
});
// Define the modal to be used for the application.
var $modal = $('#myModal');
// What to do when a user clicks on a delete icon. Icon should only be used in the index pages.
// What to do when a user clicks on a delete icon.
$('.js-ajax-delete').on('click', function(e) {
// Prevent default behavior from happening with link icon.
e.preventDefault();
// Grab the link's href attribute value and assign it to a variable.
var url = $(this).attr('href');
$(modal .modal-body p).html('Are you sure you want to delete this item?');
// Show the modal.
$modal.modal('show');
});
$('#confirm').on('click', function(e) {
$.gritter.removeAll();
var url = $modal.data('url');
submitDeleteRequest(url);
$modal.modal('hide');
});
});
function submitDeleteRequest(route) {
$.gritter.removeAll();
$.post(route, {"_method" : "DELETE"}, function(response) {
if (response.errors > 0) {
$.gritter.add({
title: 'Deletion Failed',
text: 'You have a few errors that you need to correct before this can be properly deleted.',
class_name: 'growl-error'
});
} else {
$.gritter.add({
title: 'Deletion Is Successful!',
text: 'You have successfully deleted your item.',
class_name: 'growl-success'
});
}
})
}
[ModaliseJS] (https://github.com/AlexisTM/modalise.js)를 사용하면 필요한 자바 스크립트를 간단하게 만들 수 있습니다. –