user2809299
user2809299

Reputation: 159

How to add button click event with a callback function in javascript as window.confirm

First question here, Newbie on Stackoverflow, so if there is anything which I have missed, please guide me.my question is as follows,

I am creating a custom popup message like window.confirm. In the function user need to pass some of the arguments like Msg header, content and type of the message along with a callback function which will execute when user click on the buttons on the popup.

For creating popup I have written below code:

 function CreatePopupMessage(IsConfirm,ContentMsg,Headertext,WithoutHeader,callbackFunction){    
    var popupHtml = '<div class="modal-dialog">';
    popupHtml += '<div class="modal-content">';
    if(WithoutHeader == true){
        popupHtml += '<button type="button" class="close" style="position:absolute;z-index:9999;right:0;margin-right:10px;margin-top:2px;" data-dismiss="modal" aria-hidden="true">×</button>';
    }
    else{
        popupHtml += '<div class="modal-header">';
        popupHtml += '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>';
        popupHtml += '<h4 class="popup-header-text">'+Headertext+'</h4>';
        popupHtml += '</div>';
    }
    popupHtml += '<div class="modal-body">';
    popupHtml += '<p>'+ContentMsg+'</p>';
    popupHtml += '</div>';
    popupHtml += '<div class="modal-footer">';
    popupHtml += '<button class="btn btn-primary" id="okBtnPress" data-dismiss="modal" aria-hidden="true">Ok</button>';
    if(IsConfirm == true){
        popupHtml += '<button class="btn btn-default" id="cancelBtnPress" data-dismiss="modal" aria-hidden="true">Cancel</button>';
    }        
    popupHtml += '</div>';
    popupHtml += '</div>';
    popupHtml += '</div>'; 

    $('div#Timed_CustomPopupModel').html(popupHtml);

    // Callback function Which will be executed
   // NEED HELP HERE TO WORK OUT HOW TO ATTACH THE BUTTON CLICK WITH THE CALLBACK FUNCTION AS ARGUMENT
      callbackFunction(argument); // Argument should be the single which will tell user that on which button user has been clicked , like in windo.confirm we get 'true' when we click OK button and get 'false ' when we click 'Cancel' button

 }

Now I just want to pass some simple arguments which will create the popup and show that to user, now when user click any of the button in the popup the callback function which is created by user should called and it will pass a argument which will tell result, which contains either true or false as window.confirm.

so my callback function which I will pass in my popup Message will look like this:

 function onPopupButtonClicked(result){
     if(result == true){
        // Ok button pressed in the popup, please perform this
     }
     else if(result == false){
        // Cancel button pressed in the popup, please perform this
     }
 }

 // Call the popup generate function 
  CreatePopupMessage(true,'Confirm With the Operation?','Confirm',false,onPopupButtonClicked);

As we execute this code it will show the popup and when we click on any of the button our callback function onPopupButtonClicked will called. See the generated popup will look like that: Popup Message image

Please help me how can I achieve this functionality. Thanks

Upvotes: 1

Views: 5901

Answers (2)

user2560539
user2560539

Reputation:

When your modal is opened you want to bind a value to each button, true when OK is clicked and false when CANCEL is clicked. So use the function below as your callback.

function onPopupButtonClicked(){
    $(document).on('click','#okBtnPress',function() {
    alert('true'); // TRUE
    });
    $(document).on('click','#cancelBtnPress',function() {
    alert('false'); // TRUE
    });
}

Working example here

Upvotes: 0

TechnicalTophat
TechnicalTophat

Reputation: 1725

You could use a bootstrap modal for this. In the modal, You can do whatever inputs you need then a 'submit' btn which will have a JQuery handler when clicked. You can then get the textbox values, do whatever you need to do, and then execute the callback (or whatever).

the JQuery code would be like so:

$(function(){
  $('#btnId').click(function(cb){
    //Do whatever you need to do here
  })
})

and HTML:

<input ... />
<input ... />
<button id='btnId'>Submit</button>

EDIT:

After some clarification, I now understand the question. Please see below for solution:

To do this the modal would have to be generated dynamically for each Modal, then on the delete button all you would add is the Modal open, it wouldn't actually start to delete the record. On the confirm, the 'Yes' button would execute your deletion code. The cancel button would just... well, cancel. To do this you would need a Modal tree of 2 modals, the outer one for the Delete window (or whatever), and the inner one for the confirm window.

Upvotes: 0

Related Questions