javascript - 单击按钮填充 Bootstrap 3 模态

Question

我是一名初级网络开发人员，目前正在创建一个动态网站。在这个网站中，我使用 Javascript 来构建我的页面，例如在 var 字符串中输入 HTML 并在必要时调用它加载到页面上。

我正在尝试使用 Bootstrap Modal 的各种形式将数据输入到我的数据库中。这给我带来了一些麻烦，因为我假设某些元素(例如日期选择器)无法正常工作，因为单击按钮时会加载模式，而日期选择器会在页面加载时加载。

无论如何，我只是想知道是否有一种方法可以在单击 Bootstrap 模式按钮时加载内容和我的自定义 Javascript，例如

        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'
});

如您所见，这是一个从数据库中获取信息的选择元素。我想在单击按钮而不是在页面加载时加载。

我的按钮数据目标是“#flightModal”，模式 ID 是“#flightModal”。

如果有人能提供帮助，我将不胜感激。

谢谢

易卜拉欣

Answer 1

您只需在模态创建后初始化您的日期选择器。因此，在 success 回调中构建 DOM，然后像在正常页面加载时一样初始化日期选择器:

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

顺便说一下，如果你正在使用模态，我建议使用 Bootstrap Dialog JavaScript 库，它使以编程方式处理模型变得更加容易。例如，您可以像这样显示一个简单的模态窗口:

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