javascriptjquerygetjsonbootstrap-multiselect

Multiselect js append with getJson not displaying any option

Im probably doing something wrong inside the function but I don't know what it is. So, I want to display the options after executing getJSON, I want them to be displayed inside a select in the form of a checkbox. This is my code:

<div class="form-group">
  <label>Forma de pago</label>                                                  
  <select id="formaPago" name="formaPago[]" class="form-control listado-metodosPago" autocomplete="off" multiple="multiple"></select>
</div>

$(".listado-metodosPago").ready( function(){
   $(".listado-metodosPago").append('<option value="">Seleccione una opción</option>');
   $.getJSON( url2 + "Clientes/lista_metodosPago").done( function( data ){
      $.each( data, function( i, v){
         event.preventDefault();
         jQuery.noConflict();
         $(".listado-metodosPago").append('<option value="'+v.id_opcion+'" data-value="'+v.id_catalogo+'">'+v.nombre+'</option>');
      }); 
   });
   $(".listado-metodosPago").multiselect('refresh');
});

I try to use

$(".listado-metodosPago").multiselect('refresh');

I try to put it inside getJSON, but when i do that it doesn't recognize the '$(...).multiselect' function

Also I try to use:

$(".listado-metodosPago").multiselect('rebuild');

And this: source of json in Multiselect jQuery

But still it doesn't recognize the '$(...).multiselect' function.

Solution

  • I was able to find an answer that helped me, in case someone goes through the same problem, I had to replace $ for jQuery. In other words, my first try:

    (".listado-metodosPago").multiselect('rebuild');

    And the answer (at least in my case):

    jQuery('#formaPago').multiselect( 'rebuild');

    And the link: https://forum.jquery.com/topic/multiselect-is-not-a-function-error-message-using-jquery-ui-multiselect-widget