I am trying to hide the text fields in my dialog box pop up to re utilize the same component for Edit & Delete Feature. Basically I am manipulating the header of dialog but for delete feature I want user to only see heading. But I can't find any option to hide all text fields on Vuetify.
HTML
<v-text-field
v-model="entryData[item]"
:label="getLabel(item)"
:disabled="setDisable(item)">
</v-text-field>
Set Disable function
setDisable (colName) {
return this.entryState === 'read' || colName.toLowerCase().indexOf('id') !== -1;
},
Like disable is there any option for visibility?
you can use v-if
<v-text-field
v-model="entryData[item]"
:label="getLabel(item)"
v-if="setDisable(item)">
</v-text-field>
or v-show
<v-text-field
v-model="entryData[item]"
:label="getLabel(item)"
v-show="setDisable(item)">
</v-text-field>
the difference between the two is that v-if hidden component doesn't get added to your DOM, and the v-show component is added, but set to hidden using styles.
On a side note, as mentioned in an earlier question, try to avoid calling functions in the template. this will trigger a re-render on full tree every time, because function responses are not cached. storing these values in a computed is usually the way to go. You can store multiple attributes in the object, and you already have entryData, so you can adjust is to include other parameters.
Related
I am attempting to create a search bar using a custom HTML component for predictive text input. The way this component is built, it generates several plain HTML children that I need to act on to get full features. Specifically, I need to execute a blur action on one of the generated elements when the user presses escape or enter.
I got it to work using a ref on the custom component and calling getElementsByClassName on the ref, but using getElementsByClassName does not seem like the best solution. It pierces through the virtual and has odd side effects when testing.
This is a snippet of the component being rendered:
<predictive-input id='header-search-bar-input' type='search'
value={this.state.keywords}
ref={(ref: any) => this.predictiveInput = ref}
onKeyDown={(e: React.KeyboardEvent<any>) => this.handleKeyDown(e)}>
</predictive-input>
and the keyDown handler:
private handleKeyDown(e: React.KeyboardEvent<any>) {
// must access the underlying input element of the kat-predictive-input
let input: HTMLElement = this.predictiveInput.getElementsByClassName('header-row-text value')[0] as HTMLElement;
if (e.key === 'Escape') {
// blur the predictive input when the user presses escape
input.blur();
} else if (e.key === 'Enter') {
// commit the search when user presses enter
input.blur();
// handles action of making actual search, using search bar contents
this.commitSearch();
}
}
The element renders two children, one for the bar itself and one for the predictive dropdown. The classes of the underlying in the first are 'header-row-text' and 'value', so the element is correctly selected, but I am worried that this is violating proper React style.
I am using React 16.2, so only callback refs are available. I would rather avoid upgrading, but if a 16.3+ solution is compelling enough, I could consider it.
If you don't have any control over the input then this is the best approach in my opinion.
It's not ideal, but as you're stuck with a 3rd party component you can only choose from the methods that are available to you. In this case, your only real options are to find the element based on its class, or its position in the hierarchy. Both might change if the package is updated, but if I had to choose which would be more stable, I'd go for className.
Here is the link for an example of the issue I will attempt to describe. In the chips autocomplete example, click the text box to select a new fruit.
Now, before clicking anywhere else, click again on the text box as you did before.
This should result in no options showing up. The issue here is that the user must either begin keying in a new selection or first click another element in the window before matchip will show the options to choose from. I am wondering if there is a way to fix this issue. I would like a user to be able to choose a selection from the list and then immediately click the text box as they had before and make a new selection.
I'm using mat-chip-list inside an outer *ngFor iterating over a FormArray.
Here is what I'have done. It's pretty efficient :
<input
#validatorInput
#operationTrigger="matAutocompleteTrigger"
[formControl]="contactCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
(blur)="contactCtrl.setValue(''); validatorInput.value='';"
(click)="contactCtrl.setValue(''); validatorInput.value=''; operationTrigger.openPanel()">
The trick is
Always clear your html input and your (shared) formControl with an empty and not null value each time the blur and click events occur.
Do NOT do this 'clear' on the input focus event. (Because when you delete the last chip, the input is auto-focus and you will have the famous Expression has changed after it was checked.
Call operationTrigger.openPanel(); when the user click on the input
Setting contactCtrl.setValue(''); allows your autocomplete panel to be automatically opened when you call operationTrigger.openPanel()
Setting validatorInput.value=''; is just a way to properly sync your formControl with the html input to ensure a good UX/UI behavior.
Inside my formArray, the formControl is the same for all the inputs but it does not matter since the user can only manipulate one input at a given time
Since you didn't post your code and you mention the example on the material site I'm going to do it as a fork of the stackblitz example they have on their site.
But this will allow you to open the autocomplete panel again despite having had the cursor there and choosing an option previously.
// Using MatAutocompleteTrigger will give you access to the API that will allow you to
// to open the panel or keep it open
...
#ViewChild(MatAutocompleteTrigger, {static: false}) trigger: MatAutocompleteTrigger;
...
ngAfterViewInit() {
fromEvent(this.fruitInput.nativeElement, 'click')
.pipe(
tap(() => {
this.trigger.openPanel()
})
).subscribe()
}
Link to the full stackblitz:
https://stackblitz.com/edit/angular-sb38ig
Am building a Wordpress plugin and am Using Vue Js.
I set up a variable that will be set to true on a button click
Then another div which is a modal that will remaining hidden with v-if as long as the variable is false. The is also a form in the div modal(pop up)
The problem is that once the value changes, on button pressed, the form submits immediately.
This has been happening but I usually ignore it because there was always a required field which will prevent the form from submitting automatically.
Vue.js Data object
{
selected_to_show : false,
}
The modal div
<div v-if="selected_to_show === true" class='mp-modal'>
<form on:submit.prevent="xhrSubmit()">
<form>
</div>
<button v-on:click="selected_to_show = true"></button>
This works but once the modal opens, the form submits immediately.
Note: There is only two button elements in the form where are all set to type="button"
The target is to prevent the form from submitting automatically when shown
If any one still uses this approach to re-render vue apps, my advice is, don't.
The best way to re-render the app is by doing
this.forceUpdate();
This will re-render the vue app instead of modifying data properties of the vue instance which are utilized during rendering.
However, don't overuse it.
Most times when your view is not re-rendering naturally, its probably because you are doing something wrong.
I have a Employee entity that I'm binding to an "Edit" view in an MVC3/Razor application. The Employee entity has a property for OccupationTypeId. OccupationTypeId points to the OccupationType table which contains several lookup values. The natural choice would be to use #Html.DropDownListFor to render a <select> tag containing a list of Occupations.
The OccupationType table schema is fairly standard: Id, Name, Description, IsEnabled. Since OccupationTypes can be disabled, I want the OccupationTypeId drop down to still render disabled options so the user can always see their selection if it's disabled, but a disabled option can't be selected by the user. In other words, a user can't change an existing OccupationTypeId to a disabled option.
I thought about creating a #Html extension method to build my <select> tag with the options and simply tack on a disabled attribute to disabled options. I think that would be straight forward...
However, disabled selected options don't seem to post back to the controller method. In other words, Employee.OccupationTypeId would be null when I post to Edit.
Is there any way to change this behavior or is this built in to MVC 3? I thought about using hidden fields, but what if OccupationTypeId is required and I have validation enabled?
Has anyone else faced this?
Thanks
You could have a hidden field that gets updated when the change event occurs in the dropdown list. This way the OccupationTypeId field is always passed.
<input name='CurrentOccupationId' type='hidden' value='#Model.Employee.OccupationTypeId' />
<script>
$(function() {
$('#dropDownId').change(function() {
$('input[name="CurrentOccupationTypeId"]').val($(this).val());
});
});
</script>
Is there any way to change this behavior or is this built in to MVC 3?
I thought about using hidden fields, but what if OccupationTypeId is
required and I have validation enabled?
It has nothing to do with MVC 3 in particular; all disabled html elements don't post back in general.
The solution I've used is to "simulate" the disable element by styling the appropriate element with CSS. You can, for example, set the element's background (or foreground) color to gray and set the readonly attribute (when it makes sense) instead.
See this similar thread.
I have a select box (for a customer field) on a complex order form, when the user starts to add lines to the order they should not be allowed to change the customer select box (unless all lines are deleted).
My immediate thought was that I could use the disabled attribute, but when the box is disabled the selected value is no longer passed to the target.
When the problem arose a while ago one of the other developers worked around this by looping through all the options and disabling all but the selected option, and sure enough the value was passed to the target and we've been using since. But now I'm looking for a proper solution, I don't want to loop through all the options because are data is expanding and it's starting to introduce performance issues.
I'd prefer not to enable this / all the elements when the submit button is hit.
How can I lock the input, whilst maintaining the selected option and passing that value to the target script? I would prefer a non-JavaScript solution if possible, but if needed we are running jQuery 1.4.2 so that could be used.
Edit
I've tried to use the readonly attribute with little success, here's the jQuery code I'm using:
$('.abc').each(function(element) {
$(this).attr('readonly','readonly');
});
When inspecting the element with Firebug the readonly attribute had been set, but I can still change the value in the select box?!
This works:
$('.abc :not(:selected)').attr('disabled','disabled');
jQuery will still be looping through the elements behind the scenes, but I seriously doubt you will have performance issues unless your select has thousands of elements (in which case your usability issues will far out weigh the performance issues). The original code must have been doing something wrong.
This works fine
<select disabled="true">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">thre</option>
</select>
Add a hidden field to your form and onsubmit take the value from the select and place it in the hidden field's value
As per the HTML spec, readonly is not supported by the select tag
The element does not accept readonly attribute. Readonly is a wrapper that fix this.
Try this:
https://github.com/haggen/readonly
"select" does not have a readonly attribute. It has only disabled attribute.
http://www.w3schools.com/TAGS/att_select_disabled.asp
So your best best is:
$('.abc').each(function(element) {
$(this).attr('disabled','disabled');
});
HTH
I'd have an idea, that was functional to me:
In my case, when a user selects an option (an account) in a drop-down on a form of an accounting system, e.g., some kind of "expense", that I know that may not be "credited", just "debited", another drop-down that selects the accounting operation (Debit/Credit), changes these drop-down to "Debit".
Then, I "lock" (using "disabled=true") these last "drop-down" in the "debit" option.
The problem that occurred to me these moment, was similar of yours: after disabling the drop-down element, I couldn't receive it in the target, anymore.
So, what I've done:
1 - Changed the option in the second drop-down list, as I said:
document.getElementById("operation").value = "D";
`
2 - Disabled that dropdown:
document.getElementById("operation").disabled = true;
Then, the "cat salt":
3a- Added to the "FORM" element, an "onsubmit"
onsubmit = "validForm()"
3b - On my [java-script] file I added the ["valid-Form"] function:
function validForm()
{
document.getElementById("operation").disabled = false;
}
Voilá!
A simple way to disable any Select is to just disable mouse interaction.
For example:
<select id="complaint_status" name="complaint_status" class="disabledSelect" value="Pending">
<option value="Pending" selected>Pending</option>
<option value="Complete">Complete</option></select>
css
.disabledbutton {
pointer-events: none;
opacity: 0.4;}
The value of Select will be SUBMITted.
Hope it works!!