How to show the confirmation alert with one button using javascript? - javascript

In my application, i need to show the message in alert with OK button.
In that button click event, i want to do some functionalities using the javascript.
So, how can i do this in my app?
Please let me know?

I'm not entirely sure what you are trying to do, but you may be looking for the window.confirm function, which is a built-in function like alert that allows you to capture the response (true or false) from the user:
if(confirm("Some message")) {
//Clicked ok
} else {
//Clicked cancel
}
If you want more functionality than that I'm afraid you'll have to look elsewhere. There are endless modal scripts and libraries available, so just search for one that suits your needs.
Having re-read your question title, maybe you just want the normal window.alert function? That will display a dialog with one button, and, in general, prevent execution of the code following it until the user has closed it:
alert("Some message");

If you'll be using alert() then the execution of javascript will stop where the alert is written. And after the OK button is pressed, the code execution will resume.
So, do an alert(message); and after that line, put the code you want to be executed after the OK button is pressed.
If you want more control, you can use jQuery UI Dialog.

Forget about built-in popups. Even if you make it work you'll probably hit some cross-browser issues and you won't be able to sleep (trust me: I know what I'm saying, I've been there). :)
I've been using jQuery UI ( link ) for some time and I am really satisfied with. Give it a try!

Here's a simple example
if (confirm("Select a button")){
alert("You selected OK");
}else{
alert("You selected Cancel");
}
But if you're just looking for a popup with one button I would go for the alert()
alert("Press OK to close!");
For more popup examples, go to w3schools

Related

alert and confirm boxes do not appear

I have a couple of webpages which i in part build up dynamically (php and JavaScript).
Everything used to work well in the past, but now the various calls to alert and confirm do not cause dialog boxes to appear anymore.
Using the JavaScript debugger in firefox i can verify, for example, that the statement
var r = confirm("Do you really want to save this data?");
is executed, but no dialog window is opened, and the code goes on as if i had pressed "no" (in this step the watch expression for r changes from "undefined" to "false").
The same happens for calls to alert - the code is executed, but no dialog window is shown.
I have not checked these pages in a while, which means there have been various software updates since then.
Strangely however, this seems not to be a browser-wide effect: a different set of similarly built pages does not show this behavior - there, the dialog boxes are shown.
Is it possible that there is some setting in JavaScript or php which prevents dialogs from opening?
Does anybody have an idea how to fix this problem?
I had the same problem before and my problem was solved with the following code. You try it too, maybe it will help you too.
let r = window.confirm("Do you really want to save this data?");

How to disable 'Changes you made may not be saved' when clicking an anchor tag

I have a site built with Asp.Net mvc where I show a list of products and automatically fill in the default purchasing amount for those products in each corresponding input field.
However when i navigate to a different product catalog using the anchor tag the 'Changes may not be saved' alert pops up presumably because of the default values entered in the input fields.
Now I have tried to disable this alert using the following in my shared layout page inside of a script tag:
window.onbeforeunload = null
window.beforeunload = null
I have also tried various answers from similar questions but nothing seems to help.
Does anyone know how I can get rid of this alert?
Thanks in advance.
You may have more success using this for jQuery:
$(window).off('beforeunload');
You can also read about some of the caveats and potential pitfalls of the beforeunload event here.
Update:
Just to clarify a point further from a comment #Jamiec left, the event should be triggered in your project somewhere, try searching for beforeunload to see where it originates.
Apparantly the alert was being called from a directive created by a colleague, by disabling this directive the alert no longer appears.
Thanks to Jamiec for notifying me.
Using Jquery Try below code.
$(window).off('beforeunload');
This is best option for changes that you made may not be saved popup.
If you use javascript then you can use below code,
window.onbeforeunload = function () {return null;};

Automating javascript confirmation box

As is known, when a javascript confirmation alert/box pops up, the browser focuses on the box leaving everything else disabled until one of two options are chosen, when "OK" is clicked it returns true, when "Cancel" is clicked it returns false.
Now when writing scripts that involve confirmation alerts, my statements are based on the return of these booleans, now I am wondering (I do not know if this is a dumb question), ist here a way in javascript alone to force or automate the return of either true or false?
For instance, I write a script to detect a confirmation alert, and then force it to return true or false in my script.
Note: I am a mere beginner in javascript, so I do not know if this is a good question or not, but I would appreciate an answer.
Not from within the page.
JavaScript is single threaded and confirm and alert are blocking. No JS will run while they are waiting for input.
If you were, for instance, writing tests for this, then you could try mocking the entire confirm or alert function.
window.confirmValue = true;
window.confirm = function () { return window.confirmValue; }
if (confirm("Hello, world")) {
console.log("True");
}
If you were writing JS from outside the page (e.g. to drive PhantomJS) then the approach might be different.

How to show confirm box like StackOverflow's confirmation box?

Ask a question, and while editing the body of your question, click on some link on the page. StackOverflow's script knows that you are not finished yet, and warns you about loosing your unsaved data. However, it's confirmation box is not a jQuery plugin, or anything like that. It seems that its confirmation box is browser-specific box, something like JavaScript's confirm box. To prove it, simply check it in many browsers and you see different UI styles.
How they've done it? Which JavaScript command?
The onbeforeunload Javascript event is what you're looking for.
Trying setting a global flag to know when the page is "editing" and then use the onbeforeunload event
window.onbeforeunload = function(){ return globalEditingFlag ? 'You are editing': null }
Look at this :
http://www.w3schools.com/js/js_popup.asp
The section about the confirm box

Prompt User to Fill in Form Prior to Leaving Web Page - via Javascript

I have a web form on my web page. Before the user leaves the page, I want a javascript popup message asking the user if they have completed the form with a "Yes" or "No" button on it. If the user clicks "Yes", then they are brought to the page they intended to go to. However, if the user clicks "No", then the user remains on this page.
I am not very familiar with Javascript so any guidance would be much appreciated. I am suspecting that I would use something like below:
<ELEMENT onbeforeunload = "handler" ... >
Thanks in advance.
Split P.
I'm not sure if this is something you're required to do by someone else, or something you think would be a good idea, but let me say that if you have the choice, please don't do this. If the user wants to leave the page, let them leave the page without telling them something they already know. Further, several modern browsers already have this functionality baked in, so it is just adding another layer of annoying for the user.
Having said that, take a look at this page, which will tell you everything you need to know.
What makes onbeforeunload quirky is that if you return ANYTHING at all in your event handler it will pop up a confirmation alert box asking the user if he or she is REALLY sure they want to leave the page
...
You can insert your own explanatory text BETWEEN those two lines by including a string on the return statement. For instance:
<script type="text/javascript">
window.onbeforeunload = function () {
return "The text you want the alert box to say.";
}
</script>
2 1 thing (thanks #horray I'm helping).
You're better off detecting whether the form has been filled out programmatically, then if the user clicks to continue on without providing a critical piece of data, ask them for it. If they decide not to provide it, let them go.
For example:
var requiredField = document.getElementById("required");
if (requiredField.value == "")
{
if (!confirm("Are you sure you want to go without saving your work?")){
requiredField.focus();
}
}
You could put that in click handlers for links, submit buttons or in the beforeunload event as you mentioned.

Categories