Develop Reference

Back button Event Listener

I have a Single page application. In that at the first instance I am displaying the Input page and the Output Div is hidden at that point of time.Later on when the Input data are submitted I hide the Input data and Use ajax call to calculated the the output and display the output result in the Output div. So basically the same page is present both for input and output page. Now I have a back button, when users click on that the Input div is shown and Output div is hidden.
$("#renderOutput").on("click", "#chngeIcon", function () {
$('#renderOutput').hide();
$('#InputPage').show();
});
Since it is a single page application if user click on the browser back button, than it is taken to previous visited site. I want to make back button to behave similar to my back button. Please help me.enter image description here

You can try popstate event handler, e.g:
window.addEventListener('popstate', function(event) {
// The popstate event is fired each time when the current history entry changes.
if ($("#InputPage").is(":visible") == false) {
// Call Back button programmatically
history.back();
// Uncomment below line to redirect to the previous page instead.
// window.location = document.referrer
} else {
// Stay on the current page.
history.pushState(null, null, window.location.pathname);
$('#renderOutput').show();
$('#InputPage').hide();
}
history.pushState(null, null, window.location.pathname);
}, false);
Hope that helps

Jquery ui dialog not closing with `Escape` keypress

When a user opens dialog, there are a bunch of ajax requests that have to be processed and therefore i have a second dialog that just displays loading information and closes once all the requests have been processed.
I am not able to close the user opened dialog with Escape key once it has opened. I have to click on the the dialog itself before I can use escape.
I have tried the following to assign the user opened dialog the focus after the loading dialog closes but to no avail, I still have to click on the dialog before it can close with the escape key.
$(document).ajaxStart(function () {
// IF loading dialog is not allready being shown show it.
if ($("#LoadingData").dialog('isOpen') === false) {
$("#LoadingData").dialog('open');
}
});
$(document).ajaxStop(function () {
//Close the loading dialog once the requests have finished
$("#LoadingData").dialog('close');
//Find the user opened dialog
$('.cmdialog').each(function () {
if ($(this).dialog('isOpen')) {
$(this).trigger('click');//set focus to dialog
// have also replaced .trigger('click') with .focus() but to no avail
}
}).on('click', function() {
//if click is triggerd set the focus of the dialog.
if ($(this).prop('id') != 'LoadingData') {
$(this).focus();
}
});
});
I have also tried setting the focus to the first element within the dialog with $('#DialogName:first-child').focus() and $('#DialogName:first-child').trigger('click') but this is also not working.
Any ideas as to why the focus is not set? Or am I misunderstanding/incorrectly using .focus() and .trigger('event')?
Thanks :)

Try the below code for close the dialog when Escap key is pressed:
$(document).keyup(function(e) {
if (e.keyCode == 27) { $("#LoadingData").dialog('close'); } // esc
});

I had the same issue, and found pretty elegant solution, in case you want to close dialog before actually clicking inside it:
$("#LoadingData").dialog({
...,
focus: function () {
$('#LoadingData').closest('.ui-dialog').focus();
}
});
So, we just need to set focus to parent .ui-dialog container, and in that case Esc will work for all cases. Disadvantage of $(document).keyup solution, if you have nested dialogs, Esc button will close your most top dialog and bottom one too.

the focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (, , etc.) and links. docs here
You can try moveToTop method of the dialog, maybe it will help
And in your code, I think, you should bind "click" event before triggering it.

The following code should work even for multiple modals open:
$(document).on('keydown','.modal-dialog',function(event){
if (event.keyCode == 27) {
$(this).closest('.modal-dialog').find('[data-dismiss="modal"]').click();
}
});

Preventing users from accidentally navigating away from unsaved pages

I got the snippet below from this SO post, and it works when a user tries to reload the page or close the browser etc. but if the user clicks on a link then it lets them naivagate away, and then incorrectly starts displaying the message on the wrong page. I am using pjax for the links.
$(document).ready(function () {
$('textarea').change(function () {
window.onbeforeunload = function () { return "Your changes to the survey have not been saved?" };
});
});

You should use onbeforeunload like this, inconditionally:
<script type="text/javascript">
saved=true; // initially, it is saved (no action has been done)
window.onbeforeunload = confirmExit;
function confirmExit() {
if (!saved) {
return "You did not save, do you want to do it now?";
}
}
</script>
It is not safe to handle this event only when another event is fired. The onchange event of your textarea here probably don't fire before you click on a link so the window won't handle the onbeforeunload at all. The link will work as expected: you will get redirected.
To deal with the saved flag, you could listen to what happens in your textarea, for example, when the user is actually typing something:
$('textarea').keyup(function(){
saved=false;
});
Then, if you save the data in ajax, the save button could set it back to true:
$('#btnSave').click(function(){
// ajax save
saved=true;
});
Otherwise, it will load the next page with the saved flag on.

what about something like the following?
Listening on all <a> links and then, depending on whether the variable needToSave is set to true, showing the message or letting it go.
var needToSave = false; // Set this to true on some change
// listen on all <a ...> clicks
$(document).click("a", function(event){
if (needToSave == true) {
alert("You need to save first");
event.preventDefault();
return;
}
});
UPDATE (as per Roasted's suggestion) this should trigger the unload event every time the link is clicked and perform your existing logic:
// listen on all <a ...> clicks
$(document).click("a", function(event){
$(window).trigger("unload");
});
jsFiddle here - http://jsfiddle.net/k2fYM/

ASP.NET MVC button multiple clicks

ok i have a form on which i have some validation through dataannotation which is client side as well as server side validation like some field already exists. i have no javascript validations on the page. now my problem is that what should i do if the user presses the save button multiple times (he keeps pressing the button for 15 times,in my case the page stays there with field already exist message at the top ) . what do u guys do for that?
what i have done (this works fine in firefox but not in ie) it disable the button no matter what just after click in ie
$(document).ready(function () {
$("#btn").submit(function () {
$('#btn').attr('disabled', 'disabled');
});
});

Put an overlay above the whole page. The overlay prevents the user from clicking twice and gives some feedback. The blockUI plugin does this very well.
EDIT:
$(document).ready(function () {
$("#btn").click(function () {
$('#btn').attr('disabled', 'true'); // Disable the button if you like
$.blockUI(); // Blocking the page with a standard message.
});
});

try using .live or you could hide the button after it is pressed.
$(document).ready(function () {
$("#btn").live("click", function () {
$('#btn').attr('disabled', 'disabled');
//or
$('#btn').hide();
});
});

How to prevent the user to change page with jQuery

I have a page with a form that is submittes via ajaxSubmit() (so, without changing the page).
My goal is that, when the user try to change page (or even to close the browser), i ask him if really want to exit the page without sending the form (exactly as gmail does).
Gmail for example do this with a window.confirm-like popup, but if it is possible, i'll like to handle it with custom messages and options.
jQuery have the unload event:
$(window).unload( function () { alert("Bye now!"); } );
but it permits me just to do something before exit the page; i need to 'block' the page exit, if the user click the relative button.
So, how to handle (and cancel) the page-exit event?

try the following. Demo here
<script type="text/javascript">
function unloadPage(){
return "dont leave me this way";
}
window.onbeforeunload = unloadPage;
</script>

It's possible bind the "onbeforeunload" event with jQuery:
$(window).bind('beforeunload', function(e) {
return "ATTENZIONE!!";
});
It works!!