I have this angular component on the page which has all the options binded.
Using jQuery, I was able to retrieve the correct selected value with the following:
$('#mat-select').val(); // returns me the id of the selected option
However, when I try to update the value with jQuery, the value is updated but not reflected on the component on the screen.
eg.
$('#mat-select').val(); // eg. returns 'mat-select-option-0'
$('#mat-select').val('mat-select-option-5').trigger('input').trigger('change');
$('#mat-select').val(); // returns me 'mat-select-option-5'
Yet, the selected value on the component still appears to be mat-select-option-0. I am guessing that I am just setting the dom's value attribute and not updating the angular component but couldn't figure out how.
Can someone please advise?
It is not recomended to use jQuery together with Angular, because they bouth are manipulating with dom in their own way try using https://ng-bootstrap.github.io/#/getting-started
That will allow you to avoid many future problems.
Related
I am trying to make a v-radio update a v-model value automatically but cannot get it working.
I have already achieved this with a check box like this:
<v-checkbox
v-model="arr1[index].isDone"
:disabled="checkRecordStatus(index)"
></v-checkbox>
With this code the isDone value for the specific array element is automatically assigned a value of true when the box is checked. That is, I don't need to call a function to set the value on the array element.
I am trying to achieve the same thing with a v-radio. Here is what I have:
<v-radio
v-model="arr1[index].isDone"
#change="radioSelect(index,'true')"
></v-radio>
I can get the value from the radioSelect function and set it on the model from there, but I am wondering if there is a way to do it without creating and calling a function, as with the checkbox example. I assumed that a selected v-radio would just set a true value on whatever was on v-model, but I seem to be missing something. I've had a look at the documentation and can't see anything that handles it.
Thanks for any help in advance!
From the base Vue docs, it looks like the way to override the default behaviour of a radio passing a string value is to also use v-bind:value, so you could do something like this I think (tested with a vanilla Vue2 component)
I am less familiar with Vuetify but if the component can accept v-bind the below should work:
<v-radio
v-model="arr1[index].isDone"
v-bind:value="true"
></v-radio>
https://v2.vuejs.org/v2/guide/forms.html#Radio-1
My goal is to reset selected values in selectize input. I called selectize function in seperate js file (working with Ruby on Rails), so there is no option to create some global selectize input variable (at least I want to avoid it).
In select2 I would solve similar issue like that:
$(".select2").select2("val", "")
but when I call selectize() second time on the input all previous options and collection loaded via ajax just dissappear.
Thanks for help
Selectize uses .selectized as its identifying class.
Unfortunately, selectize is not accessible via $('.selectized').selectize - you need to go directly to the <select>/<input> element - $('.selectized')[0].selectize as shown in the docs.
I don't believe you can access all selectize items at once, you need to iterate through them. I recommend using the map function, such as something like:
$.map($('.selectized'), function(item, index) {
item.selectize.setValue('');
});
I'm having difficulty changing the value of select box in Zurb's foundation. I'm using the custom forms which just hides the actual select box and uses an unordered list as the select box.
My problem is that the usual method of changing the value of select box doesn't work:
$('#selectboxID').val('something')
The code above assumes that the value of each of the options in the select box is the same with the text:
<option value="1">1</option>
I also tried:
$($('.dropdown ul li')[1]).addClass('current')
$($('.dropdown ul li')[0]).removeClass('current') //remove current class from the other one
But it doesn't work either.
There's also alternative use case when you're binding on change event yourself, you might not want to trigger it. Code to just force a refresh on select:
Foundation.libs.forms.refresh_custom_select(#jQueryElement, true)
where #jQueryElement is a original hidden select.
You have to trigger "change" event after changing selected index.
Example:
// Change selected option
$('#selectboxID').val('something');
// Or use selectedIndex: $("#selectboxID")[0].selectedIndex = 0;
// Fire change event
$('#selectboxID').trigger('change');
Hope this helps
There have been some modifications to the way that the change event is handled recently in the Foundation code.
You can still achieve what you want using the trigger() method, but you have to add a 'force refresh' flag:
$('#selectboxID').trigger('change', true);
If you are using Foundation 3:
Updated to the latest Foundation 3 release.
Setting selectedIndex, using JQuery's val() or anything which triggers a change event is working out of the box.
If you are using Foundation 4:
This seems to be a regression. As a - hopefully temporary - workaround you can force to update the custom select by using the refresh_custom_selection method, e.g.:
Foundation.libs.forms.refresh_custom_selection($('select'))
Note: It is refresh_custom_selection, not refresh_custom_select!
It is not necessary to use the latter (or trigger('change', true)) because they both completely rebuild the custom select, i.e. they re-copy your select options which involves lots of DOM manipulation and it can slow things down a lot. (Depending on the size of your select options and your other code)
On the other hand refresh_custom_selection just updates the displayed value which is a much more lightweight operation.
PS: Instead of refresh_custom_selection you could also use
$('a.current', $select.next()).text($('option:selected', $select).text());
But that code makes assumptions on the generated HTML, so it is better to stick to the provide utility methods
It would be little complicated. Suppose I have a select list with items as status.I select a status and do some modification in the page, when I change to different status all the modificatiions which I did for previous selected status should be saved and send to a servlet. I was trying to do using change() , but it was taking current select field. and Also page relaods when status from the select is is changed thats y all the previous selected fields value also get lost.
Do anyone have ides of how to do it using jquery/Javascript as if I get the value I can pass to the servlet.
Basically I work on component based java using Apache Click framework. If some can relate with that too it would be great help too.
basically you need to store the previous value yourself and keep track of it, something like that:
var $selectElement = $("#selectElement");
$selectElement.change(function () {
var previousValue = $selectElement.data("previous");
//do something with previous value
$selectElement.data("previous",
$selectElement.find("option:selected").val);
}).change();
a quick example http://jsfiddle.net/dCkwd/
Try storing the values in a cookie with the jQuery $.cookie plugin and updating the cookie on change(). You can then access the latest cookie value.
I hope this helps!
I have a dropdown field and its value is pre-selected as soon as its rendered (Say, its a Country field in a signup form). And I have other dropdowns or other components which change the selected value of the first dropdown dynamically. Now I want to fire a method with every "value getting selected" in the dropdown. Is it possible?
To put my question in much more clearer way, I want to create a onDefaultValueSet event and subscribe the first dropdown to it. So in which ever way the dropdown gets any value selected, the corresponding handler (my function) gets called.
I tried to do it with YUI Custom Events, but I am not sure how the browser will be calling(understanding) my handler every time a value is selected in the dropdown.
onSelect (from Default DOM) is not a right answer I guess, as I tried it.
Please help me in tackling this problem.
I am not sure whether this is an answer, but I've found a workaround. Please validate this.
So I was making a item "selected" using javascript-dom manipulation. Meaning, using
domElement.options[5].selected = True;
So with the (YUI)custom event I created, I started calling "fire()" right after this. So the code becomes:
domElement.options[5].selected = True;
onDefaultValueSetEvent.fire(domElement.name);
But I am not sure, what if the particular option is selected in a gui fashion. Meaning, how automatically fire() method is called