CODEWITHSUNDEEP
jqueryselectize.js
mtsandeep
mtsandeep

Reputation: 330

Creating an item if not already exists in Selectize.js select box and ajax update the new added item

I was using Selectize.js in a select box, What i need is, if an item is not in the list of options i would need to add a new item. When new item is added, i want to have an ajax call to update the newly added item to my database.

In their documentiation, it says that we can use "create" to have the selectize to add an item.

create - Allows the user to create a new items that aren't in the list of options. This option can be any of the following: "true" (default behavior), "false" (disabled), or a function that accepts two arguments: "input" and "callback". The callback should be invoked with the final data for the option.

But i am not able to understand how to use the call back here. can anyone help?

The following is an example of my content, the values are ids of the items in the db. I would like to have the new item added to db and returned with the value as id from db and populate and get selected in the select box.

<select name="fruits" id="fruits" placeholder="Select a fruit" >
    <option value="1">Apple</option>
    <option value="2">Orange</option>
    <option value="3">Mango</option>
    <option value="4">Grape</option>
</select>

<script>
    $(function(){
        $('#fruits').selectize({
            create:function (input, callback){

           }
        });
    });
</script>

Upvotes: 20

Views: 22456

Answers (4)

TheNewTime
TheNewTime

Reputation: 1

The function can take one of two forms: synchronous (with signature function(input){} or asynchronous (with signature function(input, callback){}

when we use asynchronous method us use the callback

<script>
    $(function(){
        $('#fruits').selectize({
            create:function (input, callback){
                //we return the callback that expects us to pass the parameters 
                //to it when the ajax finishes
                if (!input.length) return callback();
                $.ajax({
                    url: '/remote-url/',
                    type: 'GET',
                    success: function (result) {
                        if (result) {
                            callback({ value: result.id, text: input });
                        }
                    }
                });
            }
        });
    });
</script>

When we use synchronous method

<script>
    $(function(){
        $('#fruits').selectize({
            create:function (input){
                return { value: input, text: input };
            }
        });
    });
</script>

Upvotes: 0

Pankaj
Pankaj

Reputation: 169

Thanks a lot, @Corgalore. Its working for me like
$(function(){
        $('#desig').selectize({
            create:function (input, callback){
                $.ajax({
                    url: "<?php  echo $this->url(null, array('controller' => 'employee-detail', 'action' => 'add-new-desig-ajax'));?>",
                    type: 'POST',
                    data:{'designation':input},
                    success: function (result) {
                        if (result) {
//                            console.log('sdfasf',result);
                            callback({ value: result.id, text: input });
                        }
                    }
                });
            }
        });
    });

Upvotes: 0

Corgalore
Corgalore

Reputation: 2566

Actually you must return an object with properties that match the names for your labelField and valueField options:

<script>
    $(function(){
        $('#fruits').selectize({
            create:function (input){
               return { value:123, text:input};
           }
        });
    });
</script>

If you needed to perform a remote operation you would code it like this:

<script>
    $(function(){
        $('#fruits').selectize({
            create:function (input, callback){
                $.ajax({
                    url: '/remote-url/',
                    type: 'GET',
                    success: function (result) {
                        if (result) {
                            callback({ value: result.id, text: input });
                        }
                    }
                });
            }
        });
    });
</script>

Upvotes: 27

Luis Dalmolin
Luis Dalmolin

Reputation: 3486

You have to invoke the callback, passing your values: 

$('#fruits').selectize({
    create:function (input, callback){
        callback({
            value: 123, // probably your ID created or something
            text: input
        });
    }
});

Upvotes: 5

Related Questions