2016-11-06 6 views
0

ユーザーがドロップダウンリストからオプションを選択すると、jQuery chnageイベントが発生します。リストを選択すると、beforeSendの2つの入力ボックスが表示されます。次のように:beforeSend()の後にajaxを呼び出すにはどうすればよいですか?

「YES PROCEED」ボタンが押された場合、実際のajaxを呼び出したいと思います。しかし、私はこれをどうすればいいのか分かりません。プロセス全体を処理するjQueryコードが少なくなっていますか?

のjQueryコード:

<script type="text/javascript"> 
    $(document).ready(function(){   
     $(".order_accept").change(function(event) { 
      event.preventDefault(); 
      $('.order_accept_msg').show();    
      var poid = $(this).find(':selected').data('poid');    
      var oid = $('.order_accept').val(); 
      var token = <?php echo "'".generate_Form_Token('order_accept')."';"; ?> 
      $.ajax({ 
       url : <?php echo "'".SITE_URL."'"; ?> + 'order-accept', 
       type : 'POST', 
       dataType : 'html', 
       data : { 
        'poid' : poid, 
        'oid' : oid, 
        '_token' : token, 
       }, 
       beforeSend : function() {      
        $('.order_accept_msg').html('<h4>Are you sure to proceed ?</h4><input type="submit" class="btn btn-danger" name="submit" id="yes" value="YES PROCEED">&nbsp;<input type="submit" class="btn btn-primary" id="now" name="submit" value="NO">'); 
        alert($('#yes').text()); 
        return false; 
       }, 
       success : function (result) { 
        $('.order_accept_msg').html(result); 
        setTimeout(function(){ 
         $('.order_accept_msg').hide(); 
        }, 3000); 
       } 
      }); 
     }); 
    }); 
</script> 
+0

前に条件を追加し、$.ajaxコールを実行したい場合。フォーム送信イベントでAJAXを使ってみませんか? – charlietfl

+0

フォームには、HTMLドロップダウンリストのみが含まれています。ユーザーがリストを変更すると、ダイアログ/警告ボックスではなく、はい/いいえの確認が表示されます。はいボタンが押された場合、実際のajaxを呼びたいと思います。 –

+1

変更イベントにボタンを表示し、送信イベントでリクエストを行います – charlietfl

答えて

0

beforeSendコールバックが行われ、AJAX要求の前に呼び出されますが、それは$.ajaxが既に呼び出されてい呼び出さだ時点で、要求をキャンセルすることはできません。

あなたは条件付きで挿入された入力が、これはおそらく形式で提出しているので、AJAX呼び出し

$(document).ready(function() { 
    $(".order_accept").change(function(event) { 
     event.preventDefault(); 

     var confirmH4 = $('<h4 />', { 
       text : 'Are you sure to proceed ?' 
      }), 
      confirmBtn1 = $('<input />', { 
       type : 'button', 
       'class' : 'btn btn-danger', 
       value : 'YES PROCEED', 
       on  : { 
        click : doAjax 
       } 
      }), 
      confirmBtn2 = $('<input />', { 
       type : 'button', 
       'class' : 'btn btn-danger', 
       value : 'NO' 
      }); 

     $('.order_accept_msg').empty().append(confirmH4, confirmBtn1, confirmBtn2).show(); 
    }); 

    function doAjax(poi, oid, token) { 
     var acc = $(this).closest('.order_accept'); 
     var poid = acc.find(':selected').data('poid'); 
     var oid = acc.val(); 
     var token = '<?php echo generate_Form_Token('order_accept'); ?>'; 

     $.ajax({ 
      url  : '<?php echo SITE_URL; ?>order-accept', 
      type  : 'POST', 
      dataType : 'html', 
      data  : { 
       poid : poid, 
       oid : oid, 
       _token : token, 
      }, 
      success: function(result) { 
       $('.order_accept_msg').html(result); 
       setTimeout(function() { 
        $('.order_accept_msg').hide(); 
       }, 3000); 
      } 
     }); 
    } 
});