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

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

试试这个：

$('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 2

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

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

    // submit form information through ajax...

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

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操作。

非常感谢您的所有答案。

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

3 个答案: