Kavya Shree Kavya Shree - 7 months ago 304
Javascript Question

Prepopulate Values in token input textbox from database using PHP

Below is my code For adding number of choices in text as tag using tokeninput.

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"/>
<link rel="stylesheet" href="styles/token-input.css" type="text/css" />
<script type="text/javascript" src="src/jquery.tokeninput.js"></script>
<script>
$("#country").tokenInput([
{id: 1, name: "UK"},
{id: 2, name: "CANADA"},
{id: 3, name: "IRELAND"},
{id: 4, name: "SINGAPORE"},
{id: 5, name: "AUSTRALIA"},
{id: 6, name: "NEWZEALAND"},
{id: 7, name: "SWITZERLAND"},
{id: 8, name: "CYPRUS"},
{id: 9, name: "FRANCE"},
{id: 10, name: "MALAYSIA"},
{id: 11, name: "ITALY"},
{id: 12, name: "SWEDEN"},
{id: 13, name: "GERMANY"},
{id: 14, name: "USA"},
{id: 15, name: "DUBAI"},
{id: 16, name: "SPAIN"},
{id: 17, name: "LITHUANIA"},
{id: 18, name: "NETHERLANDS"},
{id: 19, name: "LATVIA"},
{id: 20, name: "SOUTH AFRICA"},
{id: 21, name: "OTHERS"}
]);
</script>


HTML Code

<input type="text" name="country" id="country" value='<?php echo $country; ?>'>


And For saving result all selected text in database i used

AJAX code

var arr1 = $('#country').tokenInput("get");
var names1 = [];
$.each(arr1, function(i, obj)
{
names1.push(obj.name);
});
var country=names1.join();


And result Database Side AND UI Side

enter image description here
enter image description here

enter image description here

What i want to do now is i want to prepopulate value of country from database and i want to set default in textbox.Fr example first time i added US and Ireland for the id 5 means.while login with id 5 that already inserted value of UK and Ireland should be in selected tag right.How can i do with this.Please Anyone help me to get out of this problem. Thanks in advance!

Answer

From http://loopj.com/jquery-tokeninput/

prePopulate Prepopulate the tokeninput with existing data. Set to an array of JSON objects, eg: [{id: 3, name: "test"}, {id: 5, name: "awesome"}] to pre-fill the input.

var country_list=[ 
{id: 1, name: "UK"}, 
{id: 2, name: "CANADA"}, 
{id: 3, name: "IRELAND"}, 
{id: 4, name: "SINGAPORE"}, 
{id: 5, name: "AUSTRALIA"}, 
{id: 6, name: "NEWZEALAND"}, 
{id: 7, name: "SWITZERLAND"}, 
{id: 8, name: "CYPRUS"}, 
{id: 9, name: "FRANCE"}, 
{id: 10, name: "MALAYSIA"}, 
{id: 11, name: "ITALY"}, 
{id: 12, name: "SWEDEN"}, 
{id: 13, name: "GERMANY"}, 
{id: 14, name: "USA"}, 
{id: 15, name: "DUBAI"}, 
{id: 16, name: "SPAIN"}, 
{id: 17, name: "LITHUANIA"}, 
{id: 18, name: "NETHERLANDS"}, 
{id: 19, name: "LATVIA"}, 
{id: 20, name: "SOUTH AFRICA"}, 
{id: 21, name: "OTHERS"} 
]; 

var selected_countries=<?php echo json_encode(explode($country));?>; 
var populate_list=[]; 
var index; 
for (index = 0; index < country_list.length; ++index) { 

if(selected_countries.indexOf(country_list[index].name)>-1){ 
populate_list.push(country_list[index]); 
} 
} 
var prepopulate = { 
prepopulate : populate_list 
}; 

 $("#country").tokenInput(country_list,prepopulate);