This topic contains 4 replies, has 2 voices, and was last updated by Sean Sean 2 years, 6 months ago.

Custom Data attributes on buttons not working in Metronic4.5.6


  • amarbunty
    Participant

    Posts: 13
    Member Reply #6384

    The custom data-attribute like data-id=”3″ not working in metronic theme.

    Reference: http://getbootstrap.com/javascript/#modals-related-target

    Please resolve this issue:

    <span style=”color: #333366; font-family: arial, helvetica, sans-serif; font-size: 13px; line-height: normal;”><</span>a  class=”btn btn-xs red”  data-target=”#modalDelete” data-id=”‘.$row[‘Id’].'” data-name=”‘.$row[‘Name’].'” data-toggle=”modal”> Delete <i class=”fa fa-edit”></i>    </a<span style=”color: #333366; font-family: arial, helvetica, sans-serif; font-size: 13px; line-height: normal;”>></span>

    On click of a button I want to fetch data attributes of button and use its value in a modal for editing or delete a row of a table.

    It returns undefined as a value of a button upon fetching its data.

    $(‘#modalEdit’).on(‘show.bs.modal’, function (event) {

    var button = $(event.relatedTarget) // Button that triggered the modal

    var id= button.data(‘id’) // Extract info from data-* attributes

    alert(id); // shows alert: undefined

    })

    Thanks

    Please resolve it as soon as possible.

    • This topic was modified 2 years, 6 months ago by  amarbunty. Reason: updated code
    • This topic was modified 2 years, 6 months ago by  amarbunty.
    • This topic was modified 2 years, 6 months ago by  amarbunty.
    • This topic was modified 2 years, 6 months ago by  amarbunty.

    amarbunty
    Participant

    Posts: 13
    Member Reply #6389

    button code:

    <\a  class=”btn btn-xs red”  data-target=”#modalDelete” data-id=”‘.$row[‘Id’].'” data-name=”‘.$row[‘Name’].'” data-toggle=”modal”> Delete <i class=”fa fa-edit”></i>    <\/a>

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #6391

    Hi,

    Please try to put the above JS code under document ready event:

    <script> $(‘document’).ready(function() { /// put here the code }); </script>

    As i tested with above fix it should work fine. Please let us know if you need any further clarifications.

    Thanks.


    amarbunty
    Participant

    Posts: 13
    Member Reply #6396

    I have tested this code under document ready function… but it doesn’t worked.

    I am using material design theme layout.

    <script>

    $(‘document’).ready(function () {

    $(‘#modalEdit’).on(‘show.bs.modal’, function (event) {

    var button = $(event.relatedTarget); // Button that triggered the modal

    var id= button.data(‘id’); // Extract info from data-* attributes

    alert(id);

    })

    });

    </script>

    • This reply was modified 2 years, 6 months ago by  amarbunty.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #6407

    Hi,

    If you are using bootstrap extended modal plugin then please note that this plugin is not 100% compatible with native bootstrap modal API.  This is the bootstrap modal plugin’s limitation. If you need any further help can you please provide us a test link to your developing site in a private reply so we can check your code only.

    Thanks.

You must be logged in to reply to this topic.