I have somekind of bug on my v-select which cause the v-model to show different value than the real value of the variable. I use a method to change the selected option which work for the first change. Example if i chose False and flag = Y then the selected option will change to True, this work the for the first time you chose the option then when i change the value from True to False it will change the value but the selected option is still on False.
<v-col cols="9">
<v-select
v-model="promo_form.generate_voucher"
#input="methodUsed"
:rules="textInputRules"
:items="['False', 'True']"
required
outlined
></v-select>
</v-col>
Here is the method i use:
if(this.flag_member == 'N' && this.promo_form.generate_voucher == 'True'){
this.promo_form.promo_id = null;
this.flag_member = "";
this.promo_form.generate_voucher = null;
this.promo_form.voucher_type = "";
this.flag1 = 'y';
}
else if(this.flag_member == 'Y' && this.promo_form.generate_voucher == "False"){
this.promo_form.generate_voucher = "True";
this.flag1 = 'n'
}
if(this.flag1 == 'y'){
alert('Something')
}
else if(this.flag1 == 'n'){
alert("Something")
}
I tried adding label and the value is true for the label but not for the v-model
in method try to change this line this.promo_form.generate_voucher = null to
this.promo_form.generate_voucher = 'False'
Related
I'm newbie in using WebRTC and I am using this git project by Muaz-khan. I have problem when divided chat output into two columns (User name 1 and User name 2), this is default of chat output
id of this div is #chat-output
Can you show code for example? I think you just create two html containers (left and rigth for example) and push messages first to the left, and messages from the second to the right.
I am using this demo of him , [ https://github.com/muaz-khan/RTCMultiConnection/blob/master/demos/TextChat%2BFileSharing.html].
Here is function that Text Message Out Put will put here in . I want to change it in two columns, such as for User name 1 : <div id="usename1"></div>, for user name 2 : <div id="username2"></div>
document.getElementById('input-text-chat').onkeyup = function(e) {
if (e.keyCode != 13) return;
// removing trailing/leading whitespace
this.value = this.value.replace(/^\s+|\s+$/g, '');
if (!this.value.length) return;
connection.send(this.value);
appendDIV(this.value);
this.value = '';
};
var chatContainer = document.querySelector('.chat-output');
function appendDIV(event) {
var div = document.createElement('div');
div.innerHTML = event.data || event;
chatContainer.insertBefore(div, chatContainer.firstChild);
div.tabIndex = 0;
div.focus();
document.getElementById('input-text-chat').focus();
}
Modify function appendDIV().
function appendDIV(event) {
var div = document.createElement('div');
div.innerHTML = event.data || event;
chatContainer.insertBefore(div, chatContainer.firstChild);
div.tabIndex = 0;
div.style.width = '100%';
if (event.data)
div.style.textAlign = 'left';
else
div.style.textAlign = 'right';
div.focus();
document.getElementById('input-text-chat').focus();
}
P.S. I apologize for the late reply :)
Validation doesn't seem to be called when the property has no value.
This is the code I'm using to try and make it work:
.ensure('baseContent.SetNamePrint').passes((name) =>
{
var webNameLength = this.baseContent.SetNameWeb.length;
var printNameLength = name.length;
console.log(webNameLength);
console.log(printNameLength);
if ((webNameLength > 1 && webNameLength < 51) || (printNameLength > 1 && printNameLength < 51)) {
return true;
}
return false;
}).withMessage('Web Name or Print Name is Required')
The passes only fires when the value of the property changes to something with a length, when it's empty (a blank string) nothing happens.
What I need is for the .passes() to be called every time there is a change to the value not just when there is a change and it has a value.
You need to additionally constraint the target property with isNotEmpty.
.ensure('baseContent.SetNamePrint').isNotEmpty().passes(...
From the documentation:
The isNotEmpty rule is always checked first before any other
validation rule. This means that without the isNotEmpty rule, the
.hasMinLength(5) rule would still consider a value of '' as valid
because the field is allowed to be empty.
PS: I heard that aurelia-validation is under rewriting. Perhaps that's why I can't find the documentation from the master branch anymore, but in another branch here
To get what I wanted I ended up with the following code.
this.validator = this.validation.on(this)
.ensure('SetNameWeb', (config) => {config.computedFrom(['SetNamePrint', 'SetNameWeb'])})
.if(() => { return this.HasImageEitherPrintNameOrWebName === false })
.isNotEmpty().withMessage('or "Print Name" is required')
.hasLengthBetween(0, 50)
.endIf()
.ensure('SetNamePrint', (config) => {config.computedFrom(['SetNameWeb', 'SetNamePrint'])})
.if(() => { return this.HasImageEitherPrintNameOrWebName === false })
.isNotEmpty().withMessage('or "Web Name" is required')
.hasLengthBetween(0, 50)
.endIf()
This gave me the functionality I needed with both of the fields being updated with each other.
However there was a bug in the aurelia code with the way it handles computedFrom that needed fixing to get this to work.
This problem was with aurelia-validation#0.6.8 though and there is now a new version which works in a completely different way so my recommendation is to update if you're having this problem.
So the value of the field should be the first option selected.
As i see the problem is here
public function seeOptionIsSelected($select, $optionText)
{
$selected = $this->matchSelectedOption($select);
$this->assertDomContains($selected, 'selected option');
//If element is radio then we need to check value
$value = $selected->getNode(0)->tagName == 'option' ? $selected->text() : $selected->getNode(0)->getAttribute('value');
$this->assertEquals($optionText, $value);
}
This situation can be tested with the following:
$I->seeElement("#id_of_the_select_box");
$I->dontSeeElement("#id_of_the_select_box option[selected='selected']");
I'm trying to implement something like a typesafe ViewModel using KnockoutJS. It works pretty well until I start to update observables via HTML input tags.
I have implemented type extender which returns computed observable:
return ko.computed({
read: target,
write: fixer
})
Where fixer is something like:
function (newValue) {
var current = target(),
valueToWrite = (newValue == null ? null : fixNumber(newValue, 0));
if (valueToWrite !== current) target(valueToWrite);
else if (newValue !== current) target.notifySubscribers(valueToWrite);
}
And fixNumber is
function fixNumber(value, precision) {
if (value == null || value === '') return null;
var newValue = (value || '').toString().replace(/^[^\,\.\d\-]*([\.\,\-]?\d*)([\,\.]?\d*).*$/, '$1$2').replace(/\,/, '.'),
valueToWrite = Number(newValue);
return !!(valueToWrite % 1) ? round(valueToWrite, precision) : valueToWrite;
}
It looks not so straightforward, but I have to consider possible use of comma as a decimal separator.
Often I need to update my observables as soon as user presses key to reflect this change immediately:
<input type="text" data-bind="value: nonThrottled, valueUpdate: 'afterkeyup'"></input>
And here comes a lot of problems, because, for example, I can't input decimal values less than 1 (0.1, 0.2, etc) there.
When I try to throttle an observable it mostly works. But sometimes user input and type fixer go out of sync, so it looks like some input gets lost occasionally.
Full example is there http://jsfiddle.net/mailgpa/JHztW/. I would really appreciate any hints, since I have spent days trying to fix these problems.
UPDATE 11/04/2013
I solved my problem providing custom value binding, so now throttled observables doesn't eat my input occasionally.
I've added additional valueThrottle option-binding to throttle updating of element's value:
var valueThrottle = allBindingsAccessor()["valueThrottle"];
var valueThrottleTimeoutInstance = null;
/* ... */
if (valueThrottle) {
clearTimeout(valueThrottleTimeoutInstance);
valueThrottleTimeoutInstance = setTimeout(function () {
ko.selectExtensions.writeValue( element, ko.utils.unwrapObservable(valueAccessor()) );
}, valueThrottle);
} else applyValueAction();
Also I've noticed that inability to enter values like 0.2 in my case comes from that statement in original value binding:
if ((newValue === 0) && (elementValue !== 0) && (elementValue !== "0"))
valueHasChanged = true;
I've rewritten it as
if ((newValue === 0) && (elementValue != 0))
valueHasChanged = true;
It works at least at Chrome, but I haven't tested it properly and even not sure that it's correct.
Example is to be added, for some reason jsFiddle does not accept my custom binding.
Any comments are really appreciated.
First, you have to know that I am developing my project with Struts (J2EE
Here is my problem :
I have 2 dijit.form.Select widgets in my page, and those Select are filled with the same list (returned by a Java class).
When I select an option in my 1st "Select widget", I would like to update my 2nd Select widget, and disable the selected options from my 1st widget (to prevent users to select the same item twice).
I succeed doing this (I'll show you my code later), but my problem is that when I open my 2nd list, even once, it will never be refreshed again. So I can play a long time with my 1st Select, and choose many other options, the only option disabled in my 2nd list is the first I've selected.
Here is my JS Code :
function removeSelectedOption(){
var list1 = dijit.byId("codeModif1");
var list2 = dijit.byId("codeModif2");
var list1SelectedOptionValue = list1.get("value");
if(list1SelectedOptionValue!= null){
list2.reset();
for(var i = 0; i < myListSize; i++){
// If the value of the current option = my selected option from list1
if(liste2.getOptions(i).value == list1SelectedOptionValue){
list2.getOptions(i).disabled = true;
} else {
list2.getOptions(i).disabled = false;
}
}
}
Thanks for your help
Regards
I think you have to reset() the Select after you've updated its options' properties. Something like:
function removeSelectedOption(value)
{
var list2 = dijit.byId("codeModif2"),
prev = list2.get('value');
for(var i = 0; i < myListSize; i++)
{
var opt = myList[i];
opt.disabled = opt.value === value;
list2.updateOption(opt);
}
list2.reset();
// Set selection again, unless it was the newly disabled one.
if(prev !== value) list2.set('value', prev);
};
(I'm assuming you have a myList containing the possible options here, and the accompanying myListSize.)