Abrar
Abrar

Reputation: 23

Using Select2 with Jeditable

I am new to Jquery plugins only know some basic jquery.

I am trying to combine select2 plugin with Jeditable in an html table. I have almost done what I want. Only problem is dropdown shows and then closed. I have made a Jsfiddle of what I have done

https://jsfiddle.net/ongforog

Html code:

<table>
<tr>
<th>Location</th>
</tr>
<tr>
  <td class="sites_select">Location 1</td>
</tr>
</table>

Jquery Code:

  $(".sites_select").editable("localhost/timesheet/sites/update", {
  data   : "{'Lorem ipsum':'Lorem ipsum','Ipsum dolor':'Ipsum dolor','Dolor sit':'Dolor sit'}",
    type: "select",
        onblur: 'ignore'
    }).on('click', function () {
        $(this).find('select').select2({});
    });

    $(document).on('change', '.sites_select select', function () {
        $(this).trigger("submit");
    });

Only problem I am having is when we click it shows and hide immediately. Any help will be appreciated.

Upvotes: 2

Views: 337

Answers (1)

Muhammad Hamza
Muhammad Hamza

Reputation: 31

$(".sites_select").editable("localhost/timesheet/sites/update", {
    data   : "{'Lorem ipsum':'Lorem ipsum','Ipsum dolor':'Ipsum dolor','Dolor sit':'Dolor sit'}",
    type: "select",
    onblur: 'ignore'
}).on('click', function () {
    if($(this).find('.select2').length <= 0){
        $(this).find('select').select2({});
    }
});

$(document).on('change', '.sites_select select', function () {
    $(this).trigger("submit");
})

Upvotes: 3

Related Questions