{"id":500,"date":"2012-05-28T11:03:05","date_gmt":"2012-05-28T08:03:05","guid":{"rendered":"https:\/\/polyetilen.lt\/?p=500"},"modified":"2023-04-24T11:44:16","modified_gmt":"2023-04-24T08:44:16","slug":"jquery-jeditable-and-chosen-hybrid","status":"publish","type":"post","link":"https:\/\/polyetilen.lt\/en\/jquery-jeditable-and-chosen-hybrid","title":{"rendered":"jQuery Jeditable and Chosen hybrid"},"content":{"rendered":"<p><a href=\"https:\/\/github.com\/NicolasCARPi\/jquery_jeditable\">Jeditable<\/a> \u2013 edit in place plugin for jQuery. <a href=\"https:\/\/github.com\/harvesthq\/chosen\">Chosen<\/a> - 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.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n\t&lt;head&gt;\r\n\t\t&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text\/html; charset=utf-8&quot; \/&gt;\r\n\t\t&lt;title&gt;jQuery Jeditable and Chosen hybrid&lt;\/title&gt;\r\n\t\t&lt;link type=&quot;text\/css&quot; href=&quot;css\/main.css&quot; rel=&quot;stylesheet&quot; \/&gt;\r\n\t\t&lt;link type=&quot;text\/css&quot; href=&quot;css\/chosen.css&quot; rel=&quot;stylesheet&quot; \/&gt;\r\n\t\t&lt;script type=&quot;text\/javascript&quot; src=&quot;js\/jquery-1.7.2.min.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type=&quot;text\/javascript&quot; src=&quot;js\/jquery.jeditable.min.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type=&quot;text\/javascript&quot; src=&quot;js\/chosen.jquery.min.js&quot;&gt;&lt;\/script&gt;\r\n\t\t&lt;script type=&quot;text\/javascript&quot;&gt;\r\n\t\t$(document).ready(function(){\r\n\t\t\t$('.edit').editable('save.php', {\r\n\t\t\t\t\/\/json from php script\r\n\t\t\t\tloadurl: 'save.php',\r\n\t\t\t\t\/\/or data\r\n\t\t\t\t\/\/data   : &quot; {'0':'Vilnius', '1':'Klaip\u0117da', '2':'Kaunas', '3':'\u0160iauliai', '4':'Palanga', 'selected':'0'}&quot;,\r\n\t\t\t\tindicator: 'Saving...',\r\n\t\t\t\ttooltip: 'Click to edit...',\r\n\t\t\t\tstyle: &quot;inherit&quot;,\r\n\t\t\t\t\/\/Click outside editable area is ignored for select clicks\r\n\t\t\t\tonblur: &quot;ignore&quot;,\r\n\t\t\t\ttype   : 'select',\r\n\t\t\t\tsubmit : 'Submit'\r\n\t\t\t}).click(function(){\r\n\t\t\t\t$(this).find('select').chosen();\r\n\t\t\t});\r\n\t\t});\t\r\n\t\t&lt;\/script&gt;\r\n\r\n\t&lt;\/head&gt;\r\n\t&lt;body&gt;\r\n\t\t&lt;span class=&quot;edit&quot; id=&quot;city&quot;&gt;Vilnius&lt;\/span&gt; is the capital of Lithuania.\r\n\t&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Default list and save action in save.php file:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n&lt;?php\r\nheader('Content-Type: text\/plain; charset=utf-8');\r\nmb_internal_encoding(&quot;UTF-8&quot;);\r\n\r\n$id = 0;\r\nif(isset($_POST&#x5B;'id'])){\r\n\t$id = $_POST&#x5B;'id'];\r\n}\r\n$value = '';\r\nif(isset($_POST&#x5B;'value'])){\r\n\t$value = $_POST&#x5B;'value'];\r\n}\r\n\r\n\/\/default city index\r\n$default_index = 0;\r\n\r\n\/\/example data\r\n$city = array(0=&gt;'Vilnius', 1=&gt;'Klaip\u0117da', 2=&gt;'Kaunas', 3=&gt;'\u0160iauliai', 4=&gt;'Palanga', 'selected'=&gt;$default_index);\r\n\r\n\/\/load default value\r\nif($value == ''){\r\n\t\/\/output json\r\n\techo json_encode($city);\r\n}else{\r\n\t\/\/Saved city exists?\r\n\tif(array_key_exists($value, $city)){\r\n\t\t\/\/output city array selected value\r\n\t\techo $city&#x5B;$value];\r\n\t}else{\r\n\t\t\/\/output city array default value\r\n\t\techo $city&#x5B;$default_index];\r\n\t}\r\n}\r\n<\/pre>\n<p>Download <a href=\"https:\/\/polyetilen.lt\/wp-content\/uploads\/2023\/04\/jeditable_and_chosen.7z\">jQuery Jeditable and Chosen hybrid source code<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jeditable \u2013 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 &hellip; <a href=\"https:\/\/polyetilen.lt\/en\/jquery-jeditable-and-chosen-hybrid\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"en_US","_original_post":"https:\/\/polyetilen.lt\/?p=497","footnotes":""},"categories":[8],"tags":[164,165,166,53],"class_list":["post-500","post","type-post","status-publish","format-standard","hentry","category-programavimas","tag-chosen","tag-hibridinis","tag-jeditable","tag-jquery","en-US"],"_links":{"self":[{"href":"https:\/\/polyetilen.lt\/wp-json\/wp\/v2\/posts\/500","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/polyetilen.lt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/polyetilen.lt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/polyetilen.lt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/polyetilen.lt\/wp-json\/wp\/v2\/comments?post=500"}],"version-history":[{"count":1,"href":"https:\/\/polyetilen.lt\/wp-json\/wp\/v2\/posts\/500\/revisions"}],"predecessor-version":[{"id":502,"href":"https:\/\/polyetilen.lt\/wp-json\/wp\/v2\/posts\/500\/revisions\/502"}],"wp:attachment":[{"href":"https:\/\/polyetilen.lt\/wp-json\/wp\/v2\/media?parent=500"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/polyetilen.lt\/wp-json\/wp\/v2\/categories?post=500"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/polyetilen.lt\/wp-json\/wp\/v2\/tags?post=500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}