CODEWITHSUNDEEP
javascriptjqueryhtml
Mbrouwer88
Mbrouwer88

Reputation: 2282

Making a confirm box

I am trying to make my own dialog box. I want to use jquery for this. For some buttons on my site I need a confirmation dialog (like "Are you sure you want to delete" yes/no). When the dialog is active, the rest of the site should not be clickable.

So, I made this:

<div class="overlay" id="overlay" style="display:none;">
  <div class="overlaycontent" id="overlaycontent">
    <div id="overlaytext" class="overlaytext ">
      <span id="overlaymessage" class="mediumtext bold">Deze klant verwijderen?</span>
      <br><br>
      <button id="nobutton" class="button1 highbutton hand" onclick="confirmno()">Nee</button>&nbsp;&nbsp;
      <button id="yesbutton" class="button2 highbutton hand" onclick="confirmyes()">Ja</button>
    </div>
  </div>
</div>

ID overlay is over the whole page. ID overlaycontent creates a white box on top of it. ID overlaytext centers the message ID overlaymessage contains the question/message. ID nobutton is the button to say no :) ID yesbutton is.. guess what :)

Now, the javascript to display a message:

function confirm(message,nobutton,yesbutton){
$('#overlaymessage').html(message);
$('#nobutton').html(nobutton);
$('#yesbutton').html(yesbutton);
$('#overlay').show();
}
function confirmno(){
$('#overlay').hide();
}
function confirmyes(){
????
}

So far, it works fine (except the yes button of course, please read further on), but for the next step I lack the knowledge. Say that I have a button somewhere to delete a user on my website.

<button class="redbutton" onclick="deleteuser(22)">

The button needs javascript like:

<script language="javascript">
function deleteuser(userid){
  confirm('Delete user?','No','Yes');
  ??????  
}
</script>

Now where the question marks are, I want the function to do something based on the fact the user clicked yes or no. How to catch this? I don't have any idea. Please help me out. I don't want to use Jquireui.dialog.

Upvotes: 0

Views: 2657

Answers (3)

chug187
chug187

Reputation: 137

The trouble here is that you can't pause execution in javascript, so you'll need to adjust your confirm function (which you should probably rename, by the way, since JS has a native confirm function). Get rid of the onclick of your yes button, and adjust your confirm function like so:

function confirm(message,nobutton,yesbutton,yesfunction){
  $('#overlaymessage').html(message);
  $('#nobutton').html(nobutton);
  $('#yesbutton').html(yesbutton);
  $('#overlay').show();
  $('#yesbutton').off("click").click(yesfunction);
}

Then, pass a function into your confirm call:

function deleteuser(userid){
  function deleteConfirmed() {
    // delete code here
  }
  confirm('Delete user?','No','Yes',deleteConfirmed);
}

Upvotes: 3

Ravi Rajendra
Ravi Rajendra

Reputation: 718

You can simply do this. 

<script language="javascript">
function deleteuser(userid){
  if(confirm('Delete user?')) {
     //'Ok' is clicked
  }
  else {
     //'Cancel' is clicked
  }
}
</script>

Upvotes: 1

Ozzy
Ozzy

Reputation: 8312

You need to capture the result from your confirm dialogue box e.g.

var x = confirm("Are you sure you are ok?");
if (x) {
    alert("Good!");
} else {
    alert("Too bad");
}

Upvotes: 2

Related Questions