Stephen Forlance
asked on
Ajax call from within modal
Hi all,
Im using Jquery and Bootstrap.
Very simple test set up. I have a page which opens a remote content modal.
In the modal there is a div I wanted updated depending on whats in the select box. At the moment nothing seems to happen, Im guessing this is to do with the way Im initalizing the Jquery functions (ie. the elements dont exist on the page until the initial modal call). Any ideas how to solve this?
This is the page:
This is the modal page:
Im using Jquery and Bootstrap.
Very simple test set up. I have a page which opens a remote content modal.
In the modal there is a div I wanted updated depending on whats in the select box. At the moment nothing seems to happen, Im guessing this is to do with the way Im initalizing the Jquery functions (ie. the elements dont exist on the page until the initial modal call). Any ideas how to solve this?
This is the page:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#thisone").replaceWith("Hello world!");
});
$("#selector" ).change(function() {
if($("#selector").val()=="one") {
$("#question").load("text1.txt");
} else if($("#selector").val()=="two") {
$("#question").load("text2.txt");
}
});
});
</script>
</head>
<body>
<a class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal" href="modal.html">Click to open Modal</a>
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
This is the modal page:
<html>
<body>
<div class="row">
<div class="col-md-6">
This is just test content.
</div>
<div class="col-md-6">
This is just test content.
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>This is a paragraph.</p>
<p id="thisone">This is another paragraph.</p>
<select id="selector">
<option value="one">One</option>
<option value="two">Two</option>
</select>
<div id="question">
Question option goes here.
</div>
</div>
</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
For example:
Open in new window