I'm trying to pass a variable in my Pug code to an onSubmit event in a form element. Here's my code for that:
each post in posts
p(class="postContent") #{post.content}
form(method='post' id="likeForm" target="invis" onSubmit="addLike(`${post._id}`)")
As you can see, in the addLike function, I'm trying to pass in the post._id variable. The variable is very much defined, and the function works, but I seem to be passing the variable into the function incorrectly. I also tried addLike(#{post._id}) but that doesn't work either. What am I doing wrong?
It looks like you are trying to pass the post._id variable as a string argument to the addLike function using template literals (${post._id}) in a JavaScript event handler for the onSubmit attribute of the form.
The correct way to pass the variable in this case is to remove the ` and ${} and just use post._id like this:
onSubmit="addLike(post._id)"
You also don't need to use #{post._id}
Related
I'm trying to use th:onclick to call a submit() on form whose ID is given as Thymeleaf variable. I write:
th:fragment="fragGname(formname)"
......
th:onclick="'document.getElementById(\'' + ${formname} + '\').submit();'">
But I receive the error
org.thymeleaf.exceptions.TemplateProcessingException: Only variable expressions returning numbers or booleans are allowed in this context, any other datatypes are not trusted in the context of this expression, including Strings or any other object that could be rendered as a text literal. A typical case is HTML attributes for event handlers (e.g. "onload"), in which textual data from variables should better be output to "data-*" attributes and then read from the event handler.
Where is the mistake? Thanks!
I got it:
th:onclick="document.getElementById([[${formname}]]).submit();"
I currently have an object which I want to pass as a parameter to another function inside a template literal:
var template = `<button onclick="onclick(${object})"></button>`;
However, this makes the parameter become a string value: [object Object] and doesn't pass the parameter. Is there any way to pass this parameter into the function?
Thank you very much in advance.
You are going to need to represent your object as a string. You can do this using JSON.stringify:
var template = `<button onclick="handleClick(${JSON.stringify(obj).split('"').join(""")})"></button>`;
You will need to escape double quotes (which this code does), and single quotes if used for your onclick event (this code doesn't).
onclick="onclick" actually calls window.onclick - meaning that it picks up clicks anywhere. You should use a different name (such as handleClick).
I would suggest refraining from using inline event listeners for reasons like this, and because they can cause issues if you ever need to adopt a content-security-policy.
I want to define a JavaScript function for every instance of a JSF composite component.
For this, inside the component, I'm trying something like:
<h:outputScript>
function myFunction_#{component.clientId}(day) {
//do my instance specific stuff
}
</h:outputScript>
Specifically I am trying to use this function in a RichFaces calendar like this:
<rich:calendar id="calendar" ... dayClassFunction="myFunction_#{component.clientId}">
But the clientId doesn't necessarily only contain characters which are valid in JavaScript variable names.
Is there a way to calculate an md5 hash or something similarly pseudo-unique from the clientId (or something else!) inside a JSF EL expression?
I need it instance-specific because the return value relies on the instance values and the dayClassFunction attribute doesn't accept a function that takes the clientId itself or something likewise specific as an argument.
I've done it before like this:
window['#{cc.clientId}'] = {
myFunction1 : function() { ... },
myFunction2 : function() { ... }
};
then simply call it where you need it with
dayClassFunction="window['#{cc.clientId}'].myFunction1()"
This way everything is scoped to your component. Eventually you can add some prefix to the client id to never get into conflict with other variable names on the window scope.
Can't think of any character, which is allowed in a client id, that would break the javascript.
Assuming it's the separator (:) that's the issue you could use fn:replace:
function myFunction_#{fn:replace(component.clientId, ':', '_')}
When calling your function, JSF will assign this to be the instance-specific JS object which JSF uses to implement the client side. You may be able to get the information you need from that.
I have a weird error with name of my variable :
when i try to call function map.removeLayer($scope.pimp.init.carte.layers[key].name);, it's doesnt works (no error, but action is not performed)
when i put manually map.removeLayer(markersLayer_2); it's good, markersLayer_2 is the value of $scope.pimp.init.carte.layers[key].name, and the action is performed
i don't why this difference, because with alert(); or console.log(); , $scope.pimp.init.carte.layers[key].name returns the good value (markersLayer_2).
Why i can't use $scope of angularjs in this leaflet function ?
Method removeLayer expects an instance of L.Layer, not the name property of that instance. Try: map.removeLayer($scope.pimp.init.carte.layers[key]); What you are doing now is using a string as the parameter. That won't work. You need to use the actual instance.
Reference: http://leafletjs.com/reference.html#map-removelayer
JSFiddle source
I use hello.bind('Hi!!!')
but inside method hello i get view-model Object instead of string value. Any ideas why?
Change your markup to:
<button data-bind="click: hello.bind($data, 'Hi!!!')">Say hello</button>
From the documentation:
Alternatively, if you prefer to avoid the function literal in your view, you can use the bind function, which attaches specific parameter values to a function reference. More on bind can be found at Mozilla.