programmatically changing value of select and checkbox not reflecting in binded data
Closed this issue · 2 comments
Hi, Looks like JQuery element trigger is not working as I am unable to see updated value in template when programmatically setting value to dropdown and triggering change. it was working fine with rivets js
Example:
template =
$(<select class="user-list" rv-value="model.selectedFriend"> <option rv-each-friend="model.friends" rv-value="friend.name" rv-text="friend.name"> </option> </select> <span>Selected Option {model.selectedFriend}</span>)
var nObj = {
'selectedFriend': "",
"friends": [{'name': 'one'}, {'name': 'two'}]
}
self.$el.append(template );
tinybind.bind(template , {model: nObj});
When I am using javascript to update dropdown selected value
$('.user-list').val('one').trigger('change');
it is reflecting value in dropdown but not updating value in span.
May be I am doing something wrong. Can someone help me find out what is the issue.
I see you haven't gotten a response for over a year. It seems to work fine in vanilla Javascript. Is it possibly an issue on JQuery's end for triggering events pragmatically?
<script src="https://cdn.jsdelivr.net/gh/blikblum/tinybind/dist/tinybind.js"></script>
<body>
</body>
<script>
var DATA = {
"model": {
"selectedFriend": "",
"friends": [
{ "name": "one" },
{ "name": "two" }
]
}
};
var HTML = `
<span>Selected Friend: {model.selectedFriend}</span>
<select
class="user-list"
rv-value="model.selectedFriend"
>
<option
rv-each-friend="model.friends"
rv-value="friend.name"
rv-text="friend.name"
></option>
</select>
`;
document.body.innerHTML += HTML;
tinybind.bind(document.body, DATA);
window.selectDemo = DATA;
setTimeout(
function()
{
var select = document.body.querySelector(".user-list");
select.value = "one";
select.dispatchEvent(new Event('change'));
},
3000
);
</script>