I have a bootstrap 2.32 modal which I am trying to dynamically insert into the HTML of another view. I'm working with Codeigniter 2.1. Following Dynamically inserting a bootstrap modal partial view into a view, I have:
<div id="modal_target"></div>
as the target div for insertion. I have a button in my view that looks like:
<a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>
My JS has:
$.ajax({
type : 'POST',
url : "AjaxUpdate/get_modal",
cache : false,
success : function(data){
if(data){
$('#modal_target').html(data);
//This shows the modal
$('#form-content').modal();
}
}
});
The button of the main view is:
<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>
Here is what I'd like to store separately as a partial view:
<div id="form-content" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Send me a message</h3>
</div>
<div class="modal-body">
<form class="contact" name="contact">
<fieldset>
<!-- Form Name -->
<legend>modalForm</legend>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="user">User</label>
<div class="controls">
<input id="user" name="user" type="text" placeholder="User" class="input-xlarge" required="">
<p class="help-block">help</p>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="old">Old password</label>
<div class="controls">
<input id="old" name="old" type="text" placeholder="placeholder" class="input-xlarge">
<p class="help-block">help</p>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="new">New password</label>
<div class="controls">
<input id="new" name="new" type="text" placeholder="placeholder" class="input-xlarge">
<p class="help-block">help</p>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="repeat">Repeat new password</label>
<div class="controls">
<input id="repeat" name="repeat" type="text" placeholder="placeholder" class="input-xlarge">
<p class="help-block">help</p>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<input class="btn btn-success" type="submit" value="Send!" id="submit">
<a href="#" class="btn" data-dismiss="modal">Nah.</a>
</div>
</div>
When I click the button, the modal is inserted correctly, but I get the following error:
TypeError: $(...).modal is not a function
How can I fix this?
The $(…). modal is not a function is usually caused because scripts are loaded in the wrong order . The browser will execute the scripts in the order it finds them. If in a script you attempt to access an element that hasn't been reached yet then you will get an error.
The "createPopper" is not a function error occurs when we use a Bootstrap component that requires the popper. js script, but don't load it on the page or load it after the bootstrap script. To solve the error, include the Bootstrap bundle script before running your JavaScript code.
We can close the modal pop-up in the following ways:modal('hide'); //Using modal pop-up Id.
i just want to emphasize what mwebber said in the comment:
also check if jQuery is not included twice
:)
it was the issue for me
This error is actually the result of you not including bootstrap's javascript before calling the modal
function. Modal is defined in bootstrap.js not jQuery. It's also important to note that bootstrap actually needs jQuery to define the modal
function, so it's vital that you include jQuery before including bootstrap's javascript. To avoid the error just be sure to include jQuery then bootstrap's javascript before you call the modal
function. I usually do the following in my header tag:
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/bootstrap/js/bootstrap.min.js"></script>
</header>
After linking up your jquery and bootstrap write your code just below the Script tags of jquery and bootstrap.
$(document).ready(function($) {
$("#div").on("click", "a", function(event) {
event.preventDefault();
jQuery.noConflict();
$('#myModal').modal('show');
});
});
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With