显示模态后防止页面重新加载

Question

我有这个功能:

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

        }

    })

我的表单中有两个按钮，具有不同的值。当我点击的按钮值不等于0时，看起来不错，按理去做提交动作。但是，当值为 0 时，我的目标是显示一个包含两个选项的模式，取消或确定。但是，当模式显示时，页面正在重新加载。如何防止重新加载并等待两个选项（取消或确定）被选中？

Answer 1

在您的提交事件中添加 return false;：

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

    // submit form information through ajax...

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

Answer 2

您的页面正在重新加载，因为您没有对 submitbutton 执行 e.preventDefault() 操作，并且它不会等待您在模式模式上单击“确定”并重新加载页面。

试试这个：

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

        }

    })

或者指定 submitbutton 的类型为类似按钮的

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

因为如果你不明确提及它，它的默认类型是 submit，因此你的页面会重新加载。

Answer 3

两天后我得到了我想要的，当模态显示时，javascript 将得到用户想要的。

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

        }
    })

当值为 0 时，表单将提交值并且我阻止事件显示给模式，当用户选择执行模式所说的操作时，javascript 执行 ajax 操作。

非常感谢您的回答。

显示模态后防止页面重新加载

Prevent Page Reload after Showing Modal

jquery

modal-dialog

semantic-ui