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
Post a Comment