jquery ui- (slider) custom event binding not working
-
27-10-2019 - |
Question
I have a bit of a problem working out why my custom event does not trigger and work correctly... My custom event should be attached to each column, how can I get the slider to be bound to only one column (cols object below)? With my current code if I click on any col all cols are resized...
I am trying to dynamically resize a table column using a slider that opens inside a little div, if a table is clicked my little dialog is loaded up then to get all current column width and add an event handler my code is:
//param: data = current table
function DisplayColumnData(data) {
var cols = $(data).find("col");
//attach slider to each col
$(cols).each(function(i) {
var that = this;
var coldata = $("<div class='ui-col-data' />");
var colvalue = $("<span class='ui-col-value' />");
colvalue.text($(that).attr("width"));
coldata.text(" >col" + i + ": ").append(colvalue);
$(".ui-resizer-cols").append(coldata);
//handle column resizing, bind each col to the slider...
$(coldata).click(function() {
$(".ui-col-data").unbind("resizehandler");
//remove all other binded events then trigger the new event only...
$(coldata).trigger("resizehandler", that);
});
});
}
$(".ui-col-data").live("resizehandler", function(event, data) {
var $parent = $(this).closest(".ui-resizer-cols");
//remove classes from all other cols so only the clicked col is resized
$parent.find(".ui-col-data").removeClass("ui-col-border");
$parent.find(".ui-col-value").removeClass("ui-resizer-val");
$(this).addClass("ui-col-border"); //now the active col
var valfield = $(this).find("span.ui-col-value");
valfield.addClass("ui-resizer-val");
//update whatever...
$("#ui-resizer").slider('value', valfield.text() );
$("#ui-resizer").bind("slide", function(e, ui) {
valfield.text(ui.value);
$(data).attr("width", ui.value); //update col
});
});
TABLE:
<table>
<colgroup>
<col width="25%">
<col width="25%">
<col width="25%">
<col width="25%">
</colgroup>
<tbody>
<tr>...</tr>// 4 td's here as normal
<tr>...</tr>
</tbody>
</table>
Slider:
<div class="ui-resizer-content">
<div id="ui-resizer" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<div class="ui-slider-range ui-slider-range-max ui-widget-header" style="width: 100%;"></div><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></a></div>
<div class="ui-resizer-cols"></div>
<p> <a href="#" id="lnkResizer" style="float: right;">close</a>
</p>
</div>
Solution
This was not so clear (at least to me) from the documentation but the fix is:
$("#ui-resizer").slider({
slide: function(e, ui) {
valfield.text(ui.value + "%");
$(column).attr("width", ui.value); //update col
}
});
Apparantly the code I used (below) is global for all sliders using a single handler, and the fix above is specific to an instance of a slider? (if I have understood correctly)
$("#ui-resizer").bind("slide", function(e, ui) { ... }