How do I populate a modal body with the returned data from a getJson click event (fired from href)?
Question
I dynamically build a table based on queried data. In part of this table I am also building URL's from parts of the query to get additional data from other sources via API calls. My goal is to allow the user to click on an icon, which will fire a getJson call to an endpoint and present that data in the modal. I have the modals built fine. Each icon has a dynamically generated URL which is fine. I just can't get the returned json to display in the modal-body div. It's important that the getJson is only fired if the user clicks on the icon since there are multiple endpoints and I don't want to build the entire page at initial creation since each record would require many separate queries and the user may not want all the info. I have multiple working versions: one which builds and queries all the data at generation which is really inefficient, and another that gets the content via a Python function but that requires server to client which is also inefficient so am trying to put it solely on the client side. I've read through - Implement a loading indicator for a jQuery AJAX call and show bootstrap modal after content is loaded but not getting my answer out of them. Example:
<!doctype html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type = "text/javascript" language="javascript">
$("#fetchEvents").click(function(){
var url = "http://time.jsontest.com"
$.getJSON(url, function(eventData) {
$('.modal-body').html('<p> Events: ' + eventData + '</p>')
});
});
</script>
</head>
<body>
<h1> testing json to modal </h1>
<div class="row justify-content-center">
<a href="#events" data-toggle="modal" id="fetchEvents">
<img src="../static/img/icon-events-color.png" title="Events" style="width:22px;height:22px;">
</a>
</div>
<div id="events" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Possible Events</h4>
</div>
<div class="modal-body" id="event_id">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks for any help.
1 answers
solution1
1 ACCPTED 2019-11-24 17:50:28
This code will work for you
<!doctype html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1> testing json to modal </h1>
<div class="row justify-content-center">
<a href="#events" data-toggle="modal" id="fetchEvents">
<img src="../static/img/icon-events-color.png" title="Events" style="width:22px;height:22px;">
</a>
</div>
<div id="events" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Possible Events</h4>
</div>
<div class="modal-body" id="event_id">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type = "text/javascript" language="javascript">
$("#fetchEvents").click(function(){
var url = "http://time.jsontest.com"
$.getJSON(url, function(eventData) {
$('.modal-body').html('<p> Events: ' + eventData + '</p>')
});
});
</script>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.