Improving Javascript and Modal HTML

Question

I have a bootstrap modal that was modified to be displayed to get a confirmation when a user clicks on a button to delete the item. After thinking about it I want to be able to use the same bootstrap modal template when I want to get confirmation from the user when they try to create a new item or update and item.

What I would like to do is be able to use the same modal template but just modify the text with jQuery based on the situation needed (create, update, delete). What I think would be easier is to also have a javascript function for create, update, delete. I am also using the gritter jQuery plugin and have duplicating code I would like to move out.

What can I do to my modal HTML to work with this. As well as what can I do to my javascript so that it can know if this was coming from a create, update, delete method. Also how do I modify the gritter code so that I don't have duplicating code. The time should be the same as well as the sticky and image.

<!-- 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

What I am currently at is when a delete icon is pressed it needs to show the modal but with me being able to modify the pieces of the modal text. For example the paragraph for what it says. I'm not sure of the placement for this inside my code. I know how but where I need to do this is the question. So somehow I need for it to know the type of request it's going to be that way it knows what set of data will be passed to the modal. That way it doesn't say are you sure you want to delete this item if this modal gets shown on the create page.

$(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:

I've worked on making the submitDeleteRequest function and I believe I have it doing what it's only supposed to be responsible for however I'm trying to figure out if I can make a function out of any of my other code. What I want to do is when the user clicks on the delete link it will modify the text inside the modal and then show it and once the confirm button is clicked then it will perform the submitDeleteRequest function. WHen I click on the link it goes to the link path. So for some reason it's not preventing the default behavior. I am receiving an error on this line. $(modal .modal-body p).text('Are you sure you want to delete this item?');

<!-- 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

If I understand what you're saying, you want to change the body of text from "Are you sure?" to something else.

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