Question

I’m using bsmSelect jQuery plugin. Basically, what it does is changing the way a select-multiple is rendered to make easier to pick up the options. It hides the select element and shows a list instead.

So, first of all I’m applying the plugin function to my select-multiple element:

$(document).ready(function() {
  ...
  $('#my_select_multiple').bsmSelect({
    plugins: [$.bsmSelect.plugins.sortable()],
    title: 'Add',
    removeLabel: 'Remove'
  });
  ...
});

On the other way, I have another select element (this one is simple) which has an ajax request bind to its change event. This ajax request get new #my_select_multiple options depending on the select simple value. Ajax response is the new HTML for #my_select_multiple options. So I have:

function getNewOptions(val) {
  var r = $.ajax({
    type: 'GET',
    url: /*My URL*/
  }).responseText;
  return r;
}

...

$(document).ready(function() {
...
  $('#my_select_simple').change() {
    $('#my_select_multiple').html(getNewOptions($(this).val()));
  }
...
});

AJAX is working as expected. New options are got correctly and they are inserted into #my_select_multiple (which is hidden by bsmSelect plugin, but I can check it with Firebug). But bsmSelect didn’t realize new changes and doesn’t get updated.

So, I think what I want is to reapply $('#my_select_multiple').bsmSelect(); with its new options.

I’ve been looking around a little bit and here is what I have tried.

1. I’ve tried to call again the funcion with the success and complete (one at time) of the AJAX request. Didn’t work:

function getNewOptions(val) {
  var r = $.ajax({
    type: 'GET',
    url: /*My URL*/,
    success: function() { $('#my_select_multiple').bsmSelect(); }
  }).responseText;
  return r;
}

2. I’ve tried to bind the function with the on jQuery function. Didn’t work:

$('#my_select_simple').on('change', function() {
  $('#my_select_multiple').bsmSelect();
});

3. I’ve tried 1 and 2 removing previosly the HTML generated by bsmSelect. Didn’t work.

Thank you very much.

UPDATE: The exact code

First I have a global.js file which apply bsmSelect plugin to some select multiples (.quizzes):

$('.quizzes').bsmSelect({
  plugins: [$.bsmSelect.plugins.sortable()],
  title: 'Add',
  removeLabel: 'Remove'
});

And then, in the php file I define the updateQuizzes function and bind it to the select simple (project_id) change event:

<script type="text/javascript">
  function updateQuizzes(project_id) {
    var r = $.ajax({
    type: 'GET',
url: '<?php echo url_for('event/updateQuizzes')?>'+'<?php echo   ($form->getObject()->isNew()?'':'?id='.$form->getObject()->getId()).($form->getObject()->isNew()?'?project_id=':'&project_id=')?>'+project_id,
    success: function() { $('.quizzes').bsmSelect({
      plugins: [$.bsmSelect.plugins.sortable()],
      title: 'Add',
      removeLabel: 'Remove'
    }); }
  }).responseText;
  return r;
  }

  $('#project_id').change(function(){
    $('.quizzes').html(updateQuizzes($(this).val()));
  });
</script>

As I told, the AJAX request works without problems, but not the calling bsmSelect the second time…

Answer 1

Ok, I opened a ticket and bsmSelect developer has answered me in minutes. Great!

To let bsmSelect know about its select changes, you have to trigger a change event on the select. There is no need to call bsmSelect again.

So it can be that way:

function loadNewOptions(val) {
  var r = $.ajax({
    type: 'GET',
    url: /*My URL*/,
    success: function(data) {
      $('#my_select_multiple').html(data).trigger('change');
    }
  }).responseText;
  return r;
}

$('#my_select_simple').change(function() {
  loadNewOptions($(this).val());
});