programmatically changing value of select and checkbox not reflecting in binded data

aubrijesh commented 3 years ago

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 = $(` Selected Option {model.selectedFriend}`) 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.

MrJman006 commented 1 year ago

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>

karneaud commented 1 year ago

Created a test case but could not recreate the issue. Perhaps its an instantiation problem. Feel free to reopen the issue if necessary

blikblum / tinybind

programmatically changing value of select and checkbox not reflecting in binded data #39