防止頁面刷新後顯示莫代爾

Question

我有這樣的功能：

​​

我有兩個按鈕，在我的形式，具有不同的價值。當我點擊的按鈕值不等於0時，它看起來很好，並且按照它應該做的那樣進行提交操作。但是，當值爲0時，我的目標是顯示一個包含兩個選項的模式，即cancel或ok。但是，當模式顯示時，頁面正在重新加載。我怎樣才能防止這種重新加載，並等到選擇了兩個選項（取消或確定）？

Answer 1

兩天後我得到我想要的，當模式顯示時，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的執行阿賈克斯行動。

非常感謝您的答覆。

Answer 2

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

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

    // submit form information through ajax... 

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

Answer 3

你頁面重新加載，因爲你沒有在submitbutton一個e.preventDefault()動作，並且它不會等待你點擊模態和reloades OK這一頁。

試試這個：

$('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，因此您的網頁reloades。