how can i use a javascript function to programatically add the header and body content of a materialize css modal when when a button is clicked

I am trying to dynamically add content to a materialize modal in a laravel project. i pass a function on the onclick event in a button that runs if the number of items is greater than 1, the modal displays options pulled from the database for the user to select one. so far i haven't seen a solution to this online html:

<a class= "btn theme-light-green modal-trigger" itemprop="url"  href="" onclick="">Book</a>`<div id="pub_hall_select" class="modal">
<div class="modal-content">
  <h4 class="modal-title" id="myModalLabel2"></h4>
  <div class="modal-body"></div>
</div>
<div class="modal-footer">
  <a href="#!" type="button" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>

`

javascript:

function openHallSelectModal(id, venue_slug) {
$.ajax({
method: 'POST',
url: urlGetHalls,
data: {venue_id: id, _token:token},
success: function(msg) {
    console.log(msg['halls']);
    $(".modal-title").html("<h3>Select a hall</h3>" );
    var halls = [];
    for (var i=0; i < msg['halls'].length; i++) {

        halls[i] = "<p><a href=\"booking/"+ venue_slug + "/" + msg['halls'][i].slug +"\">" + msg['halls'][i].name + "</a></p>";

    }
    $(".modal-body").html(halls);
    /*$("#pub_hall_select").openModal();*/
    /*$('#pub_hall_select').modal('open');*/
    $(document).on('load',function() {
    $('#pub_hall_select').modal('open');
});
},
error: function(e) {
       console.log('got here f'); 
}

}); }

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2qqtaK0
via IFTTT