Uncaught Error:cannot call methods prior to initialization;

Question

I m calling a form in a popup using bootbox

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

in the form there is a a pallete collor picker(evol colorpicker)

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

The first time the form popup opens the pallete for color pick displays ok but only for one time. After that if i close the popup and open it again when pressing for the color pick pallete getting the error
Uncaught Error: cannot call methods on colorpicker prior to initialization; attempted to call method 'hidePalette'

Reading similar questions i think i ve to destroy the bootbox popup so in the callback of bootbox tried $(this).empty or $(this).remove() but didnt work

This is my form in a html file with some js

<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>  

With a click the the form is returned from an ajax call

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

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

                                }
                            });  

To get the form in popup i m using bootbox

Answer 1

I'm assuming that you're using this to load the modal with remote content:

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

If so, I would use the show.bs.modal method as the point where you trigger the colorpicker:

$.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();
        });

    }
});

I've also tweaked your example to use an options object, as shown in the documentation.

It's worth noting that there are size options for Bootstrap modals as of 3.1.0, which you can apply as you were with your largeWidth class, or you can use the equivalent size option as noted in the Bootbox docs I linked to previously.