在Select2中创建标记时从数据库获取id

时间:2022-11-27 19:50:59

I have a select2 tagging control. When tag not exists, user can create tag. This tags are saved in database, but the problem is that I don't know how to set tag id returned for ajax success.

我有一个select2标记控件。当标签不存在时,用户可以创建标签。这个标签保存在数据库中,但问题是我不知道如何设置为ajax成功返回的标签id。

$tags.select2({
    placeholder: '- Select -',
    tags: true,
    tokenSeparators: [',', ' '],
    createTag: function (params) {
        if (params.term.trim() === '') {
            return null;
        }
        return {
            id: '', //How to get id here???
            text: params.term.toLowerCase(),
            newTag: true // add additional parameters
        }
    },
    //Ajax to get tags here ommited
});

$tags.on('select2:select', function (e) {
    if (e.params.data.newTag) {
        $.ajax({
            url: urlAddTag,
            type: 'POST',
            dataType: "json",
            data: { tag: e.params.data.text.toLowerCase() },
            success: function (response) {
                 e.params.data.id = response.id;
            },
            error: function (xhr, ajaxOptions, thrownError) {
                var msg = JSON.parse(xhr.responseText);
            }
        });
    }
});

In the ajax response I'm setting the id with which tag was stored in database, but I don't know how to pass to 'createTag' function.

在ajax响应中我设置了哪个标签存储在数据库中的id,但我不知道如何传递给'createTag'函数。

1 个解决方案

#1


0  

I had some similar issue and I solved in the following way, I don't expect this adapts 100% to your case but it might give you an idea.

我有一些类似的问题,我通过以下方式解决,我不认为这会100%适应你的情况,但它可能会给你一个想法。

My flow works in this way:

我的流程以这种方式工作:

  • in the createTag, I just create some random id which will be sent to the API
  • 在createTag中,我只创建一些随机ID,它将被发送到API

  • the API will ignore this id and just creates a new record using the text from the select2 component
  • API将忽略此ID,并使用select2组件中的文本创建新记录

  • the API returns the new id (and text) in the response
  • API返回响应中的新id(和文本)

  • in the callback you update the tags on select2 with the new ID you just got
  • 在回调中,您使用刚刚获得的新ID更新select2上的标记

So for instance in your case:

例如在你的情况下:

createTag: function(params) {
  if (params.term.trim() === '') {
      return null;
  }
  return {
      id: 'new_attribute',
      isNew: true,
      text: params.term
  };
}

In the server callback I search through the tags in the control and update its ID with the one I get from the server:

在服务器回调中,我搜索控件中的标签,并使用从服务器获取的ID更新其ID:

$('<option/>').val(response.id).html(response.text).appendTo($tags); //create a new option with id + text returned by the server
var tags = $tags.val(); //get current values
var index = tags.indexOf('new_attribute'); //look for new_attribute
if (index !== -1) {
    tags[index] = response.id; //replace 'new_attribute' with id got from the server
}
$tags.val(tags).trigger('change'); //update select2

#1


0  

I had some similar issue and I solved in the following way, I don't expect this adapts 100% to your case but it might give you an idea.

我有一些类似的问题,我通过以下方式解决,我不认为这会100%适应你的情况,但它可能会给你一个想法。

My flow works in this way:

我的流程以这种方式工作:

  • in the createTag, I just create some random id which will be sent to the API
  • 在createTag中,我只创建一些随机ID,它将被发送到API

  • the API will ignore this id and just creates a new record using the text from the select2 component
  • API将忽略此ID,并使用select2组件中的文本创建新记录

  • the API returns the new id (and text) in the response
  • API返回响应中的新id(和文本)

  • in the callback you update the tags on select2 with the new ID you just got
  • 在回调中,您使用刚刚获得的新ID更新select2上的标记

So for instance in your case:

例如在你的情况下:

createTag: function(params) {
  if (params.term.trim() === '') {
      return null;
  }
  return {
      id: 'new_attribute',
      isNew: true,
      text: params.term
  };
}

In the server callback I search through the tags in the control and update its ID with the one I get from the server:

在服务器回调中,我搜索控件中的标签,并使用从服务器获取的ID更新其ID:

$('<option/>').val(response.id).html(response.text).appendTo($tags); //create a new option with id + text returned by the server
var tags = $tags.val(); //get current values
var index = tags.indexOf('new_attribute'); //look for new_attribute
if (index !== -1) {
    tags[index] = response.id; //replace 'new_attribute' with id got from the server
}
$tags.val(tags).trigger('change'); //update select2