I have a large List, which needs to be put into a drop-down menu.
<select class="form-control" required name="family" id="family" th:field="${succulent.family}">
<option value="" selected="selected">---</option>
<option th:each="family : ${families}" th:value="${family.id}" th:text="${family.name}"></option>
</select>
families has ~ 8000 entries.
My controller fetches the data fast enough, but loading of the template takes around 30 sec. if i comment the th:each out, the template is loaded instantly.
Any clues how to fix it? The only solution i can think of, is a autocomplete-field. But that wouldnt allow the user to see the dropdown.
Related
How can I emit and recognise changes from child components (in separated files) using AlpineJS?
I'm trying to build a form in Livewire/alpinejs that would only show the next step after selected a value in the previous step.
I know I can use livewire model/emitUp to catch changes from the selectfield child component and then use x-show accordingly. However, emitting up is rather slow, waiting around 5 seconds after selecting each select field isn't a good user experience. Hence the user of AlpineJs.
The issue is that x-data is scoped locally and I cannot pass down a variable and assign that as the x-model. AlpineJS has $dispatch, but it seems to only work within a file. So I can't dispatch when the x-model changed and then catch that change in Livewire Main Form.
Livewire Main Form
<div>
<form>
<livewire:selectfield />
{{-- Only show this div when livewire:selectfield has selected a value (Incomplete code)--}}
<p>
Should see this only when a select-field value has been selected
</p>
</form>
<div>
Livewire Select Field
<div x-data="{ selectedField: '' }">
<label> Form Label </label>
<select x-model="selectedField">
<option value="1">Opt 1</option>
<option value="2">Opt 2</option>
<option value="3">Opt 3</option>
</select>
</div>
Is there any way of showing/hiding div elements when the child component input fields have a selected input? Preferably with AlpineJS due for user experience and less network bombardments.
EDIT
Turns out I just didn't use the functions properly! Ignore this
Must of read the docs wrong. Using Livewire/AlpineJS can emit values from child to parent, similar to VueJS.
The child component HTML should have
<button type="button" #click="$dispatch('custom-event')">Test Model Update Upwards</button>
The parent component has this html. In your case, just add the custom event where it makes sense.
<p #custom-event.window="console.log('Workign emit function cross child/parent')"></p>
How to implement multi checkbox drop down without any third party libraries.
We want a dropdown having checkboxes not in jquery and javascript. we want pure server side control
.
Pure server side control means you will only rely on the HTML standards.
The HTML Select element has a multiple attribute which lets the user choose multiple values.
The HTML specification doesn't require a specific rendering layout which lets the browser free from any constraints. Most of the time, selected options are simply hightlighted, plus the multiple attribute makes the select element to loose its dropdown looking style (you can reduce its height using the size attribute).
<!-- The second value will be selected initially -->
<p>Maintain <kbd>Ctrl</kbd> key down to select multiple elements</p>
<select name="multi" multiple size="2">
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
<option value="value4">Value 4</option>
<option value="value5">Value 5</option>
<option value="value6">Value 6</option>
<option value="value7">Value 7</option>
<option value="value8">Value 8</option>
<option value="value9">Value 9</option>
<option value="value10">Value 10</option>
</select>
If you change your mind about using Javascript, you could implement what this well detailed answer suggests as it requires just very few additional Javascript and css and but no library.
I am working on dropdown with image in angularjs, i tried many solution but havent get any success.
My combo data is coming in json format with three elements id , image and value.
These dropdown numbers are also dynamic as per number of rows are there in model.
Please share the solution for that.
Thanks you.
Please Try this it will work out,
<select ng-model="choice">
<option ng-repeat="item in itemsList" data-image="{{item.url}}">{{item.label}}</option>
<select>
<select ng-model="image_chosen">
<option ng-repeat="data in list" data-image="{{data.url}}" value="{{data.id}}">{{data.value}}</option>
<option value="">Choose a option</option>
</select>
Checkout a example at angularjs select option with custom format value
Hope it helps.
Write like this in option tag
ng-repeat="obj in xxxxComboData" data-image="{{obj.image}}"
HI i need something unusual , i want like
if my product has more than one option value
than it should show in dropdown
otherwise if it has only one option value
than i need to show without dropdown or as a text only.
Please suggest me how can i do this.
like like if
<select name="select_box" id="select_box">
<option value="one">1</option>
<option value="tow">2</option>
<option value="three">3</option>
<option value="three">4</option>
<option value="three">5</option>
<option value="three">6</option>
</select>
the dropdown has more than one opton than i need to show the above dropdown and if the
<select name="select_box" id="select_box">
<option value="one">optionname only</option>
</select>
dropdown has one option than i need to show optionname only as a text.This will not be a require field.
3-4 files are included in this process.
You can see that by enabling "Template path hints" from admin->settings->advanced->developer.
anyway check these files
if its a dropdown the you can change in this file (Remember do changes in your theme not in base)
frontend/base/default/template/catalog/product/view/options/type/select.phtml
Another files in this process(check xml)
frontend/base/default/template/catalog/product/view/options/wrapper.phtml
frontend/base/default/template/catalog/product/view/options/js.phtml
frontend/base/default/template/catalog/product/view/options.phtml
Another way:
Goto
App/code/core/Mage/Catalog/Block/Product/View/Options/Type/Select.php
here find getValuesHtml() and check the code and edit as per your need
(DO NOT EDIT CORE FILES ALWAYS OVERRIDE FOR EDITING PURPOSE)
i have a combo box what i want is whenever a new option from combo box is selected new form is loaded below the combo box with out refreshing the page can some one provide the script
Yes download the jQuery and you can simpley do with jQuery/Ajax.
<select onChange="$('#formDiv').load(this.options[this.selectedIndex].value)">
<option value="/pages/form1.html">form1</option>
<option value="/pages/form2.html">form2</option>
</select>
<div id="formDiv"></div>
This is basic structure I gave, You can enhance it to work it in more secure way.