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?

This page may be helpful [How to trigger an event after using event.preventDefault()](http://stackoverflow.com/questions/7610871/how-to-trigger-an-event-after-using-event-preventdefault) — bansi, Jan 04 '17 at 04:42

score 2 · Answer 1 · answered Jan 04 '17 at 04:48

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.

That is correct but mind it, this code is registering submit event everytime when modal opens.....! — Jai, Jan 04 '17 at 04:51
yes, it is working.. but the submit action is not working anymore — imilah, Jan 04 '17 at 05:59
Can you do a console.log in `$('.form.update').submit(function(e){` in onApprove function that will check if it is coming in the call or not — Shubham Khatri, Jan 04 '17 at 06:06

GROVER. · Answer 2 · 2017-01-04T04:42:30.470

0

Add return false; within your submit event:

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

    // submit form information through ajax...

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

edited Jan 04 '17 at 04:42

answered Jan 04 '17 at 04:37

GROVER.

4,071
2
19
66

when I add `return false`, all of my code is not working – imilah Jan 04 '17 at 04:38
yeah, my apologies. I added it to the wrong block of JavaScript lol. One moment... – GROVER. Jan 04 '17 at 04:39
@imilah try now :-) – GROVER. Jan 04 '17 at 04:43
still, the page is reloading – imilah Jan 04 '17 at 05:34

score 0 · Accepted Answer · answered Jan 06 '17 at 02:14

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.

Prevent Page Reload after Showing Modal

3 Answers3