So I have to collect a date and time from the user. I want to be able to set both from a single picker. I found this nice one by curious solutions here. Our site uses jQuery, jQuery mobile, and Knockout. When I use the datepicker to select the date my knockout binded variable is not updating, even though the value of the input box has changed. If I use jQuery to get the value it shows up just fine.
So my question: Can someone help me figure out how to get my knockout binding to update?
I've already tried setting the valueUpdate to input, and afterkeydown with no luck.
Here is a link to a fiddle I made that demonstrates the problem: http://jsfiddle.net/TrueEddie/eg6zM/
In the plugin, when the value of the element is set it needs to trigger the change event.
Something like:
_setValueOfElement: function(sElemValue)
{
var dtPickerObj = this;
var $oElem = $(dtPickerObj.dataObject.oInputElement);
if(dtPickerObj._compare($oElem.prop("tagName"), "INPUT"))
$oElem.val(sElemValue);
else
$oElem.html(sElemValue);
//ADDED THIS LINE
$oElem.change();
return sElemValue;
},
The plugin doesn't seem to have any eventing built-in, so doesn't look like there is a good way to react to the value being set otherwise.
Related
Inside my "characters" component I have a form with a textfield, and button. ->
When I click the button it registers, and enters the function but I have no idea how to grab the current input text and use it in the called async function.
HTML:
TS:
Sadly getting the promptText does not work. I have the feeling I am missing a core concept of angular here, but even after extensive search, no luck.
Thanks in advance!
You can use
const promptTxt = document.getElementById('prompt-txtbox') as HTMLInputElement;
console.log(promptTxt.value);
Rather than trying to create form with plain javascipt/jquery, you can use Template form and Reactive form that angular provide to do the same.
A lot of example documentation/video in available for the same.
This seems like something you can also achieve by simple model binding but learning the correct way once will prepare you handle complex forms and build them quickly.
My question is related to Angular and Typescript. My problem is quite tricky. I've created a dropdown menu with 3 items. But I'm not creating it using select tag of HTML. I'm using my company's toolkit. Which is just a wrapper around primeng components with our font and our color scheme. They call it PLK toolkit. Their code have a bug. It is not clearing the previously selected item. Here is their sample dropdown code (i feel it is ok to share the code because it is few lines of plain html only and that too written by me):
Note: In below code, plk-dropdown is like select tag, while plk-option is like option tag. There's nothing special about it.
<plk-dropdown [(ngModel)]="fruit" name="fruit">
<plk-option [value]="'apple'">Apple</plk-option>
<plk-option [value]="'pear'">Pear</plk-option>
<plk-option [value]="'melon'">Melon</plk-option>
</plk-dropdown>
So, when I click it first time it is good.But after first click it keeps on selecting the other options along with previous. I looked into their code:
dropdown.js
DropDownComponent.prototype.writeValue = function (value) {
if (this.options) {
this.selectOptionByValue(value);
}
};
and I fixed this bug by adding 1 line of code:
DropDownComponent.prototype.writeValue = function (value) {
if (this.options) {
this.clearSelectedOptions(); // THIS I ADDED
this.selectOptionByValue(value);
}
};
Now the compoenent is working but the problem is that I can't make changes to their js file. Firstly, I'm not supposed to do so. Secondly, if in future we update our repositories, that bug will come back.
Is there any way I can fix this with my typescript code. I cant implement jquery in between. I tried this:
How to clear all selected items in a SELECT input using jQuery?
Please help me. I'm blocked because of this. I really need help.
I use a null option so when the dropdown has no values unselected option is selected , I thing it 's related to primeng the set the first option as selected even the value don't match with ngModel property I have create a demo to show this but so far that how we solve abd this will give to the use an option to undo the selection in case this was not required.
<plk-dropdown [(ngModel)]="fruit" name="fruit">
<plk-option [value]="null">Unselected</plk-option>
<plk-option [value]="'apple'">Apple</plk-option>
<plk-option [value]="'pear'">Pear</plk-option>
<plk-option [value]="'melon'">Melon</plk-option>
</plk-dropdown>
demo 🚀
In my angular 1.5 html5 application, I have an accordion group and inside it's body I have Couple of check-boxes. Since direct scope binding will not work inside accordion, I'm using ng-click event as attached.
This works as expected, I'm getting click events with correct value.
I have another reset button on screen, when user clicks this button I have to reset all filters including the checkbox inside the accordion. Even after I reset the model value to false, checkbox still shows as checked. I know this is because the binding is not there.
How can I update the checkbox value from javascript. Is there any angular way. I'm not a big fan of JQuery.
Regards,
Nixon
We faced a similar issue with the data bindings while using accordian.
Instead of using directly model variable, we created an object of it.
For eg, instead of using $scope.includeLocalParties, try using $scope.checkbox.includeLocalParties.
Also initialize it in your controller. Something like this:
$scope.checkbox = { includeLocalParties : false};
Hope it helps!
I noticed that when I use valueAllowUnset: true with the Select2 plugin, the default value is not visible in the select box. However, when I click on the select, the correct value is highlighted.
http://jsfiddle.net/LgXcb/
Try removing ', select2: {}' from the above fiddle to see how it should work.
Any ideas on what's causing this issue? Does it have to do with the select2 custom binding function I'm using for Knockout?
It seems that I always end up finding a solution right after setting up a bounty, even if I wait months before starting that bounty.
The problem was with the code inside the update function of my custom binding. After the observable value of the select changes, I also need to manually update select2, like so:
update: function(element, valueAccessor, allBindingsAccessor) {
var value = ko.utils.unwrapObservable(allBindingsAccessor().value || allBindingsAccessor().selectedOptions);
if (value) $(element).select2('val', value);
}
Working code: http://jsfiddle.net/LgXcb/5/
Interestingly, your setTimeout call is causing issues. Why? I'm not sure yet, but if you remove that and make a direct call to getSemesters() at the end of the function, it will select the initial value selected.
fiddle
I will keep looking at it and update you if I find the exact cause of this.
Update
It is amazing what you can find when you look at the github for the select2 plugin.
I'm having a difficulty using the jQuery combobox widget as mentioned here:
I'm using jQuery to load the options for the select using ajax, which means that upon creation of the combobox, there are no options in it. When I get the values from the ajax call, I set the first option to be be selected. This works fine for the underlying select, but not for the input-field which jQuery combobox has added.
I've seen the solution here but this will not work if the options are added after _create is called(also, it is kinda outdated since the widget by default handles this).
As far as I can tell, there are no relationsship between the underlying combobox and the input-field that makes the one update the other. Or am i wrong here?
Regards,
Runar
ok..solved this myself adding the following code snippet in _create :
select.change(function() {
var selected = select.children( ":selected" );
input.val(selected.val() ? selected.text() : "");
});
Then invoked change on the combo after values had been populated.