I have used the uib-typeahead directive as follows :
<input type="text" id="search-box" class="form-control" data-ng-model="searchBar.search.searchString"
typeahead-on-select="searchBar.gotoPartDetails($item, $model, $label, $event)" uib-typeahead="result as result.partNumber+' '+result.lineDesc+' '+result.partDesc for result in searchBar.textTyped($viewValue)"
placeholder="Search by part number, product type, product line, keyword" typeahead-focus-first="searchBar.search.firstSelect" typeahead-popup-template-url="app/components/header/search-bar/typeahead-popup.html" typeahead-template-url="{{searchBar.search.typeaheadTemplate}}"
data-ng-focus="searchBar.focus()" data-ng-blur="searchBar.blur()">
I am basically using the "searchBar.search.firstSelect" scope variable to enable or disable first select. On controller load searchBar.search.firstSelect is set to false and based on the size of the length data displayed. If the typeahead is showing just one data in the options I am setting searchBar.search.firstSelect to true. But this is not reflecting in the UI. What do I do?
Related
(I'm new to Svelte so it is quite likely that I'm doing something wrong here)
UPDATE: I've added a second, slightly different REPL which may demonstrate the problem better. Try this one: https://svelte.dev/repl/ad7a65894f8440ad9081102946472544?version=3.20.1
I've encountered a problem attempting to bind a text input to a reactive value.
I'm struggling to describe the problem in words, so hopefully a reduced demo of the issue in the attached REPL will make more sense.
https://svelte.dev/repl/6c8068ed4cc048919f71d87f9d020696?version=3.20.1
The demo contains two custom <Selector> components on a page.
The first component is passed two string values ("one" and "two"):
<Selector valueOne="one" valueTwo="two"/>
Clicking the buttons next to the input field sets selectedValue to one of these values.
This, in turn, triggers the following reactive declaration to update:
$: value = selectedValue
The input field is bound to this reactive value:
<input type="text" bind:value>
So clicking the "One" button sets the input text to "one", and clicking the "Two" button sets the input field to "two".
Importantly though, you can still type anything into the input field.
The second component is passed two array values:
<Selector valueOne={[1, "one"]} valueTwo={[2, "two"]}/>
Again, clicking the buttons sets selectedValue to one of these.
However this time the reactive declaration depends on an array element:
$: value = selectedValue[1]
Everything works as before, except now you can no longer type into the input field at all.
So the question is - why does <input bind:value> behave differently for these two:
$: value = aString
vs
$: value = anArray[x]
It seems that this is only an issue when using two-way bindings.
By switching to a one-way and an on:input handler, the problem goes away:
i.e. instead of this:
<input type="text" bind:value={valX}/>
use this:
<input type="text" value={valX} on:input={e => valX = e.target.value}/>
I'm pretty sure your reactive declaration is overwriting your bound value as soon as it changes, which is with every key stroke on the input and every button press. Meaning it technically is working, you're just reverting it each time it changes. Check out this version of it that uses a watcher.
Also binding to a reactive declaration means you're never actually changing the variables with the input (which you can see in your JSON result on the first selector when you type in the input the value doesn't update only on button click).
Why not lose the reactive declaration and bind directly to the variable you want. Then use an {#if} block to switch between which version of the input you're showing based on the truthiness of index?
<script>
export let valueOne;
export let valueTwo;
export let index;
let selectedValue = index? [] : '';
let selectValue = (val) => selectedValue = val;
</script>
{#if index}
<input type="text" bind:value={selectedValue[index]} placeholder="Type anything...">
{:else}
<input type="text" bind:value={selectedValue} placeholder="Type anything...">
{/if}
<button on:click={() => selectValue(valueOne)}>One</button>
<button on:click={() => selectValue(valueTwo)}>Two</button>
<p>
<strong>Selected value:</strong> {JSON.stringify(selectedValue)}
</p>
By binding directly to the selectedValue or an index of it you have the added benefit of changing the value with the input. Here's a working example in the REPL
I have two check boxes and they are populating when the user is selected, but I now need to check the values and return them before saving them back to database in case they have been changed, below is my plunker with my working code if you select a tradesman from the drop down the ticket boxes are populated.
If someone could advise how I can get check the tick box values that would be great, this is what I have tried but I am missing something:
<input type="input" name="adminis" id="adminis" class="form-control" [(ngModel)]="tradesman.user_roles"/>
Plunker demo
To find whether a checkbox value is changed or not, you can use (change) attribute.
<input type="checkbox" [checked]="tradesman?.user_roles?.includes('Administrator') ? true : false" value="Administrator" (change)="valueChanged($event)"/>Admin
<input type="checkbox" [checked]="tradesman?.user_roles?.includes('General User') ? true : false" value="General User" (change)="valueChanged($event)" />General
In your component, you can manage the data using the event passed.
valueChanged(e:any){
/* e.target.name - for getting the changed field name */
/* e.target.checked - for getting the value - true(checked)/false(unchecked) */
}
Then you can update your array or whatever with this new value.
I working on an older legacy system using select2 3.5.2.
It's using the older hidden field method, and it currently passes data like so:
<input class="select2" data-url="/mapscrSearch/filterdata" data-parent="3" data-model="VMapscreenCategories" data-tags="1" data-searchterm="name" data-showitem="name" data-hiddenfield=".opcode_filters" data-allowuserinput="" data-enabled="1" type="text" value="" name="opcode_id" id="opcode_id" tabindex="-1" style="display: none;">
Right now, I have a small jquery function that changes the data-parent on the fly, and pulls in the correct data depending on the parent id; This works if I set data-parent manually, but when changing the data-parent via jquery it doesn't update the select2 component.
For example, I currently have:
$(document).ready(function(){
var opCodeFamily = $('#category_parent');
var opCodeParentId = $('#opcode_parent_id');
var opCodeDataUrl = $('#opcode_id');
// Set default
$(opCodeParentId).val($(opCodeFamily).val());
$(opCodeDataUrl).attr('data-parent', opCodeParentId.val());
// Change the value from parent select
$(opCodeFamily).change(function(){
$(opCodeParentId).val($(opCodeFamily).val());
$(opCodeDataUrl).attr('data-parent', opCodeParentId.val()).trigger("change");
console.log('data-parent set to: ' + opCodeParentId.val() + ', select2 passing: ' + opCodeDataUrl.data('parent'));
}).trigger("change")
});
I can see it changing the data-parent in the console and inspector, but select2 is still passing the original value. I've looked at trigger, but this doesn't seem to do anything. Is there something I'm missing?
Input texts are inserted in the DOM using an iterable repeat like the following:
HTML:
<template repeat="value in listValue">
<input type="text" bind-value="listValue[$index]">
</template>
Dart:
List listValue = toObservable(["value one", "value two"]);
There is a problem with the focus: when a letter is typed in any of the input field, the DOM is redisplayed and the focus is lost. This is due to focus bug
How could I have this working?
The focus problem is a result that WebUI currently considers changes to individual entries in a list as a general change to the list itself, so it re-renders the entire template-repeat on every edit. You can get the behavior you want by adding one level of indirection. The idea here is to make it easier to distinguish changes to values from changes to the list.
For instance, instead of having list of string values, make it a list of observable references to string values, as follows:
html:
<template repeat="value in listValue">
<input type="text" bind-value="value.value">
</template>
dart:
import 'package:web_ui/web_ui.dart';
List listValue = toObservable([]);
void main() {
listValue.add(new ObservableReference("value one"));
listValue.add(new ObservableReference("value two"));
}
I'm just now starting to learn ASP.NET MVC. How would I go about creating a reusable tri-state checbox? In WebForms this would be a control, but I don't know the MVC equivalent.
Add a TriStateCheckBox (or TriStateCheckBoxFor if you use the strongly typed overloads) extension method to HtmlHelper and add the namespace of that extension method class to the namespaces section of your web.config.
As for the implementation, I'd recommend having at look at the InputExtensions source on codeplex and using that to create your own.
Limitations:
View Rendering - When rendering HTML content, there is no attribute you can possibly place on an <input type="checkbox" /> that will give it the property indeterminate.
At some point, you'll have to use JavaScript to grab the element and set the indeterminate property:
// vanilla js
document.getElementById("myChk").indeterminate = true;
// jQuery
$("#myCheck).prop("indeterminate", true);
Form Data - model binding will always be limited to what values are actually sent in the request, either from the url or the data payload (on a POST).
In this simplified example, both unchecked and indeterminate checkboxes are treated identically:
And you can confirm that for yourself in this Stack Snippet:
label {
display: block;
margin-bottom: 3px;
}
<form action="#" method="post">
<label >
<input type="checkbox" name="chkEmpty">
Checkbox
</label>
<label >
<input type="checkbox" name="chkChecked" checked>
Checkbox with Checked
</label>
<label >
<input type="checkbox" name="chkIndeterminate" id="chkIndeterminate">
<script> document.getElementById("chkIndeterminate").indeterminate = true; </script>
Checkbox with Indeterminate
</label>
<label >
<input name="RegularBool" type="checkbox" value="true">
<input name="RegularBool" type="hidden" value="false">
RegularBool
</label>
<input type="submit" value="submit"/>
</form>
Model Binding - Further, model binding will only occur on properties that are actually sent. This actually poses a problem even for regular checkboxes, since they won't post a value when unchecked. Value types do always have a default value, however, if that's the only property in your model, MVC won't new up an entire class if it doesn't see any properties.
ASP.NET solves this problem by emitting two inputs per checkbox:
Note: The hidden input guarantees that a 'false' value will be sent even when the checkbox is not checked. When the checkbox is checked, HTTP is allowed to submit multiple values with the same name, but ASP.NET MVC will only take the first instance, so it will return true like we'd expect.
Render Only Solution
We can render a checkbox for a nullable boolean, however this really only works to guarantee a bool by converting null → false when rendering. It is still difficult to share the indeterminate state across server and client. If you don't need to ever post back indeterminate, this is probably the cleanest / easiest implementation.
Roundtrip Solution
As there are serious limitations to using a HTML checkbox to capture and post all 3 visible states, let's separate out the view of the control (checkbox) with the tri-state values that we want to persist, and then keep them synchronized via JavsScript. Since we already need JS anyway, this isn't really increasing our dependency chain.
Start with an Enum that will hold our value:
/// <summary> Specifies the state of a control, such as a check box, that can be checked, unchecked, or set to an indeterminate state.</summary>
/// <remarks> Adapted from System.Windows.Forms.CheckState, but duplicated to remove dependency on Forms.dll</remarks>
public enum CheckState
{
Checked,
Indeterminate,
Unchecked
}
Then add the following property to your Model instead of a boolean:
public CheckState OpenTasks { get; set; }
Then create an EditorTemplate for the property that will render the actual property we want to persist inside of a hidden input PLUS a checkbox control that we'll use to update that property
Views/Shared/EditorTemplates/CheckState.cshtml:
#model CheckState
#Html.HiddenFor(model => model, new { #class = "tri-state-hidden" })
#Html.CheckBox(name: "",
isChecked: (Model == CheckState.Checked),
htmlAttributes: new { #class = "tri-state-box" })
Note: We're using the same hack as ASP.NET MVC to submit two fields with the same name, and placing the HiddenFor value that we want to persist first so it wins. This just makes it easy to traverse the DOM and find the corresponding value, but you could use different names to prevent any possible overlap.
Then, in your view, you can render both the property + checkbox using the editor template the same way you would have used a checkbox, since it renders both. So just add this to your view:
#Html.EditorFor(model => model.OpenTasks)
The finally piece is to keep them synchronized via JavaScript on load and whenever the checkbox changes like this:
// on load, set indeterminate
$(".tri-state-hidden").each(function() {
var isIndeterminate = this.value === "#CheckState.Indeterminate";
if (isIndeterminate) {
var $box = $(".tri-state-box[name='" + this.name + "'][type='checkbox']");
$box.prop("indeterminate", true);
}
});
// on change, keep synchronized
$(".tri-state-box").change(function () {
var newValue = this.indeterminate ? "#CheckState.Indeterminate"
: this.checked ? "#CheckState.Checked"
: "#CheckState.Unchecked";
var $hidden = $(".tri-state-hidden[name='" + this.name + "'][type='hidden']");
$hidden.val(newValue);
});
Then you can use however you'd like in your business model. For example, if you wanted to map to a nullable boolean, you could use the CheckState property as a backing value and expose/modify via getters/setters in a bool? like this:
public bool? OpenTasksBool
{
get
{
if (OpenTasks == CheckState.Indeterminate) return null;
return OpenTasks == CheckState.Checked;
}
set
{
switch (value)
{
case null: OpenTasks = CheckState.Indeterminate; break;
case true: OpenTasks = CheckState.Checked; break;
case false: OpenTasks = CheckState.Unchecked; break;
}
}
}
Alternative Solution
Also, depending on your domain model, you could just use Yes, No, ⁿ/ₐ radio buttons
ASP.NET MVC certainly doesn't provide such component, actually it simply relies on the standard elements available in HTML but you may want to check out this solution.