0

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')
GLK
  • 875
  • 2
  • 9
  • 25
  • 4
    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 Jul 17 '20 at 09: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"; })` – freedomn-m Jul 17 '20 at 09: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 Jul 18 '20 at 02:06

1 Answers1

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')
})
TheWuif
  • 988
  • 6
  • 11
  • thanks - it did worked, added to html code like `(name='openingBalAccount' type='text' data-value='')` – GLK Jul 18 '20 at 03:07