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>
<html>
	<head>
		<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">
		$(document).ready(function(){
			$('.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'
			}).click(function(){
				$(this).find('select').chosen();
			});
		});	
		</script>

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

Default list and save action in save.php file:

<?
header('Content-Type: text/plain; charset=utf-8');
mb_internal_encoding("UTF-8");

$id = $_POST['id'];
$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);
}else{
	//Saved city exists?
	if(array_key_exists($value, $city)){
		//output city array selected value
		echo $city[$value];
	}else{
		//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 , , , , . Bookmark the permalink.

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.