エンドユーザーが写真家と、写真家ごとに異なる関連するロール番号を選択する必要があるプロジェクトがあります (データは、ページの読み込み時に JSON データベース呼び出しによって取り込まれ、値をすばやく表示するために Javascript 配列にドロップされます)。 . 必要なものすべてを備えた jsFiddle を作成しましたが、動的に作成されたスライダーが作成後に移動しません。最小値と最大値に関係があると確信していますが、正しいように「思われます」。オートコンプリート セクションは写真家の選択を表示するだけで、その下に既存の HTML 要素からスライダーを動的に作成します。問題を解決するために、私が使用している余分なコードの多くを削除しました。
[jsFiddle リンク] http://jsfiddle.net/sN63W/2/
(Ommiting data array named 'Photographer' - But it is in the jsFiddle Link)
$(function () {
$("#photographer-label").autocomplete({
minLength: 0,
source: Photographer,
focus: function (event, ui) {
$('#photographer-label').val(ui.item.label);
return false;
},
select: function (event, ui) {
$('#photographer').val(ui.item.value);
$('#photographer-label').val(ui.item.label);
var slider_min = ui.item.rollnum_from;
var slider_max = ui.item.rollnum_to;
alert('Selected Rolls: ' + slider_min + ' : ' + slider_max); // For Debugging
$('#rollnum-slider').slider({
min: slider_min, // ui.item.rollnum_from,
max: slider_max, // ui.item.rollnum_to,
change: function (event, ui) {
$('#rollnum').val(ui.value);
}
});
}
});
});
皮肉なことに、スライダーの最小値と最大値の中にハードコードされた数値を挿入すると、正しく機能します。しかし、(アラート ボックスによると) 値は正しいようです。私は何が欠けていますか?おそらく単純な答えであることはわかっていますが、私はそれについて大きな脳のけいれんを起こしているだけです.
PS副次的な問題として、スライダーにフォーカスを移動したときにオートコンプリートに「データ」ではなく「ラベル」を表示させたいのですが、そうしていないようです。しかし、それはそれほど大したことではありません。