Есть ли способ динамически добавлять элементы ajax через выбранный плагин jquery?
Я пытаюсь использовать" выбранный " плагин по harvest (http://harvesthq.github.com/chosen/) и он работает для статического набора опций, которые я передаю. Однако я хочу, чтобы всякий раз, когда кто-то вводит что-то, чего нет в предварительно заполненных опциях, он должен отправить это на сервер в качестве новой опции и при успешном ответе, я хочу не только добавить это в допустимый список опций, но и сделать его выбор.
перезагрузка параметров довольно просто:
// In ajax response
var newOption = new Option("Text", __value__);
$("#tagSelection").append(newOption);
$("#tagSelection").trigger("liszt:updated");
однако я не знаю, как сделать "выбранный" плагин выбрать это в качестве значения. Я хотел бы сделать что-то вроде
$("#tagSelection").trigger("liszt:select:__value__");
или что-то подобное.
какие предложения?
(ps: Я пытаюсь построить плагин "пометки" на основе выбранного. Итак, если введенный тег не существует, он добавит его на сервер, а затем сразу же выберет его.)
8 ответов
Я только что этим занимался. Мне не понравилась линия Шрини для установки выбранного (без обид), поэтому я пошел с
$('#tagSelection').append(
$('<option></option>')
.val(data.Item.Id)
.html(data.Item.Value)
.attr("selected", "selected"));
$("#tagSelection").trigger("liszt:updated");
который я лично считаю немного чище (протестирован с помощью multiselect box, и он отлично работает)
Это полный набор изменений, которые я сделал для выбранного плагина (версия 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;
// ...
};
в этом.new_term_to_be_added поддерживает текущую типизированную строку, которая не входит в число предопределенных параметров.
параметры.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 element-последний добавленный объект li в список опций.
делая это.result_highlight = newElement; и это.result_select (evt); я говорю выбранному плагину выбрать это. Это работает независимо от того, является ли это одним выбором или несколькими. Решение Rifky будет работать только для single select.
вилка, содержащая функцию, которую вы хотите, была создана здесь. Эта вилка называется вилкой koenpunt.
вы можете следить за обсуждением этой функции на harvesthq github сайт
- https://github.com/harvesthq/chosen/pull/506
- https://github.com/harvesthq/chosen/pull/320
- https://github.com/harvesthq/chosen/pull/166
мое резюме того, что произошло:
- многие люди хотят эту функцию
- несколько человек создали pull-запросы с предлагаемым решением
- лучшее решение pull-запрос 166
- автор "избранного" решил, что он не будет включать функцию
- koenpunt (автор pull-request 166) создал вилку "избранного"
- люди начали отказываться от harvesthq версии "избранного" в пользу вилка koenpunt
начиная с версии 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, чтобы добавить: "оранжевый"
обратный вызов должен зарегистрировать новый срок любыми способами и вернуть идентификатор (или значение в контексте базовых выберите элемент) для новой опции.
var addTagCallback = function(tagText) {
// do some synchronous AJAX
return tagID;
};
в вашем ответе ajax попробуйте
var newOption = new Option("Text", __value__);
$("#tagSelection").append(newOption);
**/* add this line */
$("#tagSelection").val(__value__);**
$("#tagSelection").trigger("liszt:updated");
Я думаю, не лучшая практика, но этот код работает для меня. возврат данных в HTML-тег<option>
$.post("url.php",{data:data},function(data){
$('.choosen').empty().append(data);
$(".choosen").trigger("liszt:updated");
});
Я делаю это просто так, и он отлично работает:
// 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");
вам не нужно много стресса , сохранить его простым. Вам нужно добавить свой ответ ajax в поле выбора html, а затем обновить выбранный.
Это будет выглядеть..
код:
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
});