Czy istnieje sposób na dynamiczne dodawanie elementów ajax przez wybraną wtyczkę jquery?

Question

Próbuję użyć wtyczki "Wybrane" przez żniwa (http://harvesthq.github.com/chosen/) i działa dla statycznego zestawu opcji, które przekazuję. Jednak chcę, aby ilekroć ktoś wpisał coś, co nie znajduje się w wstępnie wypełnionych opcjach, powinien wysłać go na serwer jako nową opcję, a po pomyślnej odpowiedzi, chcę nie tylko dodać to do prawidłowej listy opcje, ale także sprawiają, że wybiera go.

przeładowywania opcji jest dość prosta:

// In ajax response 
var newOption = new Option("Text", __value__); 
$("#tagSelection").append(newOption); 
$("#tagSelection").trigger("liszt:updated"); 

Jednak nie wiem jak zrobić plugin „Chosen” pick to jako wartość. Chciałabym zrobić coś podobnego do czegoś podobnego do tego, co robię:

$("#tagSelection").trigger("liszt:select:__value__"); 

lub coś podobnego.

Wszelkie sugestie?

(ps.. Staram się zbudować „znakowania” wtyczki w oparciu o wybrany Tak więc, jeśli znacznik jest wpisany nie istnieje, doda je do serwera, a następnie wybierz go od razu)

Answer 1

są to kompletny zestaw zmian zrobiłem do wybranej wtyczki (wersja jQuery), aby rozwiązać ten problem

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; 
      // ... 
}; 

The this.new_term_to_be_a dded utrzymuje aktualnie wpisany ciąg znaków, który nie znajduje się wśród wstępnie zdefiniowanych opcji.

Option.addNewElementCallback to wywołanie zwrotne funkcji wywołującej, umożliwiające jej przetwarzanie (wysyłanie na serwer itp.) I musi być synchroniczne. Poniżej znajduje się szkielet:

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 jest elementem jquery - najnowsza dodaje li obiekt do listy opcji.

Wykonując this.result_highlight = newElement; i this.result_select (evt); Poinformuję wtyczkę Chosen, aby to zaznaczyć. Działa to niezależnie od tego, czy jest to pojedynczy wybór czy wybór wielokrotny. Rozwiązanie Rifky'ego działa tylko w przypadku pojedynczego wyboru.

Answer 2

w swojej odpowiedzi ajax, spróbuj

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

Answer 3

Właśnie to robiłem. Nie lubiłem linię Shreeni za ustawienie wybrany (bez urazy), więc poszedłem z

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

który osobiście uważam, jest nieco czystsze (testowane z multiselect polu i to działa dobrze)

Answer 4

myślę, że jego nie najlepsza praktyka, ale ten kod działa dla mnie. powrót danych ma znacznik HTML <option>

$.post("url.php",{data:data},function(data){ 
$('.choosen').empty().append(data); 
$(".choosen").trigger("liszt:updated"); 
}); 

Answer 5

widelcem zawierający funkcja chcesz została stworzona here. Ten widelec jest nazywany widelcem koenpunt.

Możesz śledzić poprzez dyskusję o tej funkcji na stronie harvesthq github

• https://github.com/harvesthq/chosen/pull/506
• https://github.com/harvesthq/chosen/pull/320
• https://github.com/harvesthq/chosen/pull/166

Moje podsumowanie tego, co się stało:

1. Wiele osób chce tę funkcję nr
2. Kilka osób utworzonych pull-wnioski z proponowanego rozwiązania
3. Najlepszym rozwiązaniem jest pull-request 166
4. Autor „wybrani” zdecydował, że nie obejmie funkcję
5. koenpunt (autor pull-żądanie 166) utworzona rozwidlenie „wybrani”
6. Ludzie zaczęli porzucenie wersji harvesthq z „wybrani” na rzecz koenpunt fork

Answer 6

Od wersji 1.0 niektóre z powyższych sugestii nie są już istotne. Oto wszystko, co jest potrzebne:

--- /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: 

Opcje są następujące:

{add_term_callback: addTagCallback, no_results_text:'Press Enter to add:'} 

Oznacza to, że jeśli „Orange” nie ma na liście owoców, byłoby po prostu zapyta:

Naciśnij Enter, aby dodać: "Orange"

Wywołanie zwrotne należy zarejestrować nowy termin b y wszelkie niezbędne środki i zwracają identyfikator (lub wartość w kontekście podstawowego elementu wyboru) dla nowej opcji.

var addTagCallback = function(tagText) { 
    // do some synchronous AJAX 
    return tagID; 
}; 

Answer 7

to zrobić po prostu w ten sposób i działa idealnie:

// 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"); 

Answer 8

Nie trzeba dużo stresu, keep it simple. Musisz dodać odpowiedź ajaxową w polu wyboru html, a następnie dokonać aktualizacji.

Będzie to wyglądać ..

Kod:

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 

   });