I have a input wrapper, (input-wrapper.blade.php)
<div class="form-group">
#yield('input')
</div>
Called via:
#include('input.checkbox')
The checkbox file looks like:
#extends('input-wrapper')
#section('input')
<input type="checkbox" value="1">
#endsection
The issue I am having is when I call this with multiple inputs (I have one for different input types):
#include('input.checkbox')
#include('input.textarea')
....
I just get a rendering of the first item (checkbox) multiple times. i'm hoping to render each type of input.
Related
This works :
<input
id="chk-products"
name="chk-products"
type="checkbox"
x-on:click="showProducts = document.getElementById('chk-products').checked">
But this doesn't :
<input
id="chk-products"
name="chk-products"
type="checkbox"
x-on:click="showProducts = this.checked">
I was wondering why this isn't available in alpinejs's directives ?
With Alpine.js you don't have to inspect/mutate the DOM manually. It uses the data model: first you define some data, then you bind it to some input elements and let Alpine.js handle the DOM mutations, etc.
<script defer src="https://unpkg.com/alpinejs#3.x.x/dist/cdn.min.js"></script>
<div x-data="{showProducts: false}">
<input type="checkbox" x-model="showProducts" /> Show products
<div x-show="showProducts">Products are shown.</div>
<div x-show="!showProducts">Products are hidden.</div>
</div>
The this keyword is available inside a component created with Alpine.data() global function.
The x-on:click directive in Alpine.js is designed to execute a JavaScript expression when an element is clicked. In this case, the expression is trying to access the checked state of the checkbox element, which can be done more directly by using the this keyword to access the element that the directive is applied to. Unfortunately, Alpine.js does not support the use of the this keyword in its directives.
In this code, I am trying to set the navbar and I am defining nav in each file because for some files, the navbar will log in or signup but for some files, it will be log out or about. No file is giving me errors except this login.html and the error is
Error
panic: template: login.html:7: unexpected <define> in command
code
{{template "base" .}}
{{define "title"}} Log In {{end}}
{{define "body"}}
{{if .Loggedin}}
{{define "nav"}} // this is line 7 which is showing error.
<div>
About
Logout
</div>
{{end}}
{{else}}
<h1> Log In</h1>
<p>Login to access your account.</p>
<hr>
<form action="/loggedin" method="POST" name="login" id="login">
<div>
<label for="email">Email</label>
<input type="email" name="email", placeholder="Enter your email address" required>
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password", placeholder="Enter the password" required>
</div>
<div>
<input type="submit" value="Login">
</div>
</form>
{{end}}
{{end}}
Quoting from package doc of text/template, Nested template definitions:
Template definitions must appear at the top level of the template, much like global variables in a Go program.
You can't define a template inside another template definition (and that's what you're doing).
Also note that {{define}} just defines a template, it does not include / execute it.
To define and execute a template in place, use {{block}}.
In your case move the template definition to the top level, and execute it where it's needed using the {{template}} action.
If you need different template definitions based on certain conditions, that's not possible.
What's possible is define different templates (with different names), and include the one you need based on the conditions.
Another option is to pass some data (the conditions) to the template, and make it render different things based on the template parameters (the conditions) with e.g. using the {{if}} action.
See related for even more options: How to use a field of struct or variable value as template name?
I'm building a view with Thymeleaf templates, which contains a form that provides a way to bind the value of my inputs with the attributes passed in the model. The backend was developed using Spring 4.
The following snippet includes an autocomplete datalist with the data of the namelist object, which was added to the model as an attribute. Said namelist is an ArrayList of a class with the fields int id and String name.
<form th:action="#{/}" method="POST" th:object="${example}">
<div class="form-group">
<input list="names" class="form-control" id="nameinput" th:field="${example.num.id}"> </input>
<datalist id="names">
<option th:each="row : ${namelist}" th:value="${row.id}" th:label="${row.name}">
</datalist>
<button>submit</button>
</div>
</form>
The value of the selected option is already bound to example.num.id, which is the expected and desired behaviour. However, when loading the view on a web browser (tested on latest Firefox and Chrome), it is represented like this:
As you can see, the id's are showing. However, I'm trying to emulate the behaviour of a <select>; the value should not be shown, just the text or label.
Is there a better way to achieve this? Am I not using the datalist properly?
I have a list of similar looking DIVs without any Div ID, except one has a check box checked and others doesn't. What i need is to find the value from a child tag only if a radio button is selected.
Below is a simpler version of my code.
<div class = "XYZ">
<input type="radio" checked>
<input type="hidden" value="This is a great thing 1">
</div>
<div class = "XYZ">
<input type="radio">
<input type="hidden" value="This is a great thing 2">
</div>
Result needed is
This is a great thing 1
Unfortunately the source code cannot be changed.
Your xpath should look for a div that contains the checked input and to get the value for the one that has value attribute.
First selector returns the input, the second returns the value.
//div[.//input[#checked]]/input[#value]
//div[.//input[#checked]]/input/#value
As an alternative you can use the following sibling:
//input[#checked]/following-sibling::input
If you want to also use the class of the parent div:
//div[#class='XYZ']/input[#checked]/following-sibling::input
i have a dynamic form that is generated from a json
and my ngRepeat looks like this:
<div ng-repeat="(q, w) in user.education">
<div class="form-group">
<label for="{{q}}">{{q}}</label>
<input type="text" class="form-control" name="{{q}}" ng-model="user.education.{{q}}">
</div>
</div>
so the problem is that the {{q}} in the ng-model isnt showing the data... but in the label and input name it is working...any ideas why? because i will need to continue using these variables..i know that the brackets are not neccesary because of the ng. but whenb i loose the brackets...then the 'q' character is shown..
I believe you can just change this:
ng-model="user.education.{{q}}"
to this:
ng-model="user.education[q]"
So referencing your variable q property in the user.education object via bracket notation rather than dot notation.