Link to home
Start Free TrialLog in
Avatar of SmashAndGrab
SmashAndGrab

asked on

Show confirmation alert in Jquery

Hi,

I use a simple Jquery overlay with an onclose function.

  $('#Email_popup').popup({
            onclose: function () {
               
                location.reload();
            }
        });

Open in new window


I would like to running the " location.reload();"  I would like to confrim with the user that that is ok.  

I used to use a "RETURN CONFIRM" in javascript but am not sure how to do this in Jquery?
Avatar of Big Monty
Big Monty
Flag of United States of America image

i use bootbox.js for such purposes. Based off of bootstrap, it adds highly customized dialog boxes to present to the user

http://www.bootbox.js
Avatar of SmashAndGrab
SmashAndGrab

ASKER

Thanks - Not sure if I have explained what I want very well :)

He's the sort of thing I am looking for..


 $('#Email_popup').popup({
            onclose: function () {

//The user has clicked to close the popup
//Ask the user if they are sure thats what they want to do?

if UserAnswer =YES then                          
      location.reload();
else
      //do nothing
end          

}
        });
Nope, you explained it perfectly well, I was just offering another approach you can take using a jquery plugin that does the heavy lifting for you.

if you don't want to use that approach, you need to offer a little more info. how do you want to display the confirmation message? should it be another modal window? or maybe you want to display the message text in the current modal window (say, in an empty DIV). Or you could also use a good old fashion javascript confirmation box.

If you can provide more info, that would be helpful. I still suggest using bootbox though, only because I've had a lot of success (and time saved) using it
ok - thanks - I just wanted to check as I often do not explain my questions very well :)

This is literally the last bit of work left of this particular project and it all works well. I was after something very simple (quick and dirty!).

Would rather not introduce any more jquery libraries now and just use what I have already.

I've had a look at the bootbox and it looks great, so I will definatly be using that for my next project.
if you can provide info on how you want it to look, I may be able to come up with a solution. Would a simple confirmation box work for you, or do you want something more elegant?
Here is an example of how to do this. Responsive confirmation box using HTML, CSS, jQuery and Promises
CSS
.overlay {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.85);
  z-index: 10000;
}
.popup {
  width: 98%;
  padding: 15px;
  left: 0;
  margin-left: 1%;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: white;
  position: absolute;
  top: -100%;
  box-shadow: 5px 5px 5px #000;
  z-index: 10001;
}
@media (min-width: 768px) {
  .popup {
    width: 66.66666666%;
    margin-left: 16.666666%;
  }
}
@media (min-width: 992px) {
  .popup {
    width: 50%;
    margin-left: 25%;
  }
}
@media (min-width: 1200px) {
  .popup {
    width: 33.33333%;
    margin-left: 33.33333%;
  }
}

Open in new window

jQuery
<script>
function showPrompt(msg)
{
  // CREATE A Promise TO RETURN
  var p = new Promise(function(resolve, reject) {;
  
    var dialog = $('<div/>', {class: 'popup'})
      .append(
        $('<p/>').html(msg)
      )
      .append(
        $('<div/>', {class: 'text-right'})
          .append($('<button/>', {class: 'btn btn-cancel'}).html('Cancel').on('click', function() {
            $('.overlay').remove();
            // RESOLVE Promise TO false
            resolve(false);
          }))
          .append($('<button/>', {class: 'btn btn-primary'}).html('Ok').on('click', function() {
            $('.overlay').remove();
            // RESOLVE Promise TO true
            resolve(true);
          }))
      );
      
    var overlay = $('<div/>', {class: 'overlay'})
      .append(dialog);
    
    $('body').append(overlay);
    $(dialog).animate({top: '15%'}, 1000);
  });
  
  // RETURN THE Promise
  return p;
}

$(function() {
  // HANDLE open-dialog CLICK
  $('.open-dialog').on('click',function(e) {
    // PREVENT DEFAULT BEHAVIOUR FOR <a/>
    e.preventDefault();

    // SAVE PROMISE RETURN
    var res = showPrompt('Do you like our confirmation?');
    res.then(function(ret) {
      ret ? alert('Ok clicked') : alert('Cancel clicked');
    })
  });
});
</script>

Open in new window

Working sample here

Full discussion of the code in this article https://www.experts-exchange.com/articles/28838/Create-a-responsive-confirmation-popup-using-HTML-CSS-jQuery-and-Promises.html
Thanks guys.

big Monty - is there a simple Javascript version?
is there a simple Javascript version
I thought this was a simple JavaScript solution ?
Thanks Julian,


Is this possible without adding too much code?  

I.e. could I just have a javascript alert with ok/cancel?
 and fit that in with my existing Jquery?



like this..


 $('#Email_popup').popup({
             onclose: function () {

//SHOW JAVASCRIPT ALERT HERE  "ARE YOU SURE" - with OK/CANCEL?

 if UserAnswer =YES then                          
       location.reload();
 else
       //do nothing
 end          

 }
         });
Or, I guess, alternatively.

Make the overlay popup so that it can only be closed by a button?  Maybe this would be easier?
So if I understand correctly - you want to put a popup confirm inside a popup close?

And you don't want to use confirm()?
Hey,

Its not ideal but I used this..

User generated image

Cancel button text:


 <input type="button" value="Cancel" id="btnClose" onclick="javascript:if(confirm('Are you sure you want to cancel? If you cancel now you will not be able to view your estimate.')){location.reload(); return false;}" />


So, if the user clicks the "Cancel" button, they will get a javascript confirm box that will reload the form if they click "ok".

Very redamentry but does the job in a basic way.
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial