I see currently in Global Payment document, if we want to launch the light box, we need to pass the id of the button, then global payment will handle itself the 'onClick' function to open the lightBox :
$(document).ready(function() {
$.getJSON("sdkRequestEndpoint", function(jsonFromRequestEndpoint) {
RealexHpp.setHppUrl("https://pay.sandbox.realexpayments.com/pay");
RealexHpp.lightbox.init("payButtonId", "responseEndpoint", jsonFromRequestEndpoint);
});
});
I wonder can I handle the onClick function by myself, because I am trying to call another api to check a condition, if that api return true, it will automatically open the lightBox .
Thanks
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.
I have a dojo attach point for list item which is inside a templated widget.I need to access the dojo attach point outside the widget in order to assign onclick to the list item created by the template.How do I do it?
Well, if you want to attach an event handler to it, you have to provide a function. You can override functions/properties from outside using getters and setters.
I also suggest using data-dojo-attach-event if you only need the node for attaching event handlers. For example by using: data-dojo-attach-event="onclick: myFunction". By doing this, it needs a function called myFunction in your templated widget, provide a default function (in your widget) for example:
myFunction: function() {
/** Stub */
},
And then you can do something like this from outside:
myWidget.set("myFunction", function(evt) {
console.log("Someone clicked on the list item");
});
Because the myFunction event handler is overriden, it will execute the function provided in the setter.
You could also directly access the attach points from outside using:
myWidget.listItemNode
When you have a data-dojo-attach-point="listItemNode". However, I don't think it's recommended to use it this way because now your widget is tightly coupled (you use the internal functionality of the widget).
HTML template:-
<div data-dojo-attach-point="infoDialog" >
</div>
Save this as "Template.html"
---------------------------------------------
load this html file using "dojo\text" plugin in your widget i.e.
"dojo/text!./templates/Template.html",
and store as template in widget main function
-----------------------------------------------
assign it as template string to the widget.
templateString: template,
now this template attachpoint(infoDialog) will be the part of your current widget scope.
-----------------------------------------------
attach event:-
this.infoDialog.onclick=function(){
alert("hello world")
};
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
I would like to use a dijit.form.Form for my application login, allow dojo to perform the form validation and use xhrPost to submit the form. I believe this can readily be done by over-riding the onSubmit event and using this.validate() to validate the login form.
For successful login, how can I tell when the onSubmit event is done so I can safely remove the login form from the DOM?
From the documentation it appears that dojo (validate?) may continue to reference the login form in the DOM after returning (false in my case) from onSubmit. Is there a way to "listen" for the onSubmit event to complete so I can safely remove the login form from the DOM?
EDIT
#BuffaloBuffalo - I tried your example and called dojo.xhrPost within the onSubmit this.validate().
The onSucessFunction received control and completed processing prior to returning to the statement after dojo.xhrPost which is the return false from the onSubmit event. To recap, this.validate() was true, the login form was validated by dojo and the onSuccessFunction received control as shown in your example. However, rather than hide the login DOM, I actually remove it completely with dojo 1.7.3 AMD syntax below:
var loginDOMnode = dom.byId("Login");
array.forEach(registry.findWidgets(loginDOMnode), 'item.destroyRecursive(true)');
domConstruct.empty(loginDOMnode);
I am using IE 9 and I get the following error:
SCRIPT5007: Unable to get value of the property 'value': object is
null or undefined ValidationTextBox.js, line 14 character 1
Since I return false from onSubmit this.validate() after I remove the login form from the DOM, it appears that I am removing it from the DOM before dojo is done with the ValidationTextBox. Is there a way to have the onSucessFunction run after I return false from onSubmit this.validate()?
If you are using ajax (e.g. xhrPost) to submit the login process, you need to listen to the return of that asynchronous event. In your custom Form:
onSubmit:function(e){
//stop event
dojo.stopEvent(e);
//validate your form
var onSucessFunction = function(){
//hide login dom
};
var onErrorFunction = function(){
//show an error
};
dojo.xhrPost({
//parameters
}).then(onSucessFunction,onErrorFunction);
},