I am using jquery token input in one of my project. Following is my way of initiating the tokeninput.
$(document).ready(function(){
var defaultOptions = { searchDelay: 500,
minChars: 3,
};
$('.tokeninput').each(function () {
var field = $(this),
dataOptions = field.data('tokenoptions');
if(dataOptions){
defaultOptions = $.extend(defaultOptions, dataOptions);
}
console.log(defaultOptions);
field.tokenInput("url_to_live_search', defaultOptions);
});
});
I am then passing additional parameters using a "data" attribute in my input field
<input value="105" name="institution_id" required="required" class="tokeninput" data-tokenoptions="<?php echo json_encode(['tokenLimit'=>1,'allowFreeTagging'=>true]);?> type="text">
Its working fine so far. But when I am trying to pass prePopulate parameters also through data options, as below, I am getting an error.
<input value="105" name="institution_id" required="required" class="tokeninput" data-tokenoptions="<?php echo json_encode([tokenLimit] => 1, [allowFreeTagging] => 1, [prePopulate] => {"id":105,"name":"Institution Title"});?> type="text">
Error Uncaught TypeError: Cannot use 'in' operator to search for 'length' in {"id":105,"name":"Institution Title"}
I have done a search on this issue and found that the problem is because of not parsing the JSON. I tried some modifications to my initiator. But its not working. Any help will be appreciated.
I made following changes to my initiator and its working. But I am not sure whether this is the right way. Can you guide.
$(document).ready(function(){
var defaultOptions = { searchDelay: 500,
minChars: 3
};
$('.tokeninput').each(function () {
var field = $(this),
dataOptions = field.data('tokenoptions');
if(dataOptions){
var populateValue = dataOptions.prePopulate;
if(populateValue){
dataOptions = jQuery.grep(dataOptions, function(a) {
return a !== 'prePopulate';
});
populateValue = $.parseJSON(populateValue);
dataOptions = $.extend(defaultOptions, {prePopulate:[populateValue]});
}
defaultOptions = $.extend(defaultOptions, dataOptions);
}
console.log(defaultOptions);
field.tokenInput("url_to_live_search", defaultOptions);
});
});