Alex Rivera | Logout

How to reload jquery dropkick object

Asked 2012-01-03T16:32:10.980
9

Im using a simple select list and the jquery.dropkick library to make it beautiful. Now i want to change that dropkick content after the corresponding select element has been changed (a new option came in). But just calling $('#select').dropkick(); doesnt work.

And it looks like it is not supported. It would be enough just to rebuild that dropkick from scratch. Is there any possibility to "destroy" that dropkick object then rebuilding it by calling the .dropkick() method?

jquery select reload jquery-dropkick
Edit
Report

2 Answers

23

I have faced the same issue and couldn't find a solution, but finally succeeded in getting this hack work.

$select = $("#select1");
$select.removeData("dropkick");
$("#dk_container_select1").remove();

$select.append("<option>opt4</option>");
$select.append("<option>opt5</option>");

$select.dropkick();
answered 2012-01-03T18:51:36.843
14

I leveraged Diode's answer to modify the Dropkick code to make this a little cleaner:

// Reload the dropkick select widget after options have changed
// usage: $("...").dropkick('reload');
methods.reload = function () {
    var $select = $(this);
    var data = $select.data('dropkick');
    $select.removeData("dropkick");
    $("#dk_container_"+ data.id).remove();
    $select.dropkick(data.settings);
};

Add the above code right after the following snippet in dropkick.js:

methods.reset = function () {
  ...
};

Then you can use it programatically:

    $('#my-select').html("<option>new options</option>");
    $('#my-select').dropkick('reload');
answered 2012-11-07T23:34:21.823

Your Answer