Toggle select2 using x-editable

Question

I toggle editable by clicking on a different (a pencil icon) DOM object. This works fine for simple text values, now I need an select box and preferbly the select2 dropdown.

On all other fields and the regular select dropdown I use the following:

$('.edit-last_name').click(function(e){    
  e.stopPropagation();
  $('#last_name').editable('toggle');
});

For the select 2 dropdown I need to pass aditional params to editable, but I have no idea how to do it, the code below does not work. (the element is not triggerd)

$('.edit-country').click(function(e){    
    e.stopPropagation();
    $('#country').editable({
      toggle: 'show', 
      select2: {
        width: 200,
        placeholder: 'Select country',
        allowClear: true
      }
    })
});

Here is the html:

<div class="row edit-line">
    <div class="col-md-3 col-xs-4">
        <strong>@lang('user.country')</strong>
    </div>
    <div class="col-md-6 col-xs-8 text-right">
        <span id="country" class="edit-field" data-type="select" data-source="{{ route('countries') }}" data-value="{{ $user->country }}" data-pk="{{ $user->id }}" data-url="{{ action('UsersController@update') }}" data-title="@lang('user.country')">{{ Countries::getOne($user->country, App::getLocale(), 'cldr'); }}</span>
    </div>
    <div class="col-md-3 text-muted hidden-xs">
        <a href="#" class="edit-country text-muted text-no-underline small"><i class="fa fa-pencil"></i> @lang('general.edit')</a>
    </div>
</div>

In fact it has notting to do specifically with select2, I just don't know how to pass params to editable.

Answer 1

You should bind editable to your input outside the click event. When the user clicks you can then toggle the editable.

Based on this question: X - editable input editable on click on other element, your javascript would be:

$(document).ready(function() {
    // in case you don't want the modal
    $.fn.editable.defaults.mode = 'inline';

    // bind x-editable on DOM ready
    $('#country').editable({
        source: [
            {id: 'gb', text: 'Great Britain'},
            {id: 'us', text: 'United States'},
            {id: 'ru', text: 'Russia'}
        ],
        // change this from 'show' to 'manual'
        toggle: 'manual',
        select2: {
            width: 200,
            placeholder: 'Select country',
            allowClear: true
        }
    });

    // on element click
    $('.edit-country').click(function(e){
        e.stopPropagation();
        // toggle x-editable
        $('#country').editable('toggle');
    });
});

Here is a working jsfiddle.