有没有一种方法可以通过jquery选择的插件动态ajax添加元素? [英] Is there a way to dynamically ajax add elements through jquery chosen plugin?

问题描述

我试图按收成使用选择"插件(http://harvesthq.github.com/chosen/)，它可用于我传递的静态选项集.但是，我想要的是，只要有人键入预填充选项中没有的内容，它就应该将其作为新选项发送到服务器，并且在成功响应后，我不仅要将其添加到有效列表中选项，也可以选择它.

I am trying to use "Chosen" plugin by harvest (http://harvesthq.github.com/chosen/) and it works for the static set of options I am passing. However, what I want is that whenever anybody types something that is not in the pre-filled options, then it should send that to the server as a new option and on successful response, I want to not only add that to the valid list of options, but also make it select it.

重新加载选项非常简单:

Reloading the options is fairly simple:

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

但是，我不知道如何使选择的"插件选择此值.我很乐意做

However, I don't know how to make "Chosen" plugin pick this as the value. I would love to do something like

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

或类似的东西.

有什么建议吗?

(ps:我正在尝试根据所选对象构建一个标签"插件.因此，如果所键入的标签不存在，它将被添加到服务器中，然后立即选择它.)

(ps: I am trying to build a "tagging" plugin based on chosen. So, if the tag being typed doesn't exist, it will add it to the server and then select it straight away.)

推荐答案

这些是我为解决此问题对所选插件(jquery版本)所做的完整更改

These are the complete set of changes I did to the chosen plugin (jquery version) to solve this 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;
          // ...
};

this.new_term_to_be_added维护当前键入的字符串，该字符串不在预定义的选项中.

The this.new_term_to_be_added maintains the currently typed string which is not among the pre-defined options.

options.addNewElementCallback是调用函数的回调，以允许他们对其进行处理(将其发送到服务器等)，并且它必须是同步的.下面是框架:

The options.addNewElementCallback is the callback to the calling function to allow them to process it (send it to server etc.) and it has to be synchronous. Below is the skeleton:

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对象.

The newElement is a jquery element - the latest added li object to list of options.

通过执行此操作.和this.result_select(evt);我告诉选择的插件选择它.无论是单选还是多选都可以使用. Rifky的解决方案仅适用于单选.

By doing this.result_highlight = newElement; and this.result_select(evt); I tell the Chosen plugin to select this. This works whether it is a single select or a multi-select. Rifky's solution will work only for single select.

这篇关于有没有一种方法可以通过jquery选择的插件动态ajax添加元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！