选择2成功找回新创建的标签ID [英] select2 on success retrieve newly created tag id

问题描述

在选择2我有标签由AJAX加载，如果未在db发现该标记然后用户必须创建一个新的选项。的问题是，新的标签是否列在选择2盒作为一个术语，而不是作为id（什么选择到希望 - 尤其是再次装载标签时，如果用户希望，因为只有这个术语来更新，而不是标识符成为一个问题存储在分贝）。 如何，在增加一词的成功，让这个选择2临危ID和提交的标签名称/学期的ID呢？

In select2 I have tags loaded by AJAX, if the tag is not found in the db then the user has the option to create a new one. The issue is that the new tag is listed in the select2 box as a term and not as the id (what select to wants - especially becomes a problem when loading the tags again if the user wants to update since only the term and not the id is stored in the db). How can I, on success of adding the term, make it so that select2 recieves the ID and submits the ID instead of the tag name/term?

$(document).ready(function() {
var lastResults = [];
$("#project_tags").select2({
    multiple: true,
    placeholder: "Please enter tags",
    tokenSeparators: [","],
    initSelection : function (element, callback) {
        var data = [];
        $(element.val().split(",")).each(function () {
            data.push({id: this, text: this});
        });
        callback(data);
    },
    ajax: {
        multiple: true,
        url: "framework/helpers/tags.php",
        dataType: "json",
        data: function(term) {
            return {
                term: term
            };
        },
        results: function(data) {
            return {
                results: data
            };
        }
    },
    createSearchChoice: function(term) {
        var text = term + (lastResults.some(function(r) {
            return r.text == term
        }) ? "" : " (new)");
        return {
            id: term,
            text: text
        };
    },
});
$('#project_tags').on("change", function(e) {
    if (e.added) {
        if (/ \(new\)$/.test(e.added.text)) {
            var response = confirm("Do you want to add the new tag " + e.added.id + "?");
            if (response == true) {
                alert("Will now send new tag to server: " + e.added.id);
                $.ajax({
                    url: 'framework/helpers/tags.php',
                    data: {
                        action: 'add',
                        term: e.added.id
                    },
                    success: function(data) {

                    },
                    error: function() {
                        alert("error");
                    }
                });
            } else {
                console.log("Removing the tag");
                var selectedTags = $("#project_tags").select2("val");
                var index = selectedTags.indexOf(e.added.id);
                selectedTags.splice(index, 1);
                if (selectedTags.length == 0) {
                    $("#project_tags").select2("val", "");
                } else {
                    $("#project_tags").select2("val", selectedTags);
                }
            }
        }
    }
});

}）;

这确实在增加开关的下面有一部分

Heres part of the switch that does the adding

case 'add':
    if (isset($_GET['term'])) {
        $new_tag = escape($_GET['term']);
        if (Nemesis::insert('tags', 'tag_id, tag_content', "NULL, '{$new_tag}'")) {
            // we need to send back the ID for the newly created tag
            $search = Nemesis::select('tag_id', 'tags', "tag_content = '{$new_tag}'");
            list($tag_id) = $search->fetch_row();
            echo $tag_id;
        } else {
            echo 'Failure';
        }
        exit();
    }
    break;

更新：我已经做了一些挖，什么混淆我的是，选择2输入似乎并不存储在标签/词相关的ID（见下文）。我知道我可以改变的成功回调的属性，但我不知道什么改变！

UPDATE: I've done a bit of digging, and what confuses me is that the select2 input does not seem to store the associated ID for the tag/term (see below). I know I could change the attribute with the success callback, but I don't know what to change!

推荐答案

正如你所说，你可以替换的价值，而这正是我的解决办法呢。如果您搜索的Chrome元素督察，你会看到，娄选择二场，输入id为 project_tags 和高度 1 >。

As you have said, you can replace that value, and that is what my solution does. If you search the Element Inspector of Chrome, you will see, bellow the Select2 field, an input with the id project_tags and the height of 1.

奇怪的是，Chrome浏览器的元素督察不告诉你输入的值，你可以看到如下：

The weird thing is that the element inspector of Chrome does not show you the values of the input, as you can see below:

不过，你做了的console.log（$（＃project_tags）。VAL（））输入具有值（如你在图像中看到的）。

However, you do a console.log($("#project_tags").val()) the input has values (as you see in the image).

所以，你可以简单地通过ID更换新选项的文本时，成功里面 Ajax调用放置在 $功能（#project_tags'）。在（变）功能。该 AJAX 电话将是这样的：

So, you can simply replace the text of the new option by the id, inside the success function of the ajax call placed within the $('#project_tags').on("change") function. The ajax call will be something like:

$.ajax({
    url: 'framework/helpers/tags.php',
    data: {
        action: 'add',
        term: e.added.id
    },
    success: function(tag_id) {
        var new_val = $("#project_tags")
                        .val()
                        .replace(e.added.id, tag_id);
        $("#project_tags").val(new_val);
    },
    error: function() {
        alert("error");
    }
});

请注意，这个解决方案不是防弹。例如，如果您有值 1 选择一个标签，用户插入文本 1 ，这将引起问题。

Please be aware that this solution is not bullet proof. For example, if you have a tag with the value 1 selected, and the user inserts the text 1, this will cause problems.

也许是更好的选择将取代一切，在最后一个逗号的权利。然而，即使这样做可能会导致一些问题，如果你允许用户创建一个逗号标签。

Maybe a better option would be replace everything at the right of the last comma. However, even this might have cause some problems, if you allow the user to create a tag with a comma.

让我知道如果你需要更多的信息。

Let me know if you need any more information.

这篇关于选择2成功找回新创建的标签ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！