*I am using this code in my controller, inserting this controller dependency is breaking the whole code. *
$state.get('shop').onExit = function(){
modalCtrl.openModal(modalViewUrl,null);
//calling a controller which has the functions to open $modal
//handle modal submitHandler
}
1.this event will be invoked when user navigates away from the page:
$scope.$on('$locationChangeStart',function(event){
//action to be performed
event.preventDefault();
$('#modalName').modal();
});
Related
There are several occasions that users try to click a button multiple times in a row for whatever reason.
I want to disable or hide a button for a few seconds after it is clicked, so that it will not be clicked again temporarily.
By buttons here I mean every button in Odoo that is possible to implement this feature.
Is there a solution to achieve such mechanism?
If there is no system-wide implementation for this, a button-specific method will suffice.
$(document).ready(function () {
$("#yourbutton").on('click', function (event) {
event.preventDefault();
//your js code
//to disable the button:
$(this).prop('disabled', true);
});
});
My Vue component uses Google Forms inside an iframe. The problem is, that when user tries to navigate to another page, she will get 'Leave site? Changes that you made may not be saved.' dialog. How can I disable this in my component?
EDIT: I noticed that this caused by the fact, that one field is prefilled on the google forms. Is there a way to bypass the dialog, if there a prefilled fields?
I am spitballing here but I believe that the internal page inside the iframe sets an event handler for the window.beforeunload event, if your page does not use this event, you could
window.onbeforeunload = function () {
return undefined;
};
I found one solution. Add v-if the the iframe:
<iframe v-if=!hideGoogleForm" ...>
Then to mounted():
window.onbeforeunload = () => {
this.hideGoogleForm = true;
};
The dialog is still shortly shown but then automatically closed when the component is destroyed.
This issue is easily seen in the durandal sample application:
1) Navigate to "Modal Dialogs" demo
2) Click the button to show the modal
3) Click the browser back button
When doing this, the page navigates to the previous screen while keeping the dialog open, which is almost never what you want.
Is there a best practice here for either closing dialogs or preventing navigation if one is open?
You can tie into the canDeactivate callback. Check if the modal is open and either prevent it or if they want to leave, close it
While I don't expect this answer to be immediately applicable to many out there, I wanted to throw it out there in case it helps someone.
We use typescript to create our viewmodels, and we have a base viewmodel to encapsulate common functionality (as well as expose the dataservice, pub/sub, etc). In this viewmodel this approach seems to work well:
public ShowDialog(viewModel: any) {
// create a subscription to the router so that we can forcibly close the dialog in the event of a routing call
var subscription = router.on('router:route:activating');
subscription.then(() => {
// we will hit this block if the router is activating while this dialog is open
var moduleId = viewModel.__moduleId__ || '[No Id]';
system.log('Navigation detected while dialog is open - the dialog will now be forcibly closed. (' + moduleId + ')', viewModel);
dialog.close(viewModel);
});
var promise = App.showDialog(viewModel);
promise.then(() => {
subscription.off(); // kill the router subscription since the dialog is closed at this point
});
return promise;
}
Consumers can use this function as a direct substitution to durandals' dialog to opt-in to the auto-close functionality.
I am developing an HTML/JS app for Windows 8.1 and am having trouble debugging a crash that is ocurring on within a handler attached to the top NavBar object when the user navigates from the page the handler is attached to.
The functionality is pretty simple: when the user lands on the screen in question, I am automatically displaying a WinJS Flyout using it's .show() method. Now, when the user invokes the top NavBar object, I have a handler that hides the Flyout object. I also have another handler that .shows() the Flyout when the NavBar is dismissed.
The problem occurs when the user navigates to another page. Here is my code for the screen in question:
var appBar = class.that.constructs.NavBar;
ready : function (element, options) {
var self = this;
...
appBar.topControl.onbeforeshow = self.hideFlyout;
appBar.topControl.onbeforehide = self.showFlyout;
$('#flyout').addClass('activated');
$('#flyout')[0].winControl._sticky = true;
$('#flyout')[0].winControl.show();
},
hideFlyout: function() {
$('#flyout').topControl.winControl.hide();
},
showFlyout: function() {
$('#flyout').topControl.winControl.show();
},
unload: function () {
appBar.topControl.onbeforeshow = null;
appBar.topControl.onaftershow = null;
}
As you can see, I am removing the event handlers upon unloading the page, but that doesn't seem to do the trick. I still get this crash error:
JavaScript runtime error: Unable to get property 'classList' of undefined or null reference
It crashes on the showFlyout handler. Does anybody have any suggestions as to how to avoid the crash upon navigating to a new page?
The show methos of the flyout wants an element as a mandatory parameter, it is the element it will be attacched to.
in your case you have to find an element and pass it to your function, for example:
var myButton= document.getElementById("myButton");
$('#flyout').topControl.winControl.show(myButton);
Check this page for a more extensive example: http://msdn.microsoft.com/en-us/library/windows/apps/br211726.aspx
I have a regular anchor tag with href attribute set to "#". Normally, this prevents from any navigation but in durandal it navigates me to the home view. How can I stop it from navigating to that view?
I can't change the html and stylings. It needs to be that anchor tag. But I can bind a click event to it. Is there any way to cancel navigation in anchor click event?
regards
Bind a click event to it and call event.preventDefault()
Example
$(function() {
$('#someAnchor').click(function(event) { event.preventDefault(); });
});
This will prevent the browser from propagating the click event and nothing will happen. But inside the click event you can do whatever logic you want.
If you are using knockout to bind the click event then please refer to this stackoverflow post on how to do it from a knockout binding.
EDIT ** Per Tyrsius' comments its a better practice to use the knockout binding to bind a click event.
So, instead it is recommended you do:
ClickMe
clickhandler = function (e) {
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
};
Have all your anchor links start with a prefix. Then have in your router.guardRoute function this:
if (_.startsWith(instruction.fragment, YOUR_PREFIX))
return false;
}
Worked well for me and no need to add anything else to your app views.
PS. _.startsWith is lodash function. If not using lodash do JS string indexOf or whatever