Populating Bootstrap 3 Modal on Button Click

Question

I am a junior web developer and am currently creating a dynamic website. Within this website I am using Javascript in order to structure my pages eg entering HTML into a var string and calling upon it to load on the page when necessary.

I am trying to use the Bootstrap Modal for various forms to input data into my database. This is giving me some trouble as some elements such as datepicker is not working I assume because the Modal loads on click of the button where as the date picker loads on page load.

Anyway, I just wanted to know if there is a way to have content and my custom Javascript to load when the bootstrap modal button is clicked eg

        var outputContainer1 = $('#selectCraft');
$.ajax(apiPrefix + '/craft' + apiSuffix, {
    error: function() {},
    success: function(data){
        for(var i in data){
            $('#selectCraft').append('<option value="'+ data[i].id +'">'+data[i].aircraft_name+'</option>');
        }
    },
    type: 'GET'
});

As you can see this is a select element that is getting its information from the database. Which I want to load on button click rather then at the page-load.

My data target for the button is "#flightModal" and the Modal ID is "#flightModal".

If anyone can help I would much appreciate.

Thanks

Ibrahim

Answer 1

You just need to initialize your datepicker after the modal is created. So build you DOM in the success callback, then initiaze the datepicker as you would on a normal page load:

success: function () {
    // ...
    $('#datepicker').datetimepicker();
}

By the way, if you are working with modals, I recommend using the Bootstrap Dialog JavaScript library, it makes working with models programmatically much easier. For example you can show a simple modal window like this:

BootstrapDialog.show({
    title: 'Hello World',
    message: 'This is a hello world message'
});