Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Marcelo Retana
2,534 PointsIssue calling a modal from external .html (Bootstrap / JS)
Hey guys, I have a little inconvenience here trying to call a modal from an external .html file
<!--modal-->
<div class="modal fade didi-modal add-event-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="add-event-content">
<div class="didi-modal-header">
<h2 class="event-modal-header">Agregar Evento</h2>
<a class="didi-modal-close"><span><i class="glyphicon glyphicon-remove"></i></span></a>
</div>
<form role="form" method="POST" action="/events">
<div class="form-group">
<label for="inputNombreEvento">Nombre del Evento</label>
<input type="text" class="form-control" id="inputNombreEvento" placeholder="" name="events[eventName]" required>
</div>
<div class="form-group">
<label for="inputInformacion">Información</label>
<textarea class="form-control" rows="3" name="events[information]" required></textarea>
</div>
<div class="form-group no-margin">
<label for="inputLocacion">Dónde?</label>
<input type="text" class="form-control" id="inputLocacion" placeholder="" name="events[where]" required>
</div>
<div class="map-container-modal">
<div id="map-canvas"></div>
</div>
<div class="date-time-container">
<div class="container datetimer-label-container">
<div class="row">
<div class="col-md-3"><label>De:</label></div>
<div class="col-md-3"><label>A las:</label></div>
<div class="col-md-3"><label>Hasta la(s):</label></div>
<div class="col-md-3"><label>Del:</label></div>
</div>
</div>
<div class="container datetimer-input-container-group">
<div class="row ">
<div class="col-md-3 datetimer-input-container-col">
<input type="text" class="date start" required/>
<span class="didi-calendar-ico start"></span>
</div>
<div class="col-md-3 datetimer-input-container-col">
<input type="text" class="time start" required/>
<span class="didi-chevron"></span>
</div>
<div class="col-md-3 datetimer-input-container-col">
<input type="text" class="time end" required/>
</div>
<div class="col-md-3 datetimer-input-container-col">
<input type="text" class="date end" required/>
<span class="didi-calendar-ico end"></span>
</div>
</div>
</div>
</div>
<div class="button-container">
<button type="submit" class="btn btn-primary cancel-btn pull-left">Cancelar</button>
<button type="submit" class="btn btn-primary accept-btn pull-right">Aceptar</button>
<% if (typeof success === true) { %>
<p class='error'>Evento creado correctamente</p>
<% } %>
</div>
</form>
</div>
</div>
</div>
<!--modal end-->
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- build:js scripts/main.js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/datepair.js/dist/datepair.js"></script>
<script src="bower_components/datepair.js/dist/jquery.datepair.js"></script>
<script src="bower_components/jquery-timepicker-jt/jquery.timepicker.js"></script>
<script src="bower_components/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="bower_components/seiyria-bootstrap-slider/js/bootstrap-slider.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/carousel.js"></script>
<script src="javascripts/main.js"></script>
<script src="javascripts/modals.js"></script>
<!-- endbuild -->
<!-- build:js scripts/plugins.js -->
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/modal.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/dropdown.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/collapse.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/transition.js"></script>
<!--endbuild-->
and this is the modal functionality
var DiDiModals = {
settings: {
},
addEvent: function (){
$(".add-btn.event-btn").on("click", function(){
// change modal header add or edit event
$(".add-event-modal .event-modal-header").text("Agregar Evento");
$(".didi-modal.add-event-modal").modal({
backdrop: true,
show: true,
closable: true
});
$(".didi-modal.add-event-modal").modal("show");
// initialize map, date time controls
DiDiSearchPlaceMap.init();
eventModalDateTimeInit();
});
$(".didi-modal-close").click(function() {
$(".didi-modal.add-event-modal").modal("hide");
});
}
I do not know whether I am doing something wrong with the library files or what, the console is not giving me any error.
1 Answer
miguelcastro2
Courses Plus Student 6,573 PointsIf you are loading a modal from external file you need to ensure that the contents of that file are included in the final HTML that is generated. So either you need to make sure you include the external file, process it, and add it to the HTML you are working with, or load the external file via AJAX, add the contents of the file to your current HTML, and then you will be able to access the modal.
The basic problem is that the modal is not part of the DOM you are currently working with and hence why the jQuery events do not work.