Waiting for the user activities before proceeding to next step of code jquery -


i building simple plugin confirmation. send request plugin yes or no activities. click yes delete item database & no escape step. want plugin wait user activity. if user click no stop current code of function. if user press yes proceed remaining part of code.

like:

 $(document).on("click",".somebtn", function(){       $(this).confirm();   //calls plugin        $(this).confirm.no();  //calling plugin 'no' function        // how returned data function of plugin        //here want plugin wait user activity.         //if click 'no' stop code execution here ,         //if click 'yes' go , execute code below.       $(this).confirm.yes();   }); 

plugin

 jquery.fn.confirm = function ()  {     jquery.fn.confirm.yes = function (data)      {         //ajax calls      };     jquery.fn.confirm.no = function ()     {        return "abcd";                       };   }; 

i've prepared example simple modal box.

$(document).ready(function() {            //show dialog yes or no      $('#proceed').on('click', function() {           $('#dialog1').show();          });                            $.fn.confirm = function () {               return {               yes: function () {                          $('.answer').text('clicked yes');                  $('#dialog1').hide();                    return "yes"       },           no: function () {                              $('.answer').text('clicked no');                  $('#dialog1').hide();                                 return "no"       }           }       }                  $('#btn_yes').on('click', function() {          $.fn.confirm().yes();      });            $('#btn_no').on('click', function() {          $.fn.confirm().no();      });                });
body {      padding:50px;  }  .popup {         display:none;      width:300px;      height:150px;      padding:10px 20px;      border:1px solid gray;      box-shadow: 2px 2px 2px rgba(0,0,0,1);        }    .proceed {      margin: 30px;  }    .answer {      margin-top: 30px;      font-size: 14px;      background: yellow;      color: black;      }  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button id="proceed">show modal</button>    <div class="popup" id="dialog1">      <p>proceed next step?</p>      <button id="btn_yes">yes</button>      <button id="btn_no">no</button>  </div>    <div class="answer">user answer</div>


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -