We Keep Coding

How to implement message before redirect in angularjs using ngdialog?

How to create unsave change in angularjs using ngdialog.
Eg: currently we are in page1 some fields we are edited. directly we going to page2 or somewhere that time ngdialog need to popup and ask if your move data will be lost. do you want to continue? with options: save&move, cancel and discard&move.
if i choose cancel stay same page. if i choose discard&move discard the details what we enter. if i choose save&move save the details and move to corresponding page anyone help me this..

You could use the onbeforeunload-function from plain JS:
$scope.view = {};
$scope.view.dirty = true;
$scope.$watch('view.dirty', function (oldV, newV) {
if (newV) {
window.onbeforeunload = function(){
return "Did you save your stuff?";
};
} else {
window.onbeforeunload = null;
}
}

jqGrid Inline Editing: Prevent User from Clicking Outside of Row Being Edited (prevent cancelling the editing/adding of row)

Good Afternoon,
I've been stuck on the issue the last half of today:
I have a jqGrid with inline adding/editing enabled. Everything works great, but, I am trying to prevent the row being edited/added from being automatically cancelled once the user clicks another row. I've tried returning false in the 'beforeSelectRow', 'resetSelection' within 'beforeSelectRow', .setSelection of the row that is being edited within 'beforeSelectRow', setting all non "editable" rows as disabled; all to no avail. Additionally, it seems as though the 'gridID_licancel' button is not triggered once the user (me at the moment) clicks on another row; the editing/adding "session" is straight up cancelled via some other method.
I would like to be able to hook into this behavior at its source, as the cancellation of the add/edit session is occurring before the 'beforeSelectRow' event fires and is not taking place via a trigger of the 'gridID_licancel' click event.
Granted, a user shouldn't be out clicking like a maniac on all other rows, or what not, while a row is being edited or added, but, I foresee feedback on this functionality. There is not a lot of headroom within these rows and it could be a rather common occurrence for a user to just miss the "save" button, which is generated inline when the row becomes editable, and click another row and have to start over again. Merely making the rows taller is not a legit solution.
Another point to note, this behavior is only happening when clicking onto another row on the grid. I am working with a modal dialog, with a tabbed div inside it, and each tab has its own form. A row in this particular grid can be sitting there waiting for edits, and the user can go to another tab, submit data, come back, and the row is still waiting for edits; it is not auto cancelling itself. Also, on this grid I have hard set the grid's height, so if the user clicks in an empty area of the grid where there are no rows, the edit/add session is not cancelled. So, this is only happening once another row is clicked.
So, while a user is editing a row, how can I capture the selection of another row, before the add/edit session is cancelled??? Thanks for any help.

I was actually able to find the necessary (but missing in the documentation) code to even allow this sort of behavior :
jqGrid not saving inline row edits
The 'restoreAfterSelect' inlineNav property needs to be set to false to allow for any sort of manipulation within the 'onSelectRow', 'beforeSelectRow', 'ondblClickRow', or 'onRightClickRow'.
While I was able to summon a fully functioning confirmation dialog when the user would double click on another row while editing another (e.g. are you sure you want to end the current session, etc...), I could not achieve the same success when dealing with the context menu. I tried only binding the context menu on the right click, and not in load complete, but then the menu would only come up on every third, or so, click. Other, more failed attempts were tried, but I forgot what they were due to their massive futility.
What I was able to do though, was just completely unbind the context menu event/functionality while the user was editing. If the user tries to double click on another row, or bring up the context menu, a message shows, telling them to either finish their editing or cancel if they want to edit/add/delete other rows. I also set up the cancel button to refresh the grid whenever its clicked, as to rebind the context menu to each row.
Code snippets, if anyone finds it of use (the main issue was not knowing about, stumbling upon 'restoreAfterSelect'):
ondblClickRow: function (rowid, iRow, iCol, e) {
var row = $('#tableTask').jqGrid('getGridParam', 'selrow');
var isEditing = $("#" + row).attr("editable") === '1';
if (isEditing) {
showModal('Error', 'You are currently editing a record, please click the cancel button or complete your edits before continuing.', 'frmInsertTask');
$('#tableTask').jqGrid('setGridParam', 'savedRow', [{ 'id': row }]);
$('#tableTask').setSelection(row);
return false;
} else {
$('#tableTask_iledit').trigger('click');
return true;
}
},
beforeSelectRow: function (key, event) {
var lastSel = $(this).jqGrid('getGridParam', 'selrow');
var isEditing = $("#" + lastSel).attr("editable") === '1';
if (isEditing) {
$('#tableTask').jqGrid('setGridParam', 'savedRow', [{ 'id': lastSel }]);
$('#tableTask').setSelection(lastSel);
return false;
} else {
if (lastSel == null) { } else {
$('#tableTask').restoreRow(lastSel);
}
$('#tableTask').setSelection(key);
return true;
}
},
onRightClickRow: function (rowid, iRow, iCol, e) {
var editingRow = null;
var isEditing = false;
var ids = $('#tableTask').getDataIDs();
var row = $('#tableTask').jqGrid('getGridParam', 'selrow');
$(ids).each(function (index, element) {
isEditing = $("#" + element).attr("editable") === '1'
if (isEditing) {
editingRow = element;
return false;
}
});
if (isEditing) {
showModal('Error', 'You are currently editing a record, please click the cancel button or complete your edits before continuing.', 'frmInsertTask');
$('#tableTask').jqGrid('setGridParam', 'savedRow', [{ 'id': editingRow }]);
$('#tableTask').setSelection(editingRow);
return false;
} else {
if (editingRow == null) { } else {
$('#tableTask').restoreRow(editingRow);
}
$('#tableTask').setSelection(rowid);
return true;
}
And, within the click event of the #tablename_liadd AND #tablename_liedit buttons:
$('#tableTask_iladd, #tableTask_iledit').bind('click', function () {
//if the context menu is visible then hide it. (for sitch where user brings up context menu, but then goes and clicks on the add/edit button.
$('#jqContextMenu').hide();
//while in edit/add mode, user should not be able to bring up the context menu until they end their current session. this context menu is re-bound once the user clicks the cancel button(refreshes the grid) or they save the data they are inputting (will result in a refresh once the transaction is completed).
$("#tableTask tr.jqgrow").unbind('contextmenu');

AngularJS directive for detecting pending changes before leaving/closing page

I have a problem. I have a registry form and many other forms.
Now I want to check whether the form is dirty and then I bring a confirm box if they really want to leave/close this page.
First of all, when I go back with the browser's back button and not with my other button ([button..] just 4 example) the confirmation box shows up two times and after two times confirming I'm still on the same page, just the form is resetted. When I press my own everything works fine.
Secondly, when I close the browser, my confirmation box shows up and afterwards the browsers confirmation box also shows up, but I only want one of them.
$scope.$on('$locationChangeStart', function (event, next, current) {
if ($scope.requestForm.$dirty) {
if (!$window.confirm('Unsaved Changes, leave Page?')) {
//cancel leaving view2
//works when clicking links, but doesn't work when using the back button
event.preventDefault();
}
} else {
}
});
$scope.$watch("requestForm.$dirty", function (newval) {
window.myGlobalDirtyFlag = newval;
});
window.onbeforeunload = function (e) {
if (window.myGlobalDirtyFlag === true) {
if (!$window.confirm('Unsaved Changes, close Page?')) {
//cancel leaving view2
//works when clicking links, but doesn't work when using the back button
return false;
} else {
}
}
};
$scope.$on("$destroy", function () {
window.myGlobalDirtyFlag = false;
});
May someone also have an idea how I bring this into an AngularJS directive, so I don't have to copy this code for every site where I have a form on it. (Every page only has 1 form, but every form name is different!)
My controllers are in seperate javascript files, (function blablaController() {}) and I pass this per routeProvider in my config file (templateUrl: blabla.html, controller: blabalController)
Regards,
Anthrax

Here is a service and directive that answers your question. Probably the only change you might consider making to it is using $window instead of window inside the service. As the instructions state, you'll just add the attribute unsaved-changes-warning to your form.
https://github.com/facultymatt/angular-unsavedChanges

jQuery Exit Popup Redirect?

So I've been looking around for hours, testing multiple versions, testing some of my own theories and I just can't seem to get it working.
What I'm trying to do is use alert or confirm (or whatever works) so popup a dialog when a user tries to navigate away from a purchase form. I just want to ask them "Hey, instead of leaving, why not get a free consultation?" and redirect the user to the "Free Consultation" form.
This is what I have so far and I'm just not getting the right results.
$(window).bind('beforeunload', function(){
var pop = confirm('Are you sure you want to leave? Why not get a FREE consultation?');
if (pop) {
window.location.href('http://www.mydomain/free-consultation/');
} else {
// bye bye
}
});
$("form").submit(function() {
$(window).unbind("beforeunload");
});

This is showing confirm dialog to user, want to stay or leave page. Not exactly what you looking for but maybe it will be useful for start.
function setDirtyFlag() {
needToConfirm = true; //Call this function if some changes is made to the web page and requires an alert
// Of-course you could call this is Keypress event of a text box or so...
}
function releaseDirtyFlag() {
needToConfirm = false; //Call this function if dosent requires an alert.
//this could be called when save button is clicked
}
window.onbeforeunload = confirmExit;
function confirmExit() {
if (needToConfirm)
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
Script taken from http://forums.devarticles.com/showpost.php?p=156884&postcount=18

Instead of using the beforeunload and alert(), I decided to check whether or not the users mouse has left the document. See code below:
$(document).bind('mouseleave', function(event) {
// show an unobtrusive modal
});

Not sure whether it will help.
You need to stop the propagation before showing the Confirm / Alert.
Please refer http://jonathonhill.net/2011-03-04/catching-the-javascript-beforeunload-event-the-cross-browser-way/
Look at the last comment.

Try this:
window.onunload = redirurl;
function redirurl() {
alert('Check this Page');
window.location.href('http://www.google.com');
}

jQuery UI Autocomplete: Clear Previous Search Term

On the keydown event of the jQuery UI Autocomplete widget the default case statement has the following code:
default:
// keypress is triggered before the input value is changed
clearTimeout( self.searching );
self.searching = setTimeout(function() {
// only search if the value has changed
if ( self.term != self.element.val() ) {
self.selectedItem = null;
self.search( null, event );
}
}, self.options.delay );
break;
From what I can see the sixth line of the above code prevents execution if the user types in the same value twice. This makes sense most of the time but in my scenario it is causing a problem.
I am building an ajax application that has a fixed header with a search input at the top. The user can type in anything they want into the search box and a div will pop up with the search results matching their query. If the user types in 'abc' and clicks on a result, it loads the corresponding page via ajax and clears the search box. The problem is that if they user types in 'abc' again, the search method is not fired as what they typed in matches what they last searched for.
Is there a way to clear the self.term value stored within the widget when the user clicks on a search result? Or is there another way to resolve my problem without having to cook up my own version of the Autocomplete widget?
Thanks

Doing the following resets the previous search term:
$('#AutocompleteElementID').data().autocomplete.term = null;
If you do the following when an item is selected, it will clear the previous search term and make the widget perform a search if they type in the same value again.

Unfortunately,
$(this).data().autocomplete.term = null;
does not clear the input field. To do so, the following works:
close: function(event, ui) {
// Close event fires when selection options closes
$('input')[0].value = ""; // Clear the input field
}

if the autocomplete function returns self, for your autocomplete element you should just be able to call
$yourAutoCompleteElement.term = null;
when you want to clear it.

close: function(event, ui)
{
// Close event fires when selection options closes
$(this).data().autocomplete.term = null; // Clear the cached search term, make every search new
},

This DID NOT work for me:
$(this).data().autocomplete.term = null;
However this DID work for me in jQuery UI - v1.10.2:
$(this).data().term = null;

You should try :
$("#AutocompleteElementID").autocomplete("instance").term = null;
Let me know if it works for you

The APIs have changed in the latest versions of jQuery/jQuery UI.
The correct way of accessing the property on the widget instance now is:
$("#AutocompleteElementID").autocomplete("instance").term = null;
Code example: http://jsfiddle.net/altano/sdpL17z5/
Verified working with jQuery UI 1.11.4 and jQuery 2.2.3

After Clearing the text field you can reset the previous search by invoking the jquery ui autocomplete "search" method with an empty string.
$('#AutocompleteElementID').autocomplete( "search", "" );
By default there is a minimum search length that has to be met before any items show up, so it effectively clears the search without displaying all the results.
http://api.jqueryui.com/autocomplete/#method-search
This should be a stable way to handle this situation as the search method hasn't changed over time.