防ぐページのリロードモーダル

Question

を表示した後、私はこの機能を持っています。クリックしたボタンの値が0でなければ、正常に表示され、送信アクションを実行する必要があります。しかし、値が0の場合、私の目標は2つのオプション、キャンセル、またはOKを含むモーダルを表示しています。しかし、モーダルが表示されているときに、ページがリロードされています。このリロードを防止し、2つのオプション（キャンセルまたはOK）が選択されるまで待機するにはどうすればよいですか？

Answer 1

2日後、私はモーダルが表示されているときに、私が望むものを得る.JavaScriptはユーザーが望むものを得るだろう。値が0の場合

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

     } 
    }) 

、フォームの値を提出すると私は、ユーザーがモーダルは、JavascriptをAjaxのアクションを実行すると何をすることを選択したときに、モーダル表示するためにイベントを防ぎます。

ご回答いただきありがとうございます。

Answer 2

あなたのイベントを提出以内return false;を追加：submitbuttonにe.preventDefault()アクションを持っていないので、

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

    // submit form information through ajax... 

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

Answer 3

あなたのページがリロードされ、そしてあなたがモーダルと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(); ?>'); 
        } 
       }); 
      }) 

     } 

    }) 

または他のあなたはそのデフォルトのタイプはsubmitので、あなたのページのreloadesで明示的に言及してはいけないので、場合

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

などのボタンであることをsubmitbuttonのタイプを指定します。

はこれを試してみてください。