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:
<?php
header('Content-Type: text/plain; charset=utf-8');
mb_internal_encoding("UTF-8");
$id = 0;
if(isset($_POST['id'])){
$id = $_POST['id'];
}
$value = '';
if(isset($_POST['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);
}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];
}
}
