how to pass data-attribute over url in materialize's modal

Question

Description I use materialize I create a button that opens a modal and passes data through data-att but it does not work.

What I want when I click this link

<a  id="test" data-target="modalEditClient" href="#modalEditClient" class="modal-trigger waves-effect waves-light"
                                   data-idClient="{{$client->id}}" data-nom="{{$client->nom}}" data-prenom="{{$client->prenom}}"
                                   data-adresse="{{$client->adresse}}" data-tel1="{{$client->tel1}}" data-tel2="{{$client->tel2}}"
                                   ><i class="material-icons">mode_edit</i></a>

want to pass the data to modal my Js code

$('.modal-trigger').leanModal({
        ready: function(e) {
            $(this).find('input[name="nom"]').val($(e.relatedTarget).data('nom'))
        }
    })

Answer 1

As you can see in documentation the ready does not take any parameter.

So said, you can move your ready code in a new event handler attached to the anchor:

$('.modal-trigger').leanModal();

$('.modal-trigger').on('click', function(e) {
  $('#modalEditClient').find('input[name="nom"]').val($(this).data('nom'))
})

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

<a  id="test" data-target="modalEditClient" href="#modalEditClient" class="modal-trigger waves-effect waves-light"
    data-idClient="{{$client->id}}" data-nom="MON" data-prenom="{{$client->prenom}}"
    data-adresse="{{$client->adresse}}" data-tel1="{{$client->tel1}}" data-tel2="{{$client->tel2}}"
        ><i class="material-icons">mode_edit</i></a>


<!-- Modal Structure -->
<div id="modalEditClient" class="modal">
    <div class="modal-content">
        <h4>Modal Header</h4>
        <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
        <input type="text" name="nom">
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>

In current materialize version (0.98.2) leanModal does not exist any more and you need to use modal. In this version the ready callback exists and so you can write:

$('.modal').modal({
    ready: function(modal, trigger) {
        modal.find('input[name="nom"]').val(trigger.data('nom'))
    }
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>


<a  id="test" data-target="modalEditClient" href="#modalEditClient" class="modal-trigger waves-effect waves-light"
    data-idClient="{{$client->id}}" data-nom="MON" data-prenom="{{$client->prenom}}"
    data-adresse="{{$client->adresse}}" data-tel1="{{$client->tel1}}" data-tel2="{{$client->tel2}}"
        ><i class="material-icons">mode_edit</i></a>


<div id="modalEditClient" class="modal">
    <div class="modal-content">
        <h4>Modal Header</h4>
        <p>A bunch of text</p>
        <input type="text" name="nom">
    </div>
    <div class="modal-footer">
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>