Question

我使用bootbox在弹出窗口中调用表单

bootbox.alert(myform, function () {
  }).find("div.modal-dialog").addClass("largeWidth");

在表格中有一个托盘collor选择器（evol colorpicker）

$(document).ready(function () {
    $("#cd_bundle_entitiesbundle_call_Color").colorpicker();
 });

表单弹出窗口第一次打开颜色选择的托盘显示正常但只有一次。之后如果我关闭弹出窗口并在按下颜色选择托盘时再次打开它会出现错误
未捕获错误：在初始化之前无法调用colorpicker上的方法;试图调用方法'hidePalette'

阅读类似的问题，我认为我要销毁bootbox弹出窗口，所以在bootbox的回调中试过$（this）.empty或$（this）.remove（）但是没有工作

这是我在带有一些js

的html文件中的表单

<div class="col-lg-6">

        {{ form_start(form, {'action': path('calls_edit_exec'),'attr': {'class': 'callform'} } ) }}
        <fieldset>

            {{ form_errors(form) }}
            <div class="row">
                <label class="col-md-3">Requestor</label>
                <label class="input col-md-5">{{ form_widget(form.Requestor) }}</label>
                <span id="inforeq" class="inforeq fade info  alert-success" ></span>

            </div>

            <div class="row">
                <label class="col-md-3">CallStatus</label>
                <label class="input col-md-5">{{ form_widget(form.CallStatus) }}</label>
            </div>

            <div class="row">
                <label class="col-md-3">Color</label>
                <label class="input col-md-5">{{ form_widget(form.Color) }}</label>
            </div>

            <span class="fade">
                <input id="mycolor" class="colorPicker evo-cp0" />
            </span>

            <div class="row">
                <label class="col-md-3">AssignedTo</label>
                <label class="input col-md-5">{{ form_widget(form.AssignedTo) }}</label>
                <span id="infouser" class="infouser fade info  alert-success" ></span>
            </div>

            <div class="row">
                <label class="col-md-3">Category</label>
                <label class="input col-md-5">{{ form_widget(form.CallCategory) }}</label>
                <span id="infouser" class="infouser fade info  alert-success" ></span>
            </div>

            <div class="row col-lg-12">
                <div class="row">
                    <label class="col-md-3">Call Problem</label>
                </div>
                <div class="row">
                    <label class=" textarea col-md-12">{{ form_widget(form.CallProblem) }}</label>
                </div>
                <div class="row">
                    <label class="col-md-3">Call Solution</label>
                </div>
                <div class="row" >
                    <label class="textarea col-md-12">{{ form_widget(form.CallSolution) }}</label>
                </div>
                <div class=" form-control">
                    <input class="form" type="checkbox" name="createready" id="createready">Make this Ready Call/Solution<br>
                </div>
            </div>

        </fieldset>
        {{ form_end(form) }}
    </div>
 <script>
        $(document).ready(function () { $("#cd_bundle_entitiesbundle_call_Color").colorpicker();
   }); </script>

单击该表单将从ajax调用返回

$.ajax({
                                url: url,
                                success: function (data) {
                                    bootbox.alert(data, function () {

                                       // $this.empty();
                                    }).find("div.modal-dialog").addClass("largeWidth");

                                }
                            });

要使用bootbox

弹出窗体

Answer 1

我假设您正在使用它来加载具有远程内容的模态：

$.ajax({
    url: url,
    success: function (data) {
        bootbox.alert(data, function () {
           // $this.empty();
        }).find("div.modal-dialog").addClass("largeWidth");
    }
});

如果是这样，我会使用show.bs.modal方法作为触发颜色选择器的点：

$.ajax({
    url: url,
    success: function (data) {
        bootbox.alert({ 
            message: data, 
            callback: function () {
               // do something when dismissing the alert
            },
            className: 'largeWidth'
        })
        .on('show.bs.modal', function(){
            $("#cd_bundle_entitiesbundle_call_Color").colorpicker();
        });

    }
});

我还调整了您的示例以使用选项对象，如documentation所示。

值得注意的是，自3.1.0开始，Bootstrap模式有size options，您可以像使用largeWidth类一样应用，或者可以使用等效的size我之前链接的Bootbox文档中提到的选项。

未捕获错误：无法在初始化之前调用方法;

1 个答案: