改善Javascript和模式HTML

Question

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

我想做的是能够使用相同的模式模板，但只需根据所需的情况（创建，更新，删除）使用jQuery修改文本。 我认为比较容易的是还具有用于创建，更新，删除的javascript函数。 我也在使用gritter jQuery插件，并且有重复的代码，我想搬出去。

我该如何对我的模式HTML进行处理。 以及我对JavaScript可以做什么，以便它可以知道这是否来自create，update，delete方法。 另外，我该如何修改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: ''
            });
        }
    })
}

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

更新：

我一直在做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')