CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
GLK
GLK

Reputation: 1035

jquery attribute selector is not working for data-attribute

I know it could be duplicate of SO questions Selecting element by data attribute and jQuery how to find an element based on a data-attribute value?

But still I am not able to select all elements where an attribute "data-value" exist.

Issue : I am expecting statement B) $('[data-value]') or $('*[data-value]*') should return all elements which have data attribute "data-value", but it returns nothing.

However statement A) $('#openingBalAccount').data('value') getting result "ACC-2".

If statement A above works, then statement B should also work, but its not happening.

Below is the Chrome Dev Tool screen for the same, consider first 2 statements in screen as Statement A above, and rest as Statement B. As stated above if statement A works,statement B also should work.

enter image description here

Dev Tool example should be more than sufficient to identify any issue, but if you still insist for the code, here it is.

Jquery Statement to set data-value

$('#accountsModalSelect').on('click', function onAccountsModalSelect() {
    let rowData = $('#accountsModalSelect').data('selected')
    if (rowData) $('.accountSource').val(rowData.description).data('value', rowData.account)
    $('#accountsModal').modal('hide')
})

HTML Code in pug format

                    form#openingBalForm
                        input.form-control#openingBalUpdateType(type='hidden')
                        input.form-control#formtab(type='hidden' value='openingbaltab')
                        .row.form-group
                            .col-4
                                labal(for='openingBalFinYear') Financial Year
                            .col
                                input.form-control#openingBalFinYear(name='openingBalFinYear' type='text' )
                        .row.form-group
                            .col-4
                                labal(for='openingBalAccount') Account
                            .col
                                .input-group
                                    input.form-control.accountSource#openingBalAccount(name='openingBalAccount' type='text' )
                                    .input-group-append#openingBalAccountSearch
                                        .input-group-text
                                            .fas.fa-search
                        .row.form-group
                            .col-4
                                labal(for='openingBalAmount')  Amount
                            .col
                                input.form-control#openingBalAmount(name='openingBalAmount' type='number')

Upvotes: 0

Views: 708

Answers (1)

TheWuif
TheWuif

Reputation: 1036

If you want to do something like this, you also have to add the html-attribute to the element. You can't access the internal stored data.

$('#accountsModalSelect').on('click', function onAccountsModalSelect() {
    let rowData = $('#accountsModalSelect').data('selected')
    if (rowData) {
        $('.accountSource')
            .val(rowData.description)
            .data('value', rowData.account)
            .attr('data-value', rowData.account) // Add this
    }
    $('#accountsModal').modal('hide')
})

Upvotes: 1

Related Questions