select2添加带有确认框的新标签

时间:2014-08-05 03:02:23

标签: php jquery ajax json jquery-select2

Select2我有基本的标记功能。标记系统在插入项目页面中工作,我可以使用某些预定义标记标记项目,这些标记存储在数据库中并由AJAX调用,也可以在更新项目页面中使用相同的机制进行标记。在标记字段中存储当前存储的标记。

我希望如此,如果当前不存在任何标记,则用户将收到一个确认框,询问他们是否要添加新标记,然后点击确定该标记将存储在数据库中。 Select2还应该有几秒钟的缓冲时间来赶上查找标签,否则可能会产生重复?

我已经阅读了一些here来展示如何做jquery部分,尽管它不完整我的目的。任何人都可以阐明我如何做到这一点?我不是在寻找完整的答案,而仅仅是指导。

1 个答案:

答案 0 :(得分:2)

看一下这个问题:How do I fire a new ajax on select2 new /remove tag event?

在你的情况下,使用你的小提琴,你可以使用类似的东西:

$('#tags').on("change", function(e){
    if (e.added) {
        if (/ \(new\)$/.test(e.added.text)) {
           // A new tag was added
           // Prompt the user
           var response = confirm("Do you want to add the new tag "+e.added.id+"?");

           if (response == true) {
              // User clicked OK
              console.log("Sending the tag to the server");
              $.ajax({
                   type: "POST",
                   url: '/someurl&action=addTag',
                   data: {id: e.added.id, action: add},    
                   error: function () {
                      alert("error");
                   }
               });
           } else {
                // User clicked Cancel
                console.log("Removing the tag");
                var selectedTags = $("#tags").select2("val");
                var index = selectedTags.indexOf(e.added.id);
                selectedTags.splice(index,1);
                if (selectedTags.length == 0) {
                    $("#tags").select2("val","");
                } else {
                    $("#tags").select2("val",selectedTags);
                }
           }
        }
    }
});

Draft fiddle here