Prevent Page Reload after Showing Modal

Question

I have this function :

$('button[name="submitbutton"]').click(function() {
        var button = 0;
        if ($(this).attr('value') == 0) {
            $('.modal.hapus').modal({
                closable : false,
                onDeny : function(){

                },
                onApprove : function(){
                    $('.form.update').submit(function(e){
                        e.preventDefault();
                        alert("button : 1");
                        jQuery.ajax({
                            type: "POST",
                            url: "<?php echo base_url(); ?>" + "katalog/kelolaPerubahan/1",
                            dataType: 'json',
                            data: $(this).serialize(),
                            success: function(res) {
                                updateRow(res, '<?php echo base_url(); ?>');
                            }
                        });
                    });
                }
            }).modal('show');
        } else {
            $('.form.update').submit(function(e){
                e.preventDefault();
                alert(button);
                jQuery.ajax({
                    type: "POST",
                    url: "<?php echo base_url(); ?>" + "katalog/kelolaPerubahan/" + button,
                    dataType: 'json',
                    data: $(this).serialize(),
                    success: function(res) {
                        updateRow(res, '<?php echo base_url(); ?>');
                    }
                });
            })

        }

    })

I have two button in my form, with different value. When the button value I clicked is not equal to 0, it looks good, and do the submit action as it should. But, when the value is 0, my goal is showing a modal that contain two option, cancel or ok. But, when the modal is showing, the page is reloading. How can I prevent this reload and wait until two option (cancel or ok) is choosen?

Answer 1

after two days I get what I want, when the modal is showing, javascript will get what user want.

$('button[name="submitbutton"]').click(function(event) {
        var button = 0;
        if ($(this).attr('value') == 0) {

            $('.form.update').submit(function(e){
                e.preventDefault();
                var datahapus = $(this).serialize();

                $('.modal.hapus').modal({
                    closable : false,
                    onDeny : function(){

                    },
                    onApprove : function(){
                        jQuery.ajax({
                            type: "POST",
                            url: "<?php echo base_url(); ?>" + "katalog/kelolaPerubahan/1",
                            dataType: 'json',
                            data: datahapus,
                            success: function(res) {
                                updateRow(res, '<?php echo base_url(); ?>');
                            }
                        });
                    }
                }).modal('show');
            });
        } else {
            $('.form.update').submit(function(e){
                e.preventDefault();
                alert(button);
                jQuery.ajax({
                    type: "POST",
                    url: "<?php echo base_url(); ?>" + "katalog/kelolaPerubahan/" + button,
                    dataType: 'json',
                    data: $(this).serialize(),
                    success: function(res) {
                        updateRow(res, '<?php echo base_url(); ?>');
                    }
                });
            })

        }
    })

When the value is 0, form will submit value and I prevent the event to show to modal, when user choose to do what the modal said, javascript execute ajax action.

Thank a lot for all your answer.

Answer 2

You page is reloading because you don't have a e.preventDefault() action on the submitbutton, and it doesn't wait for you to click OK on Modal and reloades the page.

Try this:

$('button[name="submitbutton"]').click(function(e) {
        e.preventDefault();
        var button = 0;
        if ($(this).attr('value') == 0) {
            $('.modal.hapus').modal({
                closable : false,
                onDeny : function(){

                },
                onApprove : function(){
                    $('.form.update').submit(function(e){
                        e.preventDefault();
                        alert("button : 1");
                        jQuery.ajax({
                            type: "POST",
                            url: "<?php echo base_url(); ?>" + "katalog/kelolaPerubahan/1",
                            dataType: 'json',
                            data: $(this).serialize(),
                            success: function(res) {
                                updateRow(res, '<?php echo base_url(); ?>');
                            }
                        });
                    });
                }
            }).modal('show');
        } else {
            $('.form.update').submit(function(e){
                e.preventDefault();
                alert(button);
                jQuery.ajax({
                    type: "POST",
                    url: "<?php echo base_url(); ?>" + "katalog/kelolaPerubahan/" + button,
                    dataType: 'json',
                    data: $(this).serialize(),
                    success: function(res) {
                        updateRow(res, '<?php echo base_url(); ?>');
                    }
                });
            })

        }

    })

or else specify the type of submitbutton to be button like

<button name = "submitbutton" type="button">Click</button>

because if you dont mention it explicitly its default type is submit and hence your page reloades.

Answer 3

Add return false; within your submit event:

$('.form.update').submit(function(e){

    // submit form information through ajax...

    return false; // stop form from refreshing page
});