I'm trying to add a button that will link to a different page made to edit/delete an entry. However, the URL in the action /videos/{the id of the video}/edit
Usually I would just put it in curly braces or use a template literal, but these don't seem to be working. When I try using double curly braces /videos/{{the id of the video}}/edit I get an error saying Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.
I'm trying to pass props for the id of the video to then apply to the URL, but I'm not sure how to go about that.
I've tried template literals, but it gives me a syntax error when I try using those in action="..." so I tried doing what it tells me to do and use binding :id="this.$props.id" but I'm not sure how to then add the id to the URL without still using interpolation.
<form method="get" :id="this.$props.id" action="/videolist/$id/edit">
<button type="submit">Edit</button>
</form>
props: ['id', 'name', 'description', 'category']
Thanks, I ended up solving it using a template literal. It just didn't work how I thought it did. This ended up working
<form method="get" :action="`/videolist/${this.$props.id}/edit`">
<button class="btn btn-success" type="submit">Edit</button>
</form>
Related
Am having a AEM6 html component, am getting the values from dialog and using it inside the component via the .js file and using the return properties.
I could able to get the authored values but it is getting null or empty when am using it inside the onclick method. Please find below the code snippet below.
<div data-sly-unwrap data-sly-use.test="test.js"></div>
<a href="#" class="${test.testId}" id="${test.testId}" onClick="toggleDraw('${test.testId}')" >
The content I authored is getting displayed in class and Id, but it is not displaying in the onClick method.
Below is the Output am getting after authoring.
<a href="#" class="get-a-quote" id="get-a-quote" onClick="toggleDraw('')" >
Output I needed is :
<a href="#" class="get-a-quote" id="get-a-quote" onClick="toggleDraw('get-a-quote')" >
This should do the trick:
<a data-sly-test.variable123="toggleDraw('${test.testId}')" href="#" class="${test.testId}" id="${test.testId}" onclick="${variable123 # context='attribute'}" >
You need to put the function call in a variable because of the nested single quotes. And you need to manually set the context in this case. If "attribute" does some escaping you do not like, you could use "unsafe" - this will end in all escaping mechanisms being disabled. That might or might not be a security issue for your application.
HTH
The bootstrap validator plugin helps validating the form fields providing a bunch of cool features. One of those features are the feedback icons, which defaults to glyphicon.
Suppose I want to replace glyphicon with font awesome.
The documentation says they can be changed by passing a "feedback" JSON object as data attribute or via JavaScript.
Via JavaScript it's easy. But as data attribute, it is unclear where and how exactly add it, because simply adding:
feedback: {
success: 'fa-check',
error: 'fa-times'
}
as data attribute to the <form> or the <div class="form-group"> or the <input> itself it doesn't work.
After some time struggling with it, I realized that the JSON feedback object should be added to the element and also it needs to be added using this syntax (which was not specified in the docs):
<form ... data-feedback='{"success": "fa-check", "error": "fa-times"}'>
Note the quotes syntax.
Also, if we are not just changing the glyphicon but replacing it with a font-awesome one (like in my example), in the <div class="form-group"> we need to replace:
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
with:
<span class="fa form-control-feedback" aria-hidden="true"></span>
This is not very well documented, and I could not make it work. I ended up using a different form validator which accomplish the same functionality and it's easier to configure success/error formats using bootstrap classes:
var validator = $('#submitForm').validate({
validClass: "is-valid",
errorClass: "is-invalid",
jQuery Validator
I encounter a problem when testing form validation with angularjs
According to angularjs form guide,
an input control that has the ngModel directive holds an instance of NgModelController. Such a control instance can be published as a property of the form instance using the name attribute on the input control.
I created test code at plunker, it all works fine untill I change the input name from
<input type="number" name="age" ng-model="user.age" max="100" required>
<p>{{form1.age.$error}}</p>
to
<input type="number" name="user[age]" ng-model="user.age" max="100" required>
<p>{{form1.user[age].$error}}</p>
Does this mean angular can not recognize array syntax in form input?
The problem for me is I want to keep the normal form submission flow and only use angular for form validation, so I need to keep form input as array to work with the backend form handling
It has nothing to do with Angular. It is a syntactic JS error.
If you want to reference a property named user[age], you should do it like this:
form1['user[age]'].$error
form1.user[age] is incorrectly interpreted as (form1.user)[age]
I am trying to get the filename of an uploaded picture to appear in the input field next to the picker button (for filepicker.io) . Basically I am trying to find what to put in the value field for the input tag to get the filename to appear once the picture is uploaded. Here is the code I have:
<div class="row margin" id='img-row'>
<input id="filename" disabled="disabled" value="<WHAT DO I PUT HERE?>" class="input" type="text" style="width: 360px;"/>
<input name="img" data-fp-class="form-simple-action-btn filepicker_launcher" data-fp-button-text="Choose Image" data-fp-services="COMPUTER,FACEBOOK,FLICKR,INSTAGRAM,PICASA" data-fp-container="modal" data-fp-mimetypes="image/*" type="filepicker" data-fp-apikey="#################" id='campaign-img-input' value="<php echo h($_POST['img'])"/>
</div>
Thank you for your help! I haven't found any other examples like this in the documentation.
The recommended way to do this would be to bind a function to the onchange event of the filepicker input type. Once the upload occurs, the function will be called, and you can pull the filename out of the e.fpfile attribute.
Alternatively, it may be easier to use the filepicker.pick call directly given that you are interested in customizing the behavior. The widget is great for a drop-in solution in many cases, but if you're looking to customize further I'd recommend using the javascript api directly.
<input type="submit" value= "OK" />
What I normally do is curl --data "button_name=OK" URL, but the button here has no name. How can I submit via cURL in this case?
CSS Selectors:
Without seeing more HTML you could try a CSS selector of input[value='OK'],
This says, element with input tag having attribute value with value of 'OK'.
CSS query:
VBA:
The CSS selector is applied via the .querySelector method of document.
.document.querySelector("input[value='OK']").Click
In the case that a button doesn't specify a name you will not need to send the button's value in the request, value just exists to provide the button's label in this instance.
I am not very familiar with curl, but give curl --data "" URL a try.
For something like this, without name
<div class="desc"></div>
<div align="center" class="buttons"><input type="submit"
value="Login" /></div>
In VBA, you can use say
dim i as integer
for i = 0 to 19
if webbrowser1.document.getElementsByTagName("input").item(i).getAttribute("type") = "submit" then
if webbrowser1.document.getElementsByTagName("input").item(i).getAttribute("value") = "Login" then
webbrowser1.document.getElementsByTagName("input").item(i).click
Exit For
end if
end if
next
Just Use 19 as an upper bound of the number of input element in the web page and increment it if needed. Once you found which one is it, you can use it straight away