jquery attribute selector is not working for data-attribute

Question

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.

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')

If it's not in your HTML, then jQuery's .data() will not set an HTML data-* attribute. It will just store the data. If you want to set a data-* attribute, you need .attr('data-whatever', '12345'); — Niet the Dark Absol
– Niet the Dark Absol, Commented Jul 17, 2020 at 9:24
As above, put another way: $().data("key", "value") will store that value internally to jquery, it will not change your HTML, so looking for $("[data-key=value]") will not find it. You could use .filter if there's some other selector option, eg something like $(".class").filter(function() { $(this).data("key") == "value"; }) — fdomn-m
– fdomn-m, Commented Jul 17, 2020 at 9:42
@NiettheDarkAbsol - thanks it did worked, as per your suggestion I included it in html, pug html look like now (name='openingBalAccount' type='text' data-value='') — GLK
– GLK, Commented Jul 18, 2020 at 2:06

TheWuif · Accepted Answer · 2020-07-17 09:48:58Z

1

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')
})

answered Jul 17, 2020 at 9:48

TheWuif

1,0469 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GLK Over a year ago

thanks - it did worked, added to html code like (name='openingBalAccount' type='text' data-value='')

Collectives™ on Stack Overflow

jquery attribute selector is not working for data-attribute

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related