issue with select2

Comments

• admin

  October 2019 edited October 2019

  Does it work if you attach data attributes to the element like in the following:

  $fields['states'] = array('type' => 'select2', 'data' => array('maximum-selection-length' => 5, 'maximum-input-length'=>3));
  
• Justyce

  October 2019

  Sorry for the delayed response, Let me give that a try
• Justyce

  October 2019 edited October 2019

  Thanks for the code but I tried it and it still did not work.
  $fields['states'] = array('type' => 'select2', 'data' => array('maximum-selection-length' => 2, 'maximum-input-length'=>3));
• admin

  October 2019

  Another thing you could try is adding the following to the fuel/application/config/custom_fields.php to overwrite the existing configuration for the select2 custom field:

  $fields['select2'] = array(
      'class'     => array(FUEL_FOLDER => 'Fuel_custom_fields'),
      'function'  => 'select2',
      'js' => array(
          FUEL_FOLDER => array(
              'jquery/plugins/select2.min',
          ),
      ),
  
      'js_exec_order' => 1,
      'js_function' => 'fuel.fields.select2',
          'js_params' => array('maximumSelectionLength' => 5, 'maximumInputLength' => 3),
      'css' => array(
          FUEL_FOLDER => array(
              'select2',
          )
      ),
  );
  

  Note the js_params addition to the configuration. That gets converted to a JSON object which gets passed to the select2 as a configuration object in the custom_fields.js select2 function.
• marcus_at_localhost

  September 2020

  Is it possible to add js_param from field definition in the model or the block directly?
  I'd like to use select2 with an ajax request.
• admin

  September 2020

  Not at this time. It's only within the definition of the field type. However, a new field type could probably be created that has maximumSelectionLength and maximumInputLength as field parameters. The function could be modeled off the Fuel_custom_fields::select2 method that would allow for those parameters to be passed (THIS IS REALLY ROUGH UNTESTED CODE):

  public function select2($params = array())
  {
      $form_builder =& $params['instance'];
      if (empty($params['width']))
      {
          $params['width'] = '225px';
      }
      $params['style'] = (!empty($params['style'])) ? $params['style'].'; width: '.$params['width'] : 'width: '.$params['width'];
  
      $params['class'] = (!empty($params['class'])) ? $params['class'].' select2' : 'select2';
      $params['mode'] = 'multi';
      $select2_params = array(
          'maximumSelectionLength' => $params['maximum_selection_length'],
          'maximumInputLength' => $params['maximum_input_length'],
      );
      $params['data'] = array('options' => json_encode($select2_params));
      return $this->inline_edit($params);
          //return $form_builder->create_select($params);
  }
  

  And then in then in a similar javascript function as one found in the custom_fields.js fuel.fields.select2 javascript function, you would add in those as options perhaps using the data-options passed to the form element:

  fuel.fields.select2 = function(context, options){
      if (options){
          var options = $.extend({}, options, );
      } else { 
          options = {};
      }
      $('select.select2_applied', context).select2('destroy').removeClass('select2_applied');
      $('select.select2', context).each(function(){
          options = $.extend(options, JSON.parse($(this).data('options')));
          $('select.select2', context).addClass('select2_applied').select2(options);
  
      });
      fuel.fields.inline_edit_field();
  }
  

  Again, this is me riffing here and rough code, but hopefully to give you an idea of how it could be modified. If you get it working and think it would be a good update to FUEL, let me know and send a pull request.
• marcus_at_localhost

  September 2020

  Thanks for some input, that might makes some things easier or keep some config in the right place. I'll check it out.

  I made a gist with a working approach (it's quite messy, but people who understand Fuel should be able to follow) https://gist.github.com/marcus-at-localhost/16262b75a9a82854fd82474de7d0eb47

  I got it working with Select2 v3 the current version in fuel - but it didn't work well with the inline edit buttons. (Select2 v3 needs a hidden form field for the ajax stuff, instead of select and that throws off the fuel inline edit implementation.)

  With Select2 v4 seems to work ok. I completely overwrite the select2 field to use v4 everywhere. So it works seamless.
  https://gist.github.com/marcus-at-localhost/16262b75a9a82854fd82474de7d0eb47#file-custom_fields-php-L66

  Right now I'm just evaluating my options, so it's not thought through and I don't feel comfortable to send those pull requests ;-).

  Where I'm struggling right now is that the Select2 fields are not getting rendered if they are in a Block Layout Field and initially hidden. But that's a different problem.

  Thanks. m.