My vue.js-bound input box loses its focus after any keypress. I found this similar question, but it doesn't really help me, as I don't use any keys. Here's my template code:
<DxColumn data-field="width"
caption="Spaltenbreite"
:allowEditing="false"
cell-template="width-settings" />
<!-- ... -->
<template #width-settings="cell">
<div>
<CSwitch :checked.sync="cell.data.data.width.set" size="sm" color="success" />
<div class="input-group input-group-sm" v-if="cell.data.data.width.set">
<input type="text" v-model="cell.data.data.width.width" class="form-control text-right" placeholder="auto" />
<select v-model="cell.data.data.width.unit" class="input-group-append custom-select custom-select-sm">
<option value="">Bitte wählen</option>
<option value="DEL">Nicht festlegen</option>
<optgroup label="Absolute Einheiten">
<option value="cm">Zentimeter</option>
<option value="mm">Millimeter</option>
<option value="in">Zoll</option>
<option value="px">Pixel</option>
</optgroup>
<optgroup label="Relative Einheiten">
<option value="em">-fache der Schriftgröße</option>
<option value="%">% des Bildschirms</option>
</optgroup>
</select>
</div>
</div>
</template>
This is part of a DevExtreme dxDataGrid cell definition. How can I prevent the field from losing it's focus every time?
It's a bit hard to tell what is going on with this code only, so I'm going to take a guess.
I see the input has v-model="cell.data.data.width.width" and a parent has v-if="cell.data.data.width.set" while that shouldn't cause issues, and it may be possible that there may be other similar conditionals, I believe the change in v-model is triggering a re-render. If that is the case, I think you may be able to resolve it by adding a key to the input. Something that doesn't change, ideally something like cell.data.data.width.id
TL;DR;
Give the input a key
For people like me finding this; Using Vue.js with Semantic UI:
If the form is changing based on the data you input, you need to assign the <sui-form-field> a static (and unique) key.
The input(s) within don't strictly need teir own key(s), unless they are also subject to change (in order and/or number)
Related
I am trying to show content depending on the option selected from the user. I tried this way
<select class="form-control" id="Intervencion" >
<option selected disabled></option>
<option (click)="show">Yes</option>
<option>No</option></select>
<div *ngIf="show"><p>Text to show</p></div>
I do not understand the problem. There is a special directive for this?
... You don't seem to know how basic HTML works. Sorry to say that, but you have to be aware of what you're doing is completely barbaric.
Here is the solution for you :
<select [(ngModel)]="intervencion">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<div *ngIf="intervencion === 'yes'">Text to show</div>
That being given, you should really follow Angular's tutorials, because that's one of the first examples they give to explain how ngModel works.
I know that you can associate a label with an input using the for and id attributes. However can you use a class and not an id? Thanks
<label for="rooms">Number of rooms</label>
<select id="rooms">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Classes are not unique (you can have multiple elements with the same class), so no.
If you want to associate a label to an input without using ID, you can implicitly assign it by including said input inside of the label:
<label>Number of rooms
<select name="rooms">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</label>
Here is an example of when you wouldn't want to use an ID or nest the control:
I'm creating a BackboneJS application that uses templates. Because the template can be duplicated, it's important to refrain from using IDs, as it will create multiple elements in the DOM with the same ID.
I'm also using Bootstrap, which will present the control in a different (and undesirable) way if it's wrapped inside the <label> element.
At this point, the only solution I can find is to wrap the control element and tweek the default CSS to get the desired output. If someone has a more elegant solution, please chime in.
No, you cannot use the class of an element, because the same class can be used by multiple elements - in which case, which element would the label be for?
No, you can't. The only attribute you can use is the id attribute.
It doesn't make sense to use a class (which describes a group of related elements) since a label can be associated only with exactly one form control.
you can do this :
<label class="col-md-12 input-group input-group-sm">
<span class="col-sm-5 control-label text-nowrap">Code</span>
<input class="form-control listen code" type="text" size="15" required/>
</label>
I'm braking my head over this:
<label>Modiality:</label>
<select ng-model="sysinfo.modiality" required>
<option value="">Please select...</option>
<option required data-ng-repeat="modiality in modialityTypeController.items" value="{{modiality.Name}}">{{modiality.Name}}</option>
</select>
<p>{{sysinfo.modiality}}</p>
The <p> is there to proof that my binding works.
Then in another div i'm doing this:
<h1>{{sysinfo.modiality}}</h1>
But nothing shows up.... !?
Since the binding proofs it's working properly in the <p> what could possibly the reason that it doesn't work in a different DIV that's i might have overlooked?
Right now the search_type which JS uses later is always "people" as can be seen in the hidden input field.
How can I make it so that the selected option's value is the value tied to the name "search_type"?
<input type="hidden" name="search_type" value="people"> <!-- This obviously needs to change-->
<div class="medium-4 columns">
<select>
<option value="default">All Categories</option>
<option value="people">People</option>
<option value="items">Items</option>
</select>
</div>
I have tried changing the name of all the options' names to search_type but this did not work. I have also tried other things, but can't figure it out. Any help would be much appreciated.
Here is the Javascript line that calls it:
search_type: $('input[name="search_type"]').val(),
Note: I am working in Zurb Foundation
Simply put, there is no need to add another input field when you already have a perfectly usable one! change your code so that the <select> includes the name attribute, like so, and get rid of the hidden input:
<div class="medium-4 columns">
<select name="search_type">
<option value="default">All Categories</option>
<option value="people">People</option>
<option value="items">Items</option>
</select>
</div>
What's happening is that I'm using a payment processor not under my control, and I need to pass it the values of shipping, and the values of shipping per additional item.
Since they're packaged separate, we're going to charge the same amount per additional item, so instead of coming up with two identical fields that the user has to fill out, I'm trying to create one field that assigns the value of shippingf and shipping2f
Below is an example of one of my many attempts. Another attempt has been just putting name="" twice, and that didn't seem to work either.
<select name="shippingf, shipping2f" style="height:35px;">
<option value="12">US</option>
<option value="32">Canada</option>
</select>
any help on this matter would be fantastic.
Thanks!
Not possible with just HTML.
You could either
use JS to change the value of a type="hidden" element in the form, or
server-side (assuming PHP), before you include your payment processor, add $_POST['shipping2f'] = $_POST['shippingf'];. Just keep shippingf in the HTML.
Since the OP said option 2 won't work, here's an example for option 1:
HTML:
<select name="shippingf" style="height:35px;">
<option value="12">US</option>
<option value="32">Canada</option>
</select>
<input name="shipping2f" type="hidden"></input>
jQuery:
$("select[name=shippingf]").change(function(){
$("input[name=shipping2f]").val($(this).children(':selected:first').val());
}).change();
Demo: http://jsfiddle.net/nb8j06qb/
or <====
HTML:
<select id='sf' name="shippingf" style="height:35px;">
<option value="12">US</option>
<option value="32">Canada</option>
</select>
<input id='s2f' name="shipping2f" type="hidden" value="12"></input>
Vanilla JS:
document.getElementById('sf').onmouseup = function(){
document.getElementById('s2f').value = this.options[this.selectedIndex].value;
};
Demo: http://jsfiddle.net/nb8j06qb/1/