[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 785
  • Last Modified:

want a jquery option select editInPlace example code

want to find a code example of
edit inplace.js dropdown menu

that uses a form


the only example I can find and use is
http://jquery-in-place-editor.googlecode.com/svn/trunk/demo/index.html

I am looking for another example demo

not looking for jquery.editInPlace source code
0
rgb192
Asked:
rgb192
1 Solution
 
hieloCommented:
Read the comments in the code.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>hielo</title>
		<script type="text/javascript" src="http://jquery-in-place-editor.googlecode.com/svn/trunk/spec/support/jquery-1.4.4.js"></script>
		<script type="text/javascript" src="http://jquery-in-place-editor.googlecode.com/svn/trunk/lib/jquery.editinplace.js"></script>
		<script type="text/javascript">
			$(function(){
				//for the options you need a comma separated list of options.  Each option needs to be formatted as:
				//Format A:						
				//		option_text1:option_value1, option_text2:option_value2, option_text3:option_value3,...
				//and is used to generate/construct 
				//	<option value="option_value1">option_text1</option>
				//	<option value="option_value2">option_text2</option>
				//	<option value="option_value3">option_text3</option>
				//	...
				//OR
				//Format B:
				//		optionTextAndValue1, optionTextAndValue2, optionTextAndValue3,...
				//internally this is "converted" to Format A "optionTextAndValue1:optionTextAndValue1, optionTextAndValue2:optionTextAndValue2, optionTextAndValue3:optionTextAndValue3, ..."
				//and is used to generate/construct
				//	<option value="optionTextAndValue1">optionTextAndValue1</option>
				//	<option value="optionTextAndValue2">optionTextAndValue2</option>
				//	<option value="optionTextAndValue3">optionTextAndValue3</option>
				//	...
				//
				//here's an example that uses Format A.  Ultimately you will see just he abbreviation of the state
				var stateOpt={	'field_type': 'select'
							,'select_text':'Choose a State from the list below'

							,'select_options': 'California:CA, Ohio:OH'

							,'callback': function(element_id, selectedValue, originalText) { 
								return selectedValue;
							}
						};
				//here's an example that uses Format B
				var provinceOpt={	'field_type': 'select'
							,'select_text':'Choose a Province from the list below'
							,'select_options': 'Alberta, Quebec'

							,'callback': function(element_id, selectedValue, originalText) { 
								return selectedValue;
							}
						};
						
				//notice that regardless of which Format you choose, the second argument to the callback
				//function is always the VALUE of the selected <option>
				$('#state').editInPlace(stateOpt);
				$('#province').editInPlace(provinceOpt);
			});
		</script>

	</head>
	<body>
		<div>State: <span id="state" class="editMe">???</span></div>
		<div>Province: <span id="province" class="editMe">???</span></div>
	</body>
</html>

Open in new window

0
 
rgb192Author Commented:
thank you

now I know 2 types of select options
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now