javascript - Uncaught Error:cannot call methods prior to initialization; -

i m calling form in popup using bootbox

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

in form there pallete collor picker(evol colorpicker)

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

the first time form popup opens pallete color pick displays ok 1 time. after if close popup , open again when pressing color pick pallete getting error
uncaught error: cannot call methods on colorpicker prior initialization; attempted call method 'hidepalette'

reading similar questions think ve destroy bootbox popup in callback of bootbox tried $(this).empty or $(this).remove() didnt work

this form in html file 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 ready call/solution<br>                 </div>             </div>          </fieldset>         {{ form_end(form) }}     </div>  <script>         $(document).ready(function () { $("#cd_bundle_entitiesbundle_call_color").colorpicker();    }); </script>   

with click the form returned ajax call

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

to form in popup m using bootbox

i'm assuming you're using load modal remote content:

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

if so, use show.bs.modal method point trigger colorpicker:

$.ajax({     url: url,     success: function (data) {         bootbox.alert({              message: data,              callback: function () {                // when dismissing alert             },             classname: 'largewidth'         })         .on('show.bs.modal', function(){             $("#cd_bundle_entitiesbundle_call_color").colorpicker();         });      } }); 

i've tweaked example use options object, shown in documentation.

it's worth noting there size options bootstrap modals of 3.1.0, can apply largewidth class, or can use equivalent size option noted in bootbox docs linked previously.