Select input from getmdl-select with Vue 2.0 - javascript

I was trying out getmdl-select with Vue2.0. in the view, I got it correct and working as expected, but it is not changing the model associated. Here is the code:
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fullwidth">
<input class="mdl-textfield__input" id="age" name="age" v-model="age" type="text" readonly tabIndex="-1" data-val="1"/>
<label class="mdl-textfield__label" for="age">Age</label>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="age">
<li class="mdl-menu__item" data-val="1">1 Month Old</li>
<li class="mdl-menu__item" data-val="11">11 Month Old</li>
</ul>
</div>
I have put v-model="age" with input field as given above, but age variable is not updating when selecting values from dropdown.
However vanilla select input works fine:
<select v-model="age">
<option value="" disabled hidden>Select Age</option>
<option value="1">1 Month Old</option>
<option value="11">11 Month Old</option>
</select>
I tried to created a fiddle of this, however in fiddle, UI is not coming properly, in local at-least UI works properly.
Please let me know what am I doing wrong here.

try to use v-model.lazy
<input type="text" v-model.lazy="age"/>
docs

Related

*ngif Not working after first click. Angular 6

What I want to Achieve is that I have a Select field in angular6 on the basis of the selected value I want to hide and display another div.
Here is the code.
<div class="form-group">
<label for="servicePriviledges">Managed</label>
<select type="text" class="form-control" id="managedServiceInfo" name="managedInfo" [(ngModel)]="managed">
<option value="false">False</option>
<option value="true">True</option>
</select>
<br>
</div>
<div class="form-group" *ngIf="managed">
<label for="managerType" >Manager Type</label>
<select type="text" aria-hidden="false" class="form-control" id="managerType" name="managerType">
<option value="false">False</option>
<option value="true">True</option>
</select>
</div>
*ngIf does make an impact when I switch it for the first time but not after that. the change is not detected.
I have even tried setting up the visibility attribute of style as well as [hidden] directive but got the same result.
I have even tried giving an on change method but no change in result.
version information:
"#angular/core": "^6.1.6",
"#angular/forms": "^6.1.6",
Both these controls are under a form 'ngForm'.
Another approach is to attach [ngValue] directive for every option.
<select type="text" class="form-control" id="managedServiceInfo" name="managedInfo" [(ngModel)]="managed">
<option [ngValue]="false">False</option>
<option [ngValue]="true">True</option>
</select>
managed will have a string value of 'true' or 'false' update ngIf like this
<div class="form-group" *ngIf="managed === 'true'">
...
</div>
or you can use ngValue so managed will have a boolean value of true , false
<select type="text" class="form-control" name="managedInfo" [(ngModel)]="managed">
<option [ngValue]="false">False</option>
<option [ngValue]="true">True</option>
</select>

jquery identify appended , cloned elements

In my HTML file 2 href
1st for add blank copy of div
2nd for add a new copy of the same div with values.
for each new copy or new blank should inserted below the selected div.
html code
<div class="item">
<div class="form-group">
<a href="#" id="addnl">
<span class="badge-a">+</span>
</a>
<!--add new blank line-->
<a href="#" id="addcp">
<span class="badge-b">++</span>
</a>
<!--add new line with same values above-->
<label for="qty">qty </label>
<input class='form-control' id='qty' name='qty' type='number' required>
<label for="selgroup">group </label>
<select class="form-control" id="selgroup">
<option value="1">1</option>
<option value="2">2</option>
</select>
<label for="model">somthing </label>
<input class='form-control' id='somthing ' name='somthing ' type='number'required>
<label for="sellevel">somthing </label>
<select class="form-control" id="sellevel">
<option>1</option>
<option>2</option>
<label for="selctime">somthing </label>
<select class="form-control" id="selctime">
<option>1</option>
<option>2</option>
</select>
js code
var request = $('.item:first').append();
$('.badge-a').click(function() {
request.clone().insertAfter($('.item:last'));
$(window).trigger('resize');
});
My problems is :-
for copying values every thing gets copied but not the select options stays as defaults.
for locations all I have Just :first and add to :last, all other options suggested by the IDE not works like " :selected " even not supported by jquery.
href in the new inserted DIV not works too
Here is fiddle.
Thanks in advance.

Add text to option with specific ID

Looking to add "ALL" to an option with the Value of "79" with Javascript or JQuery
<select id="locations">
<option value="79"></option>
</select>
End Result should be:
<select id="locations">
<option value="79">ALL</option>
</select>
Thanks for any help :)
EDIT:
Turns out I also need it done to an checkbox too.
<li class=" ">
<label for="ui-multiselect-Location_State-option-14" title="" class="ui-corner-all">
<input id="ui-multiselect-Location_State-option-14" name="multiselect_Location_State" type="checkbox" value="79" title="Maidstone2">
<span></span>
</label>
</li>
Again the end result should be:
<li class=" ">
<label for="ui-multiselect-Location_State-option-14" title="" class="ui-corner-all">
<input id="ui-multiselect-Location_State-option-14" name="multiselect_Location_State" type="checkbox" value="79" title="Maidstone2">
<span>ALL</span>
</label>
</li>
The value is still "79" however the code for the first option didnt work on it.
Thanks again for any help!
You can access the element using attribute selector and set the text using text() method as follows:
$('option[value="79"]').text("ALL");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="locations">
<option value="79"></option>
</select>
or without jQuery:
document.querySelector('option[value="79"]').textContent = "ALL";
You can use attribute-equals-selector:
$('option[value=79]').text('ALL');

Add a search in html Select

I am using the DDSlick plugin in my website. Everything is fine, I just want to add a filter type of thing in which there is a textbox on top. On entering text it will filter the results.
My current list box:
<select name="test">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
After using DDSlick plugin it becomes:
<ul class="dd-options dd-click-off-close" style="width: 260px; display: block;">
<li>
<a class="dd-option dd-option-selected">
<input class="dd-option-value" type="hidden" value="-1">
<label class="dd-option-text">Please Select From List</label>
</a>
</li>
<li>
<a class="dd-option">
<input class="dd-option-value" type="hidden" value="26">
<img class="dd-option-image" src="http://localhost/fifa/admin/server/packs/files/large-gold-if%20%284%29.png">
<label class="dd-option-text">test</label>
<small class="dd-option-description dd-desc">test</small>
</a>
</li>
</ul>
I believe DDslick does not have the feature that you are looking for.
I would recommend you bootstrap-select plugin. Check it out here. Lookup for the example that is using data-live-search="true".

Form input length and selected items from dropdown validation

I have following form and I'm trying to validate following form states:
themeName must is required and should have min. 4 chars.
themeLangFrom selected value cannot be same as themeLangTo (and vice versa).
I would like to display span error message under each invalidated field.
I tried to do by this way but I cannot resolve it with select inputs.
Could somebody tell to me how to do it in the right way please?
Form code:
<ul class="nav nav-pills pull-right">
<li>Close form</li>
</ul>
<h3 class="text-muted">Add New Theme</h3>
<form role="form" name="addThemeForm" id="addThemeForm" >
<div class="form-group">
<label for="themeName">Theme name:</label>
<input id="themeName" type="name" required class="form-control" ng-minlength="4" ng-model="newtheme.name" placeholder="Enter Theme Name">
<span class="formValidationError" ng-show="addThemeForm.themeName.$error">Enter valid e-mail</span>
</div>
<div class="form-group">
<label for="themeLangFrom">Language from:</label>
<select id="themeLangFrom" required class="form-control" ng-options="language as language.name for language in languages" ng-model="newtheme.langFrom" >
<option value="">{{language.name}}</option>
</select>
</div>
<div class="form-group">
<label for="themeLangTo">Language to:</label>
<select id="themeLangTo" required class="form-control" ng-options="language as language.name for language in languages" ng-model="newtheme.langTo" >
<option value="">{{language.name}}</option>
</select>
</div>
<input ng-click="addTheme(newtheme)" ng-disabled="!addThemeForm.$valid" type="submit" value="Add New Theme" class="btn btn-success btn-block btn-lg">
</form>
In order to validate that themeLangFrom is diferent from themeLangTo you will need to implement a custom directive.
You can use angular-ui's ui-validate directive (http://angular-ui.github.io/ui-utils/) for that or proabbly better:
Roll your own... You can take example from the many implementations for password validation directives out there just notice that unlike password validation you need the fields to not be equal.
You can see some examples here: password-check directive in angularjs

Categories