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
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 });
}
}
});
}
});
});
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>
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
});
}
});