I am using jQuery prompt to prompt a user to save. So, a user clicks a Save button, the Jquery prompt displays and asks if the user is sure he/she wants to save changes or not. The problem is, the user is able to click multiple times on the jQuery Save prompt button before the prompt closes. As a result, my save routine runs once for each time the prompt save button is clicked, which results in duplicate records in the database. I need to disable the prompt save button on the first click or simply close the prompt window on the first click to prevent multiple saves. How can I do this?
Client code:
$.prompt("Are you sure you want to save? You will not be able to change your decision after it's been saved.", {
title: "Save?",
buttons: { "Save": true, "Cancel": false },
submit: function (e, v, m, f) {
if (v) {
response = saveUpdates(LoanDetails);
}
}
});
I created a fiddle here: http://jsfiddle.net/smurphy/4fqjR/
The solution is a little convoluted. I thought there would be a simpler way to do it but after looking through the documentation I cannot find any built in feature.
Here is the code:
submit: function (value, message) {
if (value) {
$(message.prevObject)
.find('button[value="true"]')
.attr('disabled', true);
//TODO: perform save
//response = saveUpdates(LoanDetails);
}
}
The message param is a reference to the text description so you can find the button by navigating around the DOM from that starting point.
Try to use a global variable as a flag,
or disable the prompt button (if you are using a button to call the prompt)
$("#promptbutton").prop("disabled",true);
Edit:
The easier solution is to simply close the prompt right before calling the saveUpdates function, or at the start of the function:
jQuery.prompt.close();
Related
There is a Close Order button in the Sales Order.
If user clicks the button, the Sales Order will be closed.
We want to pop up a dialog to confirm the click, if user clicks "Yes", then the Sales Order will close; if user clicks "No", it will return to the page and nothing happens.
I know the button id for the Close Order is "closeremaining", and we can use the following code to show to confirmation dialog:
var options = {
title: "Are you sure you want to close the order?",
message: "Press OK or Cancel"
};
function success(result) {
console.log("Success with value " + result);
}
function failure(reason) {
console.log("Failure: " + reason);
}
dialog.confirm(options).then(success).catch(failure);
But we don't know how to pop the dialog after user clicks the button in VIEW mode. I tried the following but in vain:
var closeOrderBtn = document.getElementById("closeremaining");
closeOrderBtn.addEventListener("click", showConfirmDialog);
Can anyone give me help?
Currently, triggering a script from a Standard Button(Close Order) is not yet possible. What you can do is to hide the standard button and replace it with a custom one so you can have full control of its functionality.
Here is an overview of what you need to do:
Hide the Close Order button
Deploy a User Event script and add a button through it
Use a client script to add the functionality that will be performed by the script (Show confirm pop-up)
You can then proceed to close the order by changing the isclosed field to
True in the item sublists
Also, you can read SuiteAnswers article: SuiteScript > Confirm before Closing a Transaction Record (Id: 65115) since it has a step by step guide on how to implement it. You can use the Id when searching.
I have a form where people can delete records;
Delete Record 1
Delete Record 2
Delete Record 3
To ensure they are sure, I am using a "Are you sure" confirmation script (Popconfirm) which gives a nice little popup confirmation.
$(".confirm-action").popConfirm();
If the user clicks cancel, nothing happens. If they click 'yes' - the link is processed and the record deleted. This is working as intended.
Now instead of following the link (when the user clicks 'yes'), I want to fire an ajax request:
$('.confirm-action').click(function(event) {
event.preventDefault();
$.ajax({
// Ajax stuff here
});
});
$(".confirm-action").popConfirm();
The problem is when I try this, the functions are fired in the correct order when expected, except the event is null, so the script fails.
How do I "preventDefault()" when the event is null, and/or manually get the event to prevent the link from being followed by the browser?
Edit: JSFiddle showing the problem.
As noted in the comments, the plugin is horrible and plays with _data(events) IE plays with internal event management of jQuery.
If you aren't concerned about the UI, I would suggest you to go with normal confirm() as used in SO.
I've created this for you while typing this answer:
$.fn.nativeConfirm = function (options) {
return this.click(function () {
var bool = confirm(options.text);
bool ? options.yes.call(this) : options.no.call(this);
});
}
Example:
$('a').nativeConfirm({
yes: function(){
alert('yes');
},
no:function(){
alert('no');
},
text: 'Seriously?'
});
PRE EDIT: It turned out that it was not about the disability of the button, but making some other actions after save. I debugged the page and found out that after making changes on a saved form, then page loses the javascript functionality in the (document).ready part. I've added the solution as an answer.
I have an entry page which has two buttons save and approve. The mechanism is something like, you can fill the form and save, then approve. You can also reach a saved page by refreshing the page or from the list of your saved pages.
The approve button is disabled if the form is not saved. I enable it from code behind after saving. Approve button also has a confirm button extender which takes its confirm text from javascript. I load it in (document).ready and its code is:
$(document).ready(function () {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_btnApprove").click(function () {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_lblMessage").text(GetConfirmTextForApprove());
});
});
,where GetConfirmTextForApproval() makes some calculations and returns the confirm text.
Now, my problem is, as the button is disabled when you open the form, the code above is not rendered at the first page load. This leads to the problem that, when I start to fill a form and save it, then approve it, I don't get any confirm text, because it does not run the function. But after refreshing the page or after I go to a saved form's page from another page, I get the proper confirm text.
So, how can I solve this problem? How can I get the proper confirm text even though the button is disabled at the first page load?
Note: I have to add that after saving, the url of the page is changed. The query string is added. That might also cause the problem.
You can use
// Disable #x
$( "#x" ).prop( "disabled", true );
// Enable #x
$( "#x" ).prop( "disabled", false );
But not when document ready, you need enable button when you want. Then you need create a event listener
$("#button").click(function(){
//Your code
if(GetConfirmTextForApproval()){
//You active the button and the text that you want show.
}
});
Solved my own problem:
As it was said in the pre edit of the question, the problem was caused because of making changes after the save. I've changed my function as:
$(document).ready(function () {
SetConfirmMessageForApproval();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
});
function EndRequestHandler(sender, args) {
SetConfirmMessageForApproval();
}
function SetConfirmMessageForApproval() {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_btnApprove").click(function () {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_lblMessage").text(GetConfirmTextForApprove());
});
}
This helps, if anyone else needs it.
I have a page where user needs to enter some data and click save to validate the changes, but my problem is if the user is trying to close the browser window or click on a different link to navigate to a different page..I need to delete all the entries the user has saved so far..
I am doing it the following way
window.onbeforeunload = function()
{
if(confirm('Are you sure you want to navigate'))
{
//Invoke `enter code here`server side method
}
else
{
// return false;
}
}
Everything works fine if he click on Yes, the problem comes when he click on "No"..Even if he click on No..the page unload method is getting called and it is redirected to a different page..but I want it to stay in the same page in same state...can you please help me in achieving this.
Thanks and appreciate your response....
You cannot stop the user from leaving the page. What you can do is alert a message to them, asking if they want to leave or not.
The window.onbeforeunload event should return a string (and only a string). This string will be printed on the alert box made by the browser.
You cannot use your own alert box, or block the user from leaving (or redirect them).
window.onbeforeunload = function(){
return 'Are you sure you want to leave?';
};
Or with jQuery
$(window).on('beforeunload', function(){
return 'Are you sure you want to leave?';
});
When a user leaves the page, you can use the onunload event to make an AJAX call (you may need to use async: false here).
Example:
$(window).unload(function(){
$.ajax({
url: '/path/to/page/',
async: false, // this may be needed to make sure the browser doesn't
// unload before this is done
success: function(){
// Do something
}
});
});
NOTE: Instead of doing this, why don't you just save everything when the user is completed? Instead of saving it and then removing it if the user doesn't finish?
First of all: you can't! It's impossible. onbeforeunload only accepts a string as return value and will then close if the user wants that.
But then think about what happens if the computer is being without energy and shuts down? Or the browser will closed by the Task Manager? Or even more "realistic": The internet connection get lost! => Then you got invalid data states too!
You are trying to solve a false problem! Your problem isn't this function, your problem is the state of your formular!
Why do you need some kind of function? Do you saving the data before he clicks on save? Then don't! Or make sure to have another query which detects unfinished data in your database and delete it after a timeout!
onbeforeunload only accepts a string as return value. That string will be displayed by the browser with the option to stay on the page or leave it. But that's ll you can do.
You can use something like this, just call the following function on your page
function noBack() {
window.onbeforeunload = function(){window.history.forward()}
}
this disables Back button if window.history is clean, otherwise it works only first time.
I am saving records on save button click, if user don't click save button and navigate to another page while clicking on some link even then i want to call the save method.
How can I achieve this functionality?
please provide some sample code ...
thanks in advance for your help
You can make ajax request on
window.onbeforeunload = function(){
////make ajax request
}
Or can prevent the user by giving confirm box
function showalert() {
if (!confirm('Are you sure you want to exit without saving changes?')) {
////make ajax request
}
else {return true;}
}
window.onbeforeunload = function(){ showalert }
For example check this out when I leave this page while answering SO prevent me
Use an ajax post, triggered by window.OnBeforeUnload() to let yourself know that the user has left the page, and pass any information you need.
Well since you want to call the save method even if the user navigates to another page or link
what u need to do is set a hidden field for eg. suppose hdnSave and set its value to say 0
Now when the user navigates or clicks on any another link first check if this hidden field value(hdnSave) is set to 1 or not.If not then Call Save Method.So this hidden Field can be used as an indicator of whether Save Method has been called or not.
Similarly you can use a session(in c# code) for the same purpose as well.