jQuery Jeditable and Chosen hybrid

Jeditable – edit in place plugin for jQuery. Chosen - jQuery plugin that makes select boxes user-friendly. So why not combine them together. This javascript code will let you select in place with Chosen select box.

<!DOCTYPE html>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jQuery Jeditable and Chosen hybrid</title>
		<link type="text/css" href="css/main.css" rel="stylesheet" />
		<link type="text/css" href="css/chosen.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.jeditable.min.js"></script>
		<script type="text/javascript" src="js/chosen.jquery.min.js"></script>
		<script type="text/javascript">
			$('.edit').editable('save.php', {
				//json from php script
				loadurl: 'save.php',
				//or data
				//data   : " {'0':'Vilnius', '1':'Klaipėda', '2':'Kaunas', '3':'Šiauliai', '4':'Palanga', 'selected':'0'}",
				indicator: 'Saving...',
				tooltip: 'Click to edit...',
				style: "inherit",
				//Click outside editable area is ignored for select clicks
				onblur: "ignore",
				type   : 'select',
				submit : 'Submit'

		<span class="edit" id="city">Vilnius</span> is the capital of Lithuania.

Default list and save action in save.php file:

header('Content-Type: text/plain; charset=utf-8');

$id = 0;
	$id = $_POST['id'];
$value = '';
	$value = $_POST['value'];

//default city index
$default_index = 0;

//example data
$city = array(0=>'Vilnius', 1=>'Klaipėda', 2=>'Kaunas', 3=>'Šiauliai', 4=>'Palanga', 'selected'=>$default_index);

//load default value
if($value == ''){
	//output json
	echo json_encode($city);
	//Saved city exists?
	if(array_key_exists($value, $city)){
		//output city array selected value
		echo $city[$value];
		//output city array default value
		echo $city[$default_index];

Download jQuery Jeditable and Chosen hybrid source code.

This entry was posted in Programming and tagged , , , .

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.