I'm having a problem with using jQuery in my Bootstrap modals. That is, the various plugins like autosize for the modal's textarea only works in IE (well, IE 8 and 9 at least) once the modal has been opened twice. For example, if I open the modal once the page has loaded then the autosize plugin doesn't work, however if I then close that modal window and re-open it then it works fine.
Modal markup:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!--- Content dynamically generated --->
</div>
</div>
</div>
Modal opened with:
<a data-toggle="modal" href="Test_Form.cfm" data-target="#myModal" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-plus"></span>Test</a>
Which calls the following jQuery:
$("a[data-target=#addReferralModal]").click(function(e){
e.preventDefault();
var target = $(this).attr("href");
//Load the url and show modal on success
$("#myModal .modal-content").load(target, function(){
//Set the textarea hight and focus etc. once myModal has been displayed
$('#myModal').on('shown.bs.modal', function(){
//Apply form validation
$('form').bootstrapValidator();
//Adjust the textarea's number of rows
$('textarea').autosize();
//Don't allow direct user input in readonly fields
$('.readonly').focus(function(){
this.blur();
});
//Add a datepicker widget for selecting dates
$('.datepicker').datepicker({
//Date format - e.g. 01-Jan-1900
dateFormat: "dd-M-yy",
//When a date is selected revalidate the date field
onSelect: function(){
$('#' + $(this).closest('form').attr('id')).bootstrapValidator('revalidateField', $(this).attr('id'));
}
});
});
$("#myModal").modal("show");
});
});
As you can see, I am trying to add bootstrapValidator, autosize and datepicker to be used by the form in the resultant modal but none of them work in the first time.
The relevant JavaScript and CSS are included in the main .cfm page which contains all of the above HTML and jQuery etc.
This all works fine in Chrome and Firefox so I'm not too sure what the problem might be. It also works fine in IE if I include all of the modal's markup in the main .cfm page and don't open it using a jQuery call, however I don't really want to set it up this way for a couple of reasons like page speed.
