Link to home
Start Free TrialLog in
Avatar of Stephen Forlance
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:

<!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">&amp;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>

Open in new window



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>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Robert Schutt
Robert Schutt
Flag of Netherlands image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Stephen Forlance
Stephen Forlance

ASKER

Thank you, to complicate things, how would I deal with Jquery content in the remote content?

For example:

<script>
$("button").click(function(){
     $("hereitis").replaceWith("Hello my name is erm!");
});

</script>
<p id="hereitis">Hello</p>
<button id="trigger">Replace the first p element with new text</button>

Open in new window

SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial