Есть ли способ динамически добавлять элементы AJAX через JQuery выбранный плагин? - PullRequest
16 голосов
/ 13 марта 2012

Я пытаюсь использовать плагин "Выбранный" по урожаю (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 ]

10 голосов
/ 16 апреля 2012

Я только что делал это. Мне не понравилась строка для выбора Шрини (без обид), поэтому я выбрал

$('#tagSelection').append(
    $('<option></option>')
        .val(data.Item.Id)
        .html(data.Item.Value)
        .attr("selected", "selected"));
$("#tagSelection").trigger("liszt:updated");

, который я лично считаю немного чище (протестировано с множественным выбором коробки, и он отлично работает)

10 голосов
/ 14 марта 2012

Это полный набор изменений, которые я внес в выбранный плагин (версия 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); Я говорю плагину Chosen, чтобы выбрать это. Это работает, будь то одиночный выбор или множественный выбор. Решение Rifky будет работать только для одного выбора.

6 голосов
/ 02 июля 2013

Форк, содержащий нужную вам функцию, был создан здесь . Эта вилка называется вилкой koenpunt.

Вы можете следить за обсуждением этой функции на сайте Harbourhq GitHub

Мое резюме произошедшего:

  1. Многие люди хотят эту функцию
  2. Несколько человек создали pull-запросы с предложенным решением
  3. Наилучшим решением является запрос на выдачу 166
  4. Автор 'selected' решил, что не будет включать функцию
  5. koenpunt (автор pull-запроса 166) создал форк из 'selected'
  6. Люди начали отказываться от «избранной» версии «unchhq »в пользу koenpunt fork
4 голосов
/ 08 августа 2013

Начиная с версии 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, чтобы добавить: «Orange»

Обратный вызов должен зарегистрировать новый термин любыми необходимыми средствами и вернуть идентификатор (или значение в контекстебазовый элемент выбора) для новой опции.

var addTagCallback = function(tagText) {
  // do some synchronous AJAX 
  return tagID;
};
0 голосов
/ 10 января 2017

Вам не нужно много стрессов, будьте проще. Вам нужно добавить свой 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

   });   
0 голосов
/ 21 августа 2013

Я делаю это просто так, и он отлично работает:

// 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");
0 голосов
/ 03 мая 2013

я думаю, что это не лучшая практика, но этот код работает для меня.Возврат данных имеет HTML-тег <option>

$.post("url.php",{data:data},function(data){
$('.choosen').empty().append(data);
$(".choosen").trigger("liszt:updated");
});
0 голосов
/ 14 марта 2012

в вашем ответе ajax, попробуйте

var newOption = new Option("Text", __value__);  
$("#tagSelection").append(newOption);  
**/*  add this line */  
$("#tagSelection").val(__value__);**  
$("#tagSelection").trigger("liszt:updated");  
...