javascript - 改进 Javascript 和模态 HTML

Question

我有一个引导模式，已修改为在用户单击删除项目的按钮时显示以获取确认。经过考虑之后，当我想在用户尝试创建新项目或更新和项目时获得确认时，我希望能够使用相同的引导模式模板。

我想做的是能够使用相同的模式模板，但只需根据需要的情况(创建、更新、删除)使用 jQuery 修改文本。我认为更容易的是还有一个用于创建、更新、删除的 javascript 函数。我还使用 gritter jQuery 插件，并且有重复的代码，我想移出。

我可以对我的模态 HTML 做些什么来处理这个问题。以及我可以对我的 javascript 做什么，以便它可以知道这是否来自创建、更新、删除方法。另外，如何修改 gritter 代码，这样我就没有重复的代码。时间以及粘性和图像应该相同。

<!-- 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">&times;</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: ''
            });
        }
    })
}

更新

我目前的情况是，当按下删除图标时，它需要显示模式，但我能够修改模式文本的各个部分。例如它所说的段落。我不确定它在我的代码中的位置。我知道如何做，但问题是我需要在哪里做这件事。因此，我需要它以某种方式知道请求的类型，这样它就知道将传递给模式的数据集。这样，如果此模式显示在创建页面上，它不会说您确定要删除此项目。

$(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'
            });
        }
    })
}

更新:

我一直致力于制作submitDeleteRequest函数，我相信我让它做了它只应该负责的事情，但是我试图弄清楚我是否可以从我的任何其他代码中创建一个函数。我想要做的是，当用户单击删除链接时，它将修改模式内的文本，然后显示它，一旦单击确认按钮，它将执行 SubmitDeleteRequest 函数。当我单击链接时，它会转到链接路径。因此，出于某种原因，它不会阻止默认行为。我在这条线上收到错误。 $(modal .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">&times;</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'
            });
        }
    })
}

Answer 1

如果我明白你在说什么，你想将文本正文从“你确定吗？”更改为“你确定吗？”到别的东西。

 $('.model-body p').html('some new sub text')