everyone.
I’m trying to use Bootstrap 5 (no jQuery!) to open a remote file as a modal and pass a variable (via $_GET in the URL) to that remote file. I’ve gotten the following code to load the variable length contents of the remote file; however, there are several problems:
- The code seems way to complex when the end goal is to simply have a modal button on one page open a modal that is housed on another page.
- The code requires that Bootstrap be loaded twice.
- Other javascript tools (such as Toms-Select in my example), do not work when loaded from test.html, but do work when testmodal.php?data1=OPTION3 is loaded directly.
I’ve tried everything–including opening the remote file as an iframe–but nothing really works. For example, the iframe solution can’t vary the height of the modal-body based on the contents of the external file.
I would appreciate any help…
Richard
test.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#optionModal" data-bs-id="testmodal.php?data1=OPTION1">Modal: Option1</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#optionModal" data-bs-id="testmodal.php?data1=OPTION2">Modal: Option2</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#optionModal" data-bs-id="testmodal.php?data1=OPTION3">Modal: Option3</button>
<div id="optionModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
</div>
</div>
</div>
<script>
function loadContent(url) {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if(httpRequest.readyState === XMLHttpRequest.DONE) {
if(httpRequest.status === 200) {
updateModal(httpRequest.responseText);
}
}
};
httpRequest.open("GET", url, true);
httpRequest.send();
};
function updateModal(response) {
var optionModal = document.getElementById("optionModal");
optionModal.querySelector(".modal-content").innerHTML = response;
}
document.addEventListener("DOMContentLoaded", function() {
optionModal.addEventListener("show.bs.modal", function() {
var button = event.relatedTarget
var id = button.getAttribute('data-bs-id')
loadContent(id);
});
});
</script>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</html>
testmodal.php:
<?
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<?
$data1 = $_GET['data1'];
if($data1=="OPTION1"){
?>
<p>This is option 1! Do some cool stuff for that option here!</p>
<?
}elseif($data1=="OPTION2"){
?>
<p>This is option 2! Do some cool stuff for that option here!</p>
<p>This is option 2! Do some cool stuff for that option here!</p>
<p>This is option 2! Do some cool stuff for that option here!</p>
<p>This is option 2! Do some cool stuff for that option here!</p>
<p>This is option 2! Do some cool stuff for that option here!</p>
<?
}elseif($data1=="OPTION3"){
?>
<p>This is option 3! Do some cool stuff for that option here!</p>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js"></script>
<select class="form-select" id="select-clients" name="cname"></select>
<script>
new TomSelect('#select-clients',{
maxItems: 1,
maxOptions: 10,
valueField: 'value',
labelField: 'text',
options: [{value: "sc123",text: "Joe Smith"},{value: "sc234",text: "Jane Doe"}],
create: false
});
</script>
<?
}
?>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</html>