How to pass links to modal triggered by multiple buttons in bootstrap? - triggers

Question

I tried the following code found online to trigger one bootstrap modal with multiple buttons.
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").on('show.bs.modal', function(event){
var button = $(event.relatedTarget);
var titleData = button.data('title');
var kbtext = button.data('whatever');
$(this).find('.modal-title').text(titleData);
$(this).find('.modal-body').text(kbtext);
});
});
</script>
HTML:
<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"
data-whatever="test 1" data-title="Test1">Test 1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"
data-whatever=' Click here'
data-title="Test2">Test 2</button>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="text-align:center;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Modal Window</h4>
</div>
<div class="modal-body">
Test body of modal.
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Send</button>
</div>
</div>
</div>
</div>
The problem is that the modal does not properly display the link in Test 2 button. I tried all types of combinations of quotes and escape codes for quotes that I could think of. Nothing worked. What quotes should I use for data-whatever for the second button, that is for
data-whatever=' Click here'
In particular, the following did not work
data-whatever=" Click here"

Answer 1

In second button you have HTML content data-whatever=' Click here' but you are handling it as .text();
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-whatever=' Click here' data-title="Test2">Test 2</button>
In script just change this .text(kbtext);
$(this).find('.modal-body').text(kbtext);
to this .html(kbtext);
$(this).find('.modal-body').html(kbtext);
You are passing HTML content as text so that's why the link was showing like below in modal body
Click <a href='https://www.math.washington.edu'>here</a>
but you want to show content as HTML then use .html(); method more information and link will show like below in modal body
Click here
so second button will be like
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-whatever="Click <a href='https://www.math.washington.edu'>here</a>" data-title="Test2">Test 2</button>
and Script
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").on('show.bs.modal', function(event){
var button = $(event.relatedTarget);
var titleData = button.data('title');
var kbtext = button.data('whatever');
$(this).find('.modal-title').text(titleData);
$(this).find('.modal-body').html(kbtext);
});
});
</script>
Fiddle Example