Develop Reference

How do I trigger a JavaScript confirm box without using a click event?

I'm working on an application that handles complaints. The user can't "close" the complaint (i.e. mark it as completed) until a batch of conditions are met. Previously, once every condition had been met, a "Close the Complaint" button would appear, but I've been asked instead to generate a confirmation window (asking, "Are you ready to close this complaint?") that would pop up as the user saves the last necessary item.
No problem, I figured. I set up JavaScript to generate the confirm window, and added attributes to the save buttons (when all of the other conditions for closure have been met) on any of the items that might be the final item necessary for closure. Except...
Once they click to save the record, they at least want to do that, whether they're ready to close the complaint or not. But currently, if they confirm "Yes," the record is saved and the complaint is closed, while if they confirm "No," then the complaint isn't closed, but neither is the record saved.
I'm working in vb.net, using Visual Studio 2008, and what I'd like to find is a way to trigger the confirm window after the record is saved (in the ItemInserted sub for the DetailsView). That way, it could get the confirmation and close or not, but the record would be saved either way.
Every bit of advice I can find uses button clicks to generate JavaScript confirm windows; does anybody know another way to do it?
EDIT (adding a bit more background):
The way I originally approached it was to make two identical save buttons. One is the ordinary button that saves the record ("ibInsert"), and the other ("ibInsertAndClose") saves, then closes the record. When the DetailsView databinds in Insert mode, I check the "ready for closure" status, then set the visibility of the buttons.
If ReadyToClose() Then
Dim ibInsertAndClose As ImageButton = CType(dvResponseDetail.FindControl("ibInsertAndClose"), ImageButton)
Dim ibInsert As ImageButton = CType(dvResponseDetail.FindControl("ibInsert"), ImageButton)
If Not ibInsert Is Nothing AndAlso Not ibInsertAndClose Is Nothing Then
ibInsert.Visible = False
ibInsertAndClose.Visible = True
ibInsertAndClose.Attributes.Add("onclick", "javascript: return confirm(""\nAre you ready to close this Complaint?"")")
End If
End If

Sounds like on click event you should save the record regardless then, once the save operation is complete, use a callback function to display the confirm dialog. Here's an example using setTimeout() instead of an actual save operation.
var closureConditionsMet = true;
document.getElementById('closureRecord').addEventListener('click', function() {
//the user clicked the record, so let's save it
simulateSaveRecord(function() {
if (closureConditionsMet) {
confirm('Are you ready to close this complaint?') ? console.log('After save user clicked "OK"') : console.log('After save user clicked "Cancel"');
} else {
console.log('Record saved but cloure conditions have not been met');
}
});
});
function simulateSaveRecord(callback) {
console.log('Waiting a few seconds for \'save\'');
setTimeout(function() {
callback();
}, 3000);
}
<div id="closureRecord">Pretend this is the closure record
</div>

If you are able to get the return from your JavaScript confirm() and you are able to save the record, it sounds like you have everything you need but you just need some guidance on the workflow?
Here's some pseudo-code (since I don't do .NET)
function saveRecord() 'saves the record
'database code here
end function
function closeComplaint() 'closes the complaint
'database code here
end function
function saveButtonClick() 'call this when the save button is clicked
saveRecord() 'fires no matter what the response is
dim alertConfirmedTrue = ??? 'response from JavaScript confirm() function
if alertConfirmedTrue
then closeComplaint() 'only called if response is "ok"
end function

SharePoint 2013: Redirect to different page after cancel button is hit

I am using SharePoint 2013. I have a custom list form for Feedback and Suggestions. Currently, to access the form, a user clicks on a link that takes them directly to the New Item form.
What I am trying to accomplish:
- When a user clicks save, they are taken to a "Thank You" page.
- When a user clicks cancel, they are taken back to the home page.
Things I have done:
- On the link to the new form, I have added "?source=(URL for Thank You Page" - This accomplished the Save button task, but not the Cancel button task.
What I need help with:
I need to know how to override the default cancel button. Right now it also redirects to the Thank you page. I need it to go to the Home Page.
The only thing I can do to edit the form is add code snippets.
Thanks in advance!

SharePoint out of the box behavior is to send the user to the url in the Source querystring parameter WHEN THEY CLICK EITHER THE SAVE BUTTON OR THE CANCEL BUTTON on the new form.
Since the OP is experiencing different behavior, it is possible (maybe even likely) that someone has added code to the master page of her site to override the oob behavior.
Anyone coming here looking for how to redirect the Cancel button, PLEASE PLEASE PLEASE check the behavior in your own site before spending hours hunting for some esoteric solution like one of my user's did. I showed him how to use the source parameter, and we solved his issue in <1 minute.

To accomplish this I did the following:
To redirect after Save button is pushed:
Create a Thank You page and copy the URL. Save for Later.
Add "?source=" then the url from step 1 to the end of the link that takes you to your new item page.
EX: https://NewItemForm.aspx?Source=https://ThankYou.aspx
That will redirect to the Thank you page, if you hit save or cancel.
To Fix the Cancel button, do the following as well:
Go to your list > Form Web Parts (in the ribbon) > Default New Form
Insert Script Editor Web Part
Add the following code:
<script>
function goToByePage(){
window.location.assign("https://SitePages/Home.aspx");
}
function overrideCancel()
{
//Custom input button
var input = document.createElement('input');
input.type = "button";
input.name = "Cancel";
input.value = "Cancel";
input.id = "custominput";
document.querySelectorAll('.ms-toolbar input[value=Cancel]')[1].parentNode.appendChild(input);
document.getElementById("custominput").setAttribute("class", "ms-ButtonHeightWidth");
//Hiding already implemented cancel buttons
document.querySelectorAll('.ms-toolbar input[value=Cancel]')[0].style.display = "none";
document.querySelectorAll('.ms-toolbar input[value=Cancel]')[1].style.display = "none";
//this is main logic to move history back
document.getElementById("custominput").setAttribute("onclick", "goToByePage();");
}
_spBodyOnLoadFunctionNames.push('overrideCancel');
</script>
<style>
#Ribbon\.ListForm\.Edit\.Commit\.Cancel-Large
{
display:none;
}
</style>
This will remove the upper cancel button that was in the ribbon, and make the cancel button on the form take you back to whatever page is listed in the goToByePage function.
The code for this comes from 2 different sources:
https://sharepoint.stackexchange.com/questions/190776/basic-custom-list-how-to-redirect-to-different-page-on-cancel-and-on-save-butto
https://social.msdn.microsoft.com/Forums/office/en-US/5036ab40-2d9b-4fe5-87a2-5805268eea07/how-to-override-behavior-of-the-cancel-button-in-the-ribbon-and-the-form?forum=sharepointdevelopment
Hope this helps someone else in the future!

Execute multiple framework7 router functions back to back

I am building an app where a user can submit a form using ajax and the form will submit and upon success will go back to the previous page and then load two more pages. Here is a little bit more info before I get to my code snippet
I have a list of items and want to add another item. I have a button that will open up an add item form. When I submit the form with AJAX and upon success I want to :
Go back to the list of items in history mainView.router.back() to refresh with newest item and then
Go to the item page mainView.router.loadPage() and then
Go to a task for that item automatically which is another page mainView.router.loadPage()
I want all these three actions done at once one after the other. Going back will prevent the user from using the back button and getting back at the form that has already been submitted, going to the item page will be there in case the user does not want to perform the default action of starting a task for the item. I have successfully tested and can perform any ONE of these actions, but cannot figure out how to call the router functions one after the other simultaneously.
...
var item_id = data.newItem.id;
mainView.router.back({
url: page.view.history[page.view.history.length - 2],
force: true,
ignoreCache: true
});
mainView.router.loadPage('http://app.myapp. com/item.php?id='+item_id);
mainView.router.loadPage('http://app.myapp.com/start-item-task.php?id='+item_id);
...

Browser 'back' button that steps back to second stage of Javascript?

I have a problem brought about by a specific client requirement in nopCommerce.
I have a page - lets say page1 - which shows a block image which you then have to click through to get to the main part of the page (no matter how much I try to dissuade them from the extra click they are adamant - basically it's a 'glamour shot' before going to the main product grid/category page).
I have this JavaScript for the page load:
switch(window.location.pathname) {
case "/store/page1":
$(".category-page").hide();
break;
etc. (there are other functions for other things)
Followed by:
$(".landing_click").click(function () {
$(".landing_page").hide();
$(".category-page").show();
});
This all works great and displays the product grid (category page) as it should after clicking through the main image. However after viewing an individual product from the grid (going through to product details) clicking the back button on the browser takes you back to the first stage of the page1, so you have to click through the splash image/glamour shot again to get to the product grid.
To me this is logical and it is working as it should, but I need to find a way so that when the user is clicking the back button out of a product, it goes back to the product grid. Like this:
Is this possible with JavaScript? It needs to use the browser back button rather than a specific other button, although I could add one of those in addition as well.
If it were a straightforward website it would be relatively easy, but I am confined by the limitations of nopCommerce and the way the Category pages function, hence why I am looking for a JavaScript answer if possible so I can simply adapt what I already have.
Thanks

I would use location.hash to do it like this:
switch(window.location.pathname) {
case "/store/page1":
if(window.location.hash == "#landing") {
$(".landing_page").show();
$(".category-page").hide();
}
else {
$(".landing_page").hide();
$(".category-page").show();
}
break;
//The rest here
}
Followed by:
$(".landing_click").click(function () {
window.location.hash = "#category";
$(".landing_page").hide();
$(".category-page").show();
});
Now when you are in the product details page, a click on the back button will move you to /store/page1#category loading the category page directly.

ASP.NET button server side logic not being executed after javascript

I am having a great deal of trouble with client side validation using JavaScript and jQuery.
I have 2 user controls (.ascx) on a page (.aspx) each with its own button defined as follows
Page
user control 1
textbox 1
textbox 2
Button 1
user control 2
textbox 3
textbox 4
Button 2
Both button 1 and button 2 have the same CSS class.
I also have a JavaScript script that is referenced by the page.
Using jQuery I can accurately select the buttons and bind click events to them as follows:
$('.buttonCssClass').click(function() {
// If the user control fields are not valid then do nothing
if (typeof (Page_IsValid) == 'undefined' || Page_IsValid) {
return false;
}
// If the user control fields are valid then
// disable the button and replace the CSS class and add an image (progress spindle)
// until the processing is over - this is to prevent the user from clicking multiple
// times for long running and async processes.
});
When I click on button 1 I only want to check the fields in that user control for validity - not the all the fields in the page. Right now, all fields in all controls on the page are checked for validity - this means that my JavaScript function always returns false.
Could someone help me out with this?

Specify ValidationGroups so that not the whole page is validated. That works also on clientside:
if(typeof(Page_ClientValidate) == 'function')
return Page_ClientValidate("MyValidationGroup");
ASP.NET Validation in Depth(clientside)

maybe you can check in the click function which control raise the event.