jqueryが選択したプラグインを介して要素を動的にajax追加する方法はありますか？
ハーベスト（http://harvesthq.github.com/chosen/）で「Chosen」プラグインを使用しようとしていますが、渡した静的なオプションセットで機能します。しかし、私が欲しいのは、誰かが事前に入力されたオプションにないものを入力するときはいつでも、それを新しいオプションとしてサーバーに送信する必要があり、成功した応答で、それをオプションだけでなく、それを選択させます。
オプションの再読み込みは非常に簡単です。
// In ajax response
var newOption = new Option("Text", __value__);
$("#tagSelection").append(newOption);
$("#tagSelection").trigger("liszt:updated");
ただし、「Chosen」プラグインにこれを値として選択させる方法がわかりません。私は次のようなことをしたいです
$("#tagSelection").trigger("liszt:select:__value__");
または同様のもの。
助言がありますか？
（ps：選択に基づいて「タグ付け」プラグインを構築しようとしています。したがって、入力中のタグが存在しない場合は、サーバーに追加され、すぐに選択されます。）
これらは、この問題を解決するために選択したプラグイン（jqueryバージョン）に加えた変更の完全なセットです。
Chosen.prototype.choice_build = function(item) {
this.new_term_to_be_added = null;
// ....
};
Chosen.prototype.no_results = function(terms) {
// ....
no_results_html.find("span").first().html(terms);
this.new_term_to_be_added = terms;
return this.search_results.append(no_results_html);
};
Chosen.prototype.keydown_checker = function(evt) {
// ...
case 13:
if(this.new_term_to_be_added != null && this.options.addNewElementCallback != null) {
var newElement = this.options.addNewElementCallback(this.new_term_to_be_added);
if(newElement!=null && newElement.length == 1) {
// KEY TO SOLVING THIS PROBLEM
this.result_highlight = newElement;
// This will automatically trigger the change/select events also.
// Nothing more required.
this.result_select(evt);
}
this.new_term_to_be_added = null;
}
evt.preventDefault();
break;
// ...
};
This.new_term_to_be_addedは、事前定義されたオプションに含まれていない、現在入力されている文字列を維持します。
Options.addNewElementCallbackは、呼び出し元の関数へのコールバックであり、呼び出し元の関数が処理できるようにし（サーバーに送信するなど）、同期している必要があります。以下はスケルトンです：
var addTagCallback = function(tagText) {
var newElement = null;
$.ajax({url : that.actionUrl,
async : false,
dataType: "json",
data : { // ....},
success : function(response) {
if(response) {
$('#tagSelection').append(
$('<option></option>')
.val(data.Item.Id)
.html(data.Item.Value)
.attr("selected", "selected"));
$("#tagSelection").trigger("liszt:updated");
// Get the element - will necessarily be the last element - so the following selector will work
newElement = $("#tagSelection_chzn li#tagSelection_chzn_o_" + ($("#tagSelection option").length - 1));
} else {
// Handle Error
}
}});
return newElement;
};
NewElementはjquery要素です。オプションのリストに最後に追加されたliオブジェクトです。
This.result_highlight = newElement;を実行することによっておよびthis.result_select（evt）;選択したプラグインにこれを選択するように指示します。これは、単一選択でも複数選択でも機能します。 Rifkyのソリューションは、単一選択に対してのみ機能します。
私はちょうどこれをやっています。選択した設定（違反なし）のShreeniのラインが気に入らなかったので、
$('#tagSelection').append(
$('<option></option>')
.val(data.Item.Id)
.html(data.Item.Value)
.attr("selected", "selected"));
$("#tagSelection").trigger("liszt:updated");
私は個人的に少しきれいだと思います（複数選択ボックスでテストされ、正常に動作します）
必要な機能を含むフォークが作成されました ここ 。このフォークは、koenpuntフォークと呼ばれます。
この機能のディスカッションは、harvesthqgithubサイトでフォローできます。
- https://github.com/harvesthq/chosen/pull/506
- https://github.com/harvesthq/chosen/pull/32
- https://github.com/harvesthq/chosen/pull/166
何が起こったかの私の要約：
- 多くの人がこの機能を望んでいます
- 提案されたソリューションを使用してプルリクエストを作成した人もいます
- 最善の解決策は pull-request 166
- 'chosen'の作者は、この機能を含めないことを決定しました
- koenpunt（pull-request 166の作者）が「chosen」のフォークを作成しました
- 人々は koenpunt fork を支持して 'chosen'のharvesthqバージョンを放棄し始めました
バージョン1.0以降、上記の提案の一部は関連しなくなりました。必要なものは次のとおりです。
--- /home/lauri/Downloads/chosen_v1.0.0 (original)/chosen.jquery.js
+++ /home/lauri/Downloads/chosen_v1.0.0 (modified)/chosen.jquery.js
@@ -408,8 +408,18 @@
break;
case 13:
evt.preventDefault();
- if (this.results_showing) {
+ if (this.results_showing && this.result_highlight) {
return this.result_select(evt);
+ }
+ var new_term_to_be_added = this.search_field.val();
+ if(new_term_to_be_added && this.options.add_term_callback != null) {
+ var newTermID = this.options.add_term_callback(new_term_to_be_added);
+ if(newTermID) {
+ this.form_field_jq.append(
+ $('<option></option>').val(newTermID).html(new_term_to_be_added).attr("selected", "selected")
+ );
+ this.form_field_jq.trigger("chosen:updated");
+ }
}
break;
case 27:
オプションは次のとおりです。
{add_term_callback: addTagCallback, no_results_text:'Press Enter to add:'}
これは、「オレンジ」が果物のリストにない場合、単にプロンプトを表示することを意味します。
Enterキーを押して追加します：「オレンジ」
コールバックは、必要な手段で新しい用語を登録し、新しいオプションのID（または基になるselect要素のコンテキスト内の値）を返す必要があります。
var addTagCallback = function(tagText) {
// do some synchronous AJAX
return tagID;
};
私はそれをこのように簡単に行い、それは完璧に機能します：
// this variable can be filled by an AJAX call or so
var optionsArray = [
{"id": 1, "name": "foo"},
{"id": 2, "name": "bar"}
];
var myOptions = "<option value></option>";
for(var i=0; i<optionsArray.length; i++){
myOptions += '<option value="'+optionsArray[i].id+'">'+optionsArray[i].name+'</option>';
}
// uses new "chosen" names instead of "liszt"
$(".chosen-select").html(myOptions).chosen().trigger("chosen:updated");
これはベストプラクティスではないと思いますが、このコードは私にとってはうまくいきます。データリターンにはhtmlタグがあります<option>
$.post("url.php",{data:data},function(data){
$('.choosen').empty().append(data);
$(".choosen").trigger("liszt:updated");
});
あなたは多くのストレスをかける必要はありません、それをシンプルにしてください。選択ボックスのhtmlにajax応答を追加してから、選択したものを更新する必要があります。
これは次のようになります。
コード：
var baseURL='Your Url';
$.ajax({
type: "POST",
url: baseURL+"Your function", //enter path for ajax
data: "id="+id, //pass any details
success: function(response){ //get response in json_encode()formate
var json_data = JSON.parse(response);
var i=0; var append='';
if((json_data['catss_data'].length > 0)){
for(i=0;i < json_data['response_data'].length; i++){
append+="<option value='"+json_data['response_data'][i].category_name+"'>"+json_data['response_data'][i].category_name+"</option>";
// make response formate in option
}
$('#(selectbox-id)').html(append); // enter select box id and append data in it
}
}
$("#(selectbox-id)").trigger("chosen:updated"); // enter select box id and update chosen
});
ajax応答で、試してみてください
var newOption = new Option("Text", __value__);
$("#tagSelection").append(newOption);
**/* add this line */
$("#tagSelection").val(__value__);**
$("#tagSelection").trigger("liszt:updated");