1

I am using select2 as a tagging input , but i am stumped when it comes to handling the creation of new tags and getting the new tag id's back into the select2

this question is closely related Select2.js: why is id the same as text on change for removed?

and you can see from his jsfiddle http://jsfiddle.net/7e8Pa/ , when text is not found in the createSearchChoice, new option is created, id:-1, text:term, then in the on change event, altering that id to 5

I need to be able to submit a $.post to the server, and get an id back instead of using a static 5

The problem is, if i submit a post in the createsearchoption, every keystroke not found in the tags tabe creates a new tag, and attempting the post in the on change event , i assume the change event finishes before the ajax returns

.on("change", function(e) { 
    log("change "+JSON.stringify({val:e.val, added:e.added, removed:e.removed}));   
    if (e.added) { // if its got an add obj
        if (isNumeric(e.added.id)){ 
        //if its not an existing tag , it passes a string instead of an id
        // so just do a regular add
            add(e.added.id);
        } else {    
        //get the term text, post to server, return the new tag id          
            $.post('handlers/tags.ashx', 
               { operation:"select2createtag", 
                  text: $.trim(e.added.id.substring(3, e.added.id.length))} , 
                  function(data){                   
                        add(data.id);                       
                   });
};
Community
  • 1
  • 1
Jay Rizzi
  • 4,196
  • 5
  • 42
  • 71
  • I feel ya man, I've gone through documentation and at least a dozen forms. Same problem: http://stackoverflow.com/questions/25150065/select2-on-success-retrieve-newly-created-tag-id. Ever find a solution? – Alex Aug 07 '14 at 02:32
  • i did find a solution, i'll post my answer below and take a look at your question too – Jay Rizzi Aug 08 '14 at 17:30

1 Answers1

0

what i ended up doing was use the createsearchchoice function, and during the return i specified the id as concatenated -1 and the term, the text (and an additional variable thats unnecessary)

createSearchChoice: function (term, data) {
    if ($(data).filter(function () {
            return this.text.localeCompare(term) === 0;
        }).length === 0) {
            // call $.post() to add this term to the server, receive back id
            // return {id:id, text:term}
            // or detect this shiftiness and do it below in the on-change

            return {
            id: -1+'/'+term,
            text: $.trim(term) + ' (new tag)'
            , isNew: true
            };

},

Then, during my onchange function, if an add, i evaluate the id; If it exists it will have a numeric ID, if it does not, it means it was created using the createsearchchoice concatenation

I send a post to my server to create that tag by substringing out the new tag from the id (prob would be better to regex, but i digress), and that post returns a tag id which i can then use in a separate post to tag the item

.on("change", function(e) {
    if (e.added) {
    if (isNumeric(e.added.id)){
        add(e.added.id);
        } else {
            $.post('handlers/tags.ashx', { 
               operation:"select2createtag", 
               text: $.trim(e.added.id.substring(3, e.added.id.length))} ,   
               function(data){
               //sql returns a new id for the newly created tag
                e.added.id = data.id;
                add(data.id); // see add function

                });
              };
            };

and here is that add function

function add(tagid){
 ///takes a tag id and inserts it in the relational table between item and tag
        $.ajax({
                    url: "handlers/tags.ashx",
                    dataType: "json",
                    data: {
                        idnumber: entity_id,
                        proposalid: proposal_id,
                        tag: tagid,
                        operation:"select2tag"
                    }
                }).done(function(data){

                    if(data.result == false){
                        alert('tag was not inserted');
                    }
                }).complete(function(data){

                });
}
Jay Rizzi
  • 4,196
  • 5
  • 42
  • 71
  • but will this say create a tag, and then reference the new id returned from ajax as the tag id? select2 is confusing the hell outta me, cant even find where it stores the tag ids for the terms/tags because its not like it queries ajax again when the form submits to see what id relates to what term. – Alex Aug 08 '14 at 19:36
  • yes, that was my objective, and was able to get it to work using the methods outlined above...for example, a new tag "love" will show the id as "-1/love" in the input list, but the e.added.id is being replaced by the data.id , so during tag removal it will remove the correct tag...note will i am not using form submits, just gets and posts – Jay Rizzi Aug 08 '14 at 20:03