[Webinar] Streamline your web hosting managementRegister Today

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

How To: Popup Form on Drop (Jquery Droppable)

You may preview the code below on my site at: http://brianfalls.com/template2.cfm.

The first 'secondary vignette' has an input field for the date that allows for date input.  There is no validation or anything special on it.  When this vignette is drug and dropped, I would like to have a pop up display a form after the drop with a form to populate the input field.

Any input, whether on topic or simply observations of areas that could be improved in one way or another, is welcome and appreciated.  Thank you all in advance.

Vignette Explanation:
The current script hides the second div and displays the first div on the droppable event.  The first div is the droppable content.  The second div is the thumbnail, mouseover, and draggable content.  I did it that way in order to simplify the layout.  If you have a better way to do it, feel free to critique my code.  :)  I can't emphasize enough my desire to better my ability. The input field will not be used as a form.  Ultimately, this page will be built dynamically, and then saved as a static page via ColdFusion.  I'm solid on the ColdFusion portion, but I am still more novice than I care to be on the JavaScript.  :)  I would like to see a pop-up on the droppable event with an input field that would require a date selection.  The user would select a date and click okay.  The data input in the pop up form would overwrite the default value of the input field. (XX.XX.XXXX).  The date will be the most common for this application, but I would like to understand the process so that I can use it for any application in the future.  There should also be a trigger for the pop up so that it only occurs when an input field is present in the Vignette being dropped.  Please explain your answer(s) thoroughly.  I am really trying to learn and to understand as much as possible.  Thanks!
<!doctype html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>bf.c emTools</title>

<head>

	<script type="text/javascript" src="/ui/js/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.core.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.draggable.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.droppable.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.thumbHover.js"></script>
	<script type="text/javascript" src="/ui/js/png_fix.js"></script>
	
	<script type="text/javascript">
	
		$(function(){
		
			$("img[src*='_min']").thumbPopup({
				imgSmallFlag: "_min",
				imgLargeFlag: "_med"
			}).delay(800);
			
		});
		
		$(document).ready(function(){
		
			// for draggable elements
			$(".imageAsset").draggable({helper: 'clone', snap: '.drop', snapMode: 'inner'});
			
			// for droppable areas with constrainits of 315px x 225px (width x height)
			$(".drop315x225").droppable({
				accept: ".imageAsset",
				activeClass: 'droppable-active',
				hoverClass: 'droppable-hover',
				drop: function(ev, ui) {
				// set content - replace references to thumbnail (_min for the file name and thumbs/ for the path) and 'none;' and 'block;' to display editable vignette content and to hide the thumbnail for the vignette
				var content="#".replace('#', ui.draggable.html().replace('thumbs/','').replace('_min','').replace('inline','none').replace('none','block'));
//				alert(content);
				if ($(this).html() == "") {
					$(this).hide().append(content).fadeIn(1500);
				}
				else
					{
						$(this).empty().hide().append(content).fadeIn(1500);
					}
				}
			});
			
			// for droppable areas with constrainits of 315px x 470px (width x height)
			$(".drop315x470").droppable({
				accept: ".imageAsset",
				activeClass: 'droppable-active',
				hoverClass: 'droppable-hover',
				drop: function(ev, ui) {
				var mainContent="#".replace('#', ui.draggable.html().replace('thumbs/','').replace('_min','').replace('inline;','none;').replace('none;','block;'));
//				alert(mainContent);
				if ($(this).html() == "") {
					$(this).hide().append(mainContent).fadeIn(2000); 
				}
				else
					{
						$(this).empty().hide().append(mainContent).fadeIn(2000);
					}
				}
			});
			
		});

	</script>
	
	<style type="text/css">
	
		/*General*/
		body { font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
		.droppable-hover { outline: 2px dashed; }
		.clear { clear: both; }
		
		/* .png fix for early version of IE */
		img, div, input { behavior: url("/ui/js/png_fix.htc") }
		
		/* availableImages style - left side image library*/
		#availableImages { float: left; width: 250px; border: 1px solid #eee ; }
		#availableImages h4 { clear: both; margin: 0; padding: 0; }
		#availableImages hr { clear: both; display: block;  margin: 0 0 7px 0; color: #eee; background-color: #eee; border-color: #eee; }
		#availableImages ul { display: block; width: 250px; clear: both; margin: 0 0 7px 0; padding: 0; }
		#availableImages li { list-style: none; padding: 0; margin: 0; }
		#availableImages li div.primary { padding: 0; margin: 0; float: left; height: 85px; width: 55px; }
		#availableImages li div.secondary { padding: 0; margin: 0; float: left; height: 59px; width: 80px; }
		
		/* email content style - right side email content build tool*/
		#emailContent { float: left; width: 722px; }
		#emailContent .body {  background-image: url(ui/images/email_bg.png); width: 100%; height: 663px; }
		#emailContent .body .drop315x470 { width: 315px; height: 470px; float: left; border: 1px dashed #777; margin: 0; padding: 0; position: relative; top: 137px; left: 29px; }
		#emailContent .body .drop315x225 { width: 315px; height: 225px; float: left; border: 1px dashed #777; margin: 0; padding: 0; position: relative; top: 137px; left: 49px; }
		#emailContent .body .spacer { width: 315px; height: 17px; float: left; position: relative; top: 157px; left: 49px; }
		
	</style>

</head>

<body>
	
	<div id="availableImages">
		<h4>Primary Area Vignettes</h4>
		<ul>
			<li><div class="primary imageAsset"><img src="/ui/images/thumbs/image6_min.jpg" /></div></li>
		</ul>
		
		<hr />
		
		<h4>Secondary Area Vignettes</h4>
		<ul>
			<li>
				<!--- The current script hides the second div and displays the first div on the droppable event.  The first div is the droppable content.  The second div is the thumbnail, mouseover, and draggable content.  I did it that way in order to simplify the layout.  If you have a better way to do it, feel free to critique my code.  :)  I can't emphasize enough my desire to better my ability. The input field will not be used as a form.  Ultimately, this page will be built dynamically, and then saved as a static page via ColdFusion.  I'm solid on the ColdFusion portion, but I am still more novice than I care to be on the JavaScript.  :)  I would like to see a pop-up on the droppable event with an input field that would require a date selection.  The user would select a date and click okay.  The data input in the pop up form would overwrite the default value of the input field. (XX.XX.XXXX).  The date will be the most common for this application, but I would like to understand the process so that I can use it for any application in the future.  There should also be a trigger for the pop up so that it only occurs when an input field is present in the Vignette being dropped.  Please explain your answer(s) thoroughly.  I am really trying to learn and to understand as much as possible.  Thanks! --->
				<div class="secondary imageAsset">
					<div style=" display: none; ">
						<div style=" margin: 0; padding: 0; background: url(/ui/images/htmlImage1.jpg) no-repeat; width: 315px; height: 225px; border: none; " cellspacing="0" cellpadding="0">
							<input
								type="text"
								style=" width: 80px; background-color: #412412; font-family: Arial,Helvetica,sans-serif; color: #f0e0c7; font-size: 12px; border: none; font-weight: bold; position: relative; top: 169px; left: 202px; "
								maxlength="10"
								value="XX.XX.XXXX"
								name="[contentScriptFieldName]"
								id="expDate_0012569"
								/>
						</div>
					</div>
					<div style=" margin: 0 7px 0 0; padding: 0; float: left; width: 78px; display: inline; ">
						<img style=" display: block; " border="0" src="/ui/images/thumbs/htmlImage1_min.jpg" />
					</div>
				</div>
			</li>
			<li><div class="secondary imageAsset"><img src="/ui/images/thumbs/image1_min.jpg" /></div></li>
			<li><div class="secondary imageAsset"><a href=""><img style=" border: 0px; " src="/ui/images/thumbs/image2_min.png" /></a></div></li>
		</ul>
    </div>
	
	<div id="emailContent">

		<div class="body">
			<div class="drop315x470"></div>
			<div class="drop315x225"></div>
			<div class="spacer"></div>
			<div class="drop315x225"></div>
		</div>
	
	</div>

</body>

</html>

Open in new window

0
brianmfalls
Asked:
brianmfalls
  • 11
  • 7
2 Solutions
 
Mark_FreeSoftwareCommented:
attached code displays a form to unput a date when one of the smaller images is dropped in the smaller field.
i obtained the source by navigating to http://brianfalls.com/template2.cfm, saved the page and edited that
all changes i made are marked: "Mark:"

what you have to do: replace the form background-color style with a transparant png, so it does partially fade out the page, not entirely hide it


let me know if you have any more questions :)

<!doctype html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>bf.c emTools</title>

<head>
	<!-- Mark: url fixes -->
	<script type="text/javascript" src="http://brianfalls.com/ui/js/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="http://brianfalls.com/ui/js/jquery.ui.core.js"></script>
	<script type="text/javascript" src="http://brianfalls.com/ui/js/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="http://brianfalls.com/ui/js/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="http://brianfalls.com/ui/js/jquery.ui.draggable.js"></script>
	<script type="text/javascript" src="http://brianfalls.com/ui/js/jquery.ui.droppable.js"></script>
	<script type="text/javascript" src="http://brianfalls.com/ui/js/jquery.ui.thumbHover.js"></script>
	<script type="text/javascript" src="http://brianfalls.com/ui/js/png_fix.js"></script>
	
	<script type="text/javascript">
	
		$(function(){
		
			$("img[src*='_min']").thumbPopup({
				imgSmallFlag: "_min",
				imgLargeFlag: "_med"
			}).delay(800);
			
		});
		
		$(document).ready(function(){
		
////////////// for draggable elements ////////////// 
			$(".imageAsset").draggable({helper: 'clone', snap: '.drop', snapMode: 'inner'});
			
////////////// for droppable areas (primary area(s)) with dimensions of 315px x 470px (width x height) ////////////// 
			$(".drop315x470").droppable({
				accept: ".imageAsset",
				activeClass: 'droppable-active',
				hoverClass: 'droppable-hover',
				drop: function(ev, ui) {
				var mainContent="#".replace('#', ui.draggable.html().replace('thumbs/','').replace('_min','').replace('inline;','none;').replace('none;','block;'));
//				alert(mainContent);

				if ($(this).html() == "") {
					$(this).hide().append(mainContent).fadeIn(2000); 
				}
				else
					{
						$(this).empty().hide().append(mainContent).fadeIn(2000);
					}
				}
			});
			
////////////// for droppable areas (secondary area(s)) with dimensions of 315px x 225px (width x height) ////////////// 
			$(".drop315x225").droppable({
				accept: ".imageAsset",
				activeClass: 'droppable-active',
				hoverClass: 'droppable-hover',
				drop: function(ev, ui) {
				var content="#".replace('#', ui.draggable.html().replace('thumbs/','').replace('_min','').replace('inline','none').replace('none','block'));
//				alert(mainContent);
				//Mark: show the form if the small image is getting assigned
				$("#formPopup").fadeIn( 800 );
				if ($(this).html() == "") {
					$(this).hide().append(content).fadeIn(1500);
				}
				else
					{
						$(this).empty().hide().append(content).fadeIn(1500);
					}
				}
			});
			//Mark: the onSubmit of the form button hides the form again
			$('#formPopup').submit(function() {
				$('#formPopup').fadeOut( 500 );
				return false;					//dont refresh the page
			});


			
		});

	</script>
	
	<style type="text/css">
	
		/*General*/
		body { font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
		.droppable-hover { outline: 2px dashed; }
		.clear { clear: both; }
		
		/* .png fix for early version of IE */
		/* Mark: url fix */
		img, div, input { behavior: url("http://brianfalls.com/ui/js/png_fix.htc") }	
		
		/* availableImages style - left side image library*/
		#availableImages { float: left; width: 250px; border: 1px solid #eee ; }
		#availableImages h4 { clear: both; margin: 0; padding: 0; }
		#availableImages hr { clear: both; display: block;  margin: 0 0 7px 0; color: #eee; background-color: #eee; border-color: #eee; }
		#availableImages ul { display: block; width: 250px; clear: both; margin: 0 0 7px 0; padding: 0; }
		#availableImages li { list-style: none; padding: 0; margin: 0; }
		#availableImages li div.primary { padding: 0; margin: 0; float: left; height: 85px; width: 55px; }
		#availableImages li div.secondary { padding: 0; margin: 0; float: left; height: 59px; width: 80px; }
		
		/* email content style - right side email content build tool*/
		#emailContent { float: left; width: 722px; }
		/* Mark: url fix */
		#emailContent .body {  background-image: url(http://brianfalls.com/ui/images/email_bg.png); width: 100%; height: 663px; }
		#emailContent .body .drop315x470 { width: 315px; height: 470px; float: left; border: 1px dashed #777; margin: 0; padding: 0; position: relative; top: 137px; left: 29px; }
		#emailContent .body .drop315x225 { width: 315px; height: 225px; float: left; border: 1px dashed #777; margin: 0; padding: 0; position: relative; top: 137px; left: 49px; }
		#emailContent .body .spacer { width: 315px; height: 17px; float: left; position: relative; top: 157px; left: 49px; }
		/* Mark: form background style */
		#formPopup {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0px;
			left: 0px;
			background-color:green;	/*todo: semi-transparant .png*/
		}
		/* Mark: form center div */
		#formBorder {
			left:500px;
			top:200px;
			position: absolute;
			width: auto;
			height: auto;
			text-align:center;
			
		}
		/* Mark: no white borders when the form overlays */
		body, html {
			margin:0px;
			padding: 0px;
		}
	</style>

</head>

<body>
        
	<div id="availableImages">
		<h4>Primary Area Vignettes</h4>
		
		<ul>
			<!-- Mark: url fix -->
			<li><div class="primary imageAsset"><img src="http://brianfalls.com/ui/images/thumbs/image6_min.jpg" /></div></li>
		</ul>
		<hr />
		
		<h4>Secondary Area Vignettes</h4>
		<ul>
			<li>
				
				<div class="secondary imageAsset">
					<div style=" display: none; ">
						<!-- Mark: url fix -->
						<div style=" margin: 0; padding: 0; background: url(http://brianfalls.com/ui/images/htmlImage1.jpg) no-repeat; width: 315px; height: 225px; border: none; " cellspacing="0" cellpadding="0">
							<input
								type="text"
								style=" width: 80px; background-color: #412412; font-family: Arial,Helvetica,sans-serif; color: #f0e0c7; font-size: 12px; border: none; font-weight: bold; position: relative; top: 169px; left: 202px; "
								maxlength="10"
								value="XX.XX.XXXX"
								name="[contentScriptFieldName]"
								id="expDate_0012569"
							/>
						</div>
					</div>
					<div style=" margin: 0 7px 0 0; padding: 0; float: left; width: 78px; display: inline; ">
						<!-- Mark: url fix -->
						<img style=" display: block; " border="0" src="http://brianfalls.com/ui/images/thumbs/htmlImage1_min.jpg" />
					</div>
				</div>
			</li>
			<!-- Mark: url fix -->
			<li><div class="secondary imageAsset"><img src="http://brianfalls.com/ui/images/thumbs/image1_min.jpg" /></div></li>
			<!-- Mark: url fix -->
			<li><div class="secondary imageAsset"><a href=""><img style=" border: 0px; " src="http://brianfalls.com/ui/images/thumbs/image2_min.png" /></a></div></li>
		</ul>
	</div>

	<div id="emailContent">
		<div class="body">
			
			<div class="drop315x470"></div>
			
			<div class="drop315x225"></div>
			<div class="spacer"></div>
			
			<div class="drop315x225"></div>
		</div>
	</div>
	<!-- Mark: form popup, change its background to something not as ugly as solid green -->
	<div id="formPopup" style="display:none">
		<div id="formBorder">
			<form>
				<select name="Month">
					<option> - Month - </option>
					<option value="January">January</option>
					<option value="Febuary">Febuary</option>
					<option value="March">March</option>
					<option value="April">April</option>
					<option value="May">May</option>
					<option value="June">June</option>
					<option value="July">July</option>
					<option value="August">August</option>
					<option value="September">September</option>
					<option value="October">October</option>
					<option value="November">November</option>
					<option value="December">December</option>
				</select>

				<select name="Day">
					<option> - Day - </option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
					<option value="13">13</option>
					<option value="14">14</option>
					<option value="15">15</option>
					<option value="16">16</option>
					<option value="17">17</option>
					<option value="18">18</option>
					<option value="19">19</option>
					<option value="20">20</option>
					<option value="21">21</option>
					<option value="22">22</option>
					<option value="23">23</option>
					<option value="24">24</option>
					<option value="25">25</option>
					<option value="26">26</option>
					<option value="27">27</option>
					<option value="28">28</option>
					<option value="29">29</option>
					<option value="30">30</option>
					<option value="31">31</option>
				</select>

				<select name="Year">
					<option> - Year - </option>
					<option value="2010">2010</option>
					<option value="2009">2009</option>
					<option value="2008">2008</option>
					<option value="2007">2007</option>
					<option value="2006">2006</option>
					<option value="2005">2005</option>
					<option value="2004">2004</option>
					<option value="2003">2003</option>
					<option value="2002">2002</option>
					<option value="2001">2001</option>
					<option value="2000">2000</option>
					<option value="1999">1999</option>
					<option value="1998">1998</option>
					<option value="1997">1997</option>
					<option value="1996">1996</option>
					<option value="1995">1995</option>
					<option value="1994">1994</option>
					<option value="1993">1993</option>
					<option value="1992">1992</option>
					<option value="1991">1991</option>
					<option value="1990">1990</option>
					<option value="1989">1989</option>
					<option value="1988">1988</option>
					<option value="1987">1987</option>
					<option value="1986">1986</option>
					<option value="1985">1985</option>
					<option value="1984">1984</option>
					<option value="1983">1983</option>
					<option value="1982">1982</option>
					<option value="1981">1981</option>
					<option value="1980">1980</option>
					<option value="1979">1979</option>
					<option value="1978">1978</option>
					<option value="1977">1977</option>
					<option value="1976">1976</option>
					<option value="1975">1975</option>
					<option value="1974">1974</option>
					<option value="1973">1973</option>
					<option value="1972">1972</option>
					<option value="1971">1971</option>
					<option value="1970">1970</option>
					<option value="1969">1969</option>
					<option value="1968">1968</option>
					<option value="1967">1967</option>
					<option value="1966">1966</option>
					<option value="1965">1965</option>
					<option value="1964">1964</option>
					<option value="1963">1963</option>
					<option value="1962">1962</option>
					<option value="1961">1961</option>
					<option value="1960">1960</option>
					<option value="1959">1959</option>
					<option value="1958">1958</option>
					<option value="1957">1957</option>
					<option value="1956">1956</option>
					<option value="1955">1955</option>
					<option value="1954">1954</option>
					<option value="1953">1953</option>
					<option value="1952">1952</option>
					<option value="1951">1951</option>
					<option value="1950">1950</option>
					<option value="1949">1949</option>
					<option value="1948">1948</option>
					<option value="1947">1947</option>
					<option value="1946">1946</option>
					<option value="1945">1945</option>
					<option value="1944">1944</option>
					<option value="1943">1943</option>
					<option value="1942">1942</option>
					<option value="1941">1941</option>
					<option value="1940">1940</option>
					<option value="1939">1939</option>
					<option value="1938">1938</option>
					<option value="1937">1937</option>
					<option value="1936">1936</option>
					<option value="1935">1935</option>
					<option value="1934">1934</option>
					<option value="1933">1933</option>
					<option value="1932">1932</option>
					<option value="1931">1931</option>
					<option value="1930">1930</option>
					<option value="1929">1929</option>
					<option value="1928">1928</option>
					<option value="1927">1927</option>
					<option value="1926">1926</option>
					<option value="1925">1925</option>
					<option value="1924">1924</option>
					<option value="1923">1923</option>
					<option value="1922">1922</option>
					<option value="1921">1921</option>
					<option value="1920">1920</option>
					<option value="1919">1919</option>
					<option value="1918">1918</option>
					<option value="1917">1917</option>
					<option value="1916">1916</option>
					<option value="1915">1915</option>
					<option value="1914">1914</option>
					<option value="1913">1913</option>
					<option value="1912">1912</option>
					<option value="1911">1911</option>
					<option value="1910">1910</option>
					<option value="1909">1909</option>
					<option value="1908">1908</option>
					<option value="1907">1907</option>
					<option value="1906">1906</option>
					<option value="1905">1905</option>
					<option value="1904">1904</option>
					<option value="1903">1903</option>
					<option value="1902">1902</option>
					<option value="1901">1901</option>
					<option value="1900">1900</option>
				</select>
				<br />
				<input type="Submit" name="Submit" value="Submit" />
			</form>
		</div>
	</div>

</body>

</html>

Open in new window

0
 
Mark_FreeSoftwareCommented:
unput should be input, too bad there is no edit option.

also, ultimately you would want to generate the date selection fields automatically, instead of hardcoding 100 year fields
0
 
brianmfallsAuthor Commented:
I will check this as soon as possible Mark.  I won't have time until the morning though.  Thanks!
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
brianmfallsAuthor Commented:
I implemented your code (changed it up a bit too).  The only issue is that the vignette's input value doesn't change when the form is submitted.

You can see the implementation at http://brianfalls.com.

Your implementation (unmolested by me...) is at http://brianfalls.com/template2.cfm.  It also does not populate the input value of the vignette upon placement.  I know that one can set/overwrite a fields value based off of the id of the input element.  I am going to look into that in the mean time and see if I can figure it out before you reply.  It's almost there...  :)
<!doctype html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>bf.c emTools</title>

<head>
	
	<!-------------------------------------------------------------- scripts -------------------------------------------------------------->
	<script type="text/javascript" src="/ui/js/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.core.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.draggable.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.droppable.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.thumbHover.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.dates.js"></script>
	<!--[if IE]><script type="text/javascript" src="/ui/js/jquery.ui.bigFrame.js"></script><![endif]-->
	<script type="text/javascript" src="/ui/js/jquery.ui.datePicker.js"></script>
	<script type="text/javascript" src="/ui/js/png_fix.js"></script>

	
	<!-------------------------------------------------------------- script functions -------------------------------------------------------------->
	<script type="text/javascript">
		$(function()
		{
			$('input.date-picker').datePicker();
			$('.date-pick').datePicker({clickInput:true})
		});
	</script>
	
	<script type="text/javascript">
	
		$(function(){
		
			$("img[src*='_min']").thumbPopup({
				imgSmallFlag: "_min",
				imgLargeFlag: "_med"
			}).delay(800);
			
		});
		
		$(document).ready(function(){
		
////////////// for draggable elements ////////////// 
			$(".primary").draggable({helper: 'clone', snap: '.drop', snapMode: 'inner', zIndex: 10000});
			$(".secondary").draggable({helper: 'clone', snap: '.drop', snapMode: 'inner', zIndex: 10000});
			
////////////// for droppable areas (primary area(s)) with dimensions of 315px x 470px (width x height) ////////////// 
			$(".drop315x470").droppable({
				accept: ".primary",
				activeClass: 'droppable-active',
				hoverClass: 'droppable-hover',
				drop: function(ev, ui) {
				var mainContent="#".replace('#', ui.draggable.html().replace('thumbs/','').replace('_min','').replace('inline;','none;').replace('none;','block;'));
//				alert(mainContent);
				if ($(this).html() == "") {
					$(this).hide().append(mainContent).fadeIn(2000); 
				}
				else
					{
						$(this).empty().hide().append(mainContent).fadeIn(2000);
					}
				}
			});
			
////////////// for droppable areas (secondary area(s)) with dimensions of 315px x 225px (width x height) ////////////// 
			$(".drop315x225").droppable({
				accept: ".secondary",
				activeClass: 'droppable-active',
				hoverClass: 'droppable-hover',
				drop: function(ev, ui) {
				var content="#".replace('#', ui.draggable.html().replace('thumbs/','').replace('_min','').replace('inline','none').replace('none','block'));
//				alert(mainContent);
				//Mark: show the form if the small image is getting assigned
				$("#formPopup").fadeIn( 800 );
				if ($(this).html() == "") {
					$(this).hide().append(content).fadeIn(1500);
				}
				else
					{
						$(this).empty().hide().append(content).fadeIn(1500);
					}
				}
			});
			//Mark: the onSubmit of the form button hides the form again
			$('#formPopup').submit(function() {
				$('#formPopup').fadeOut( 500 );
				return false;					//dont refresh the page
			});


			
		});

	</script>
	
	<script type="text/javascript">
		$(function() {
			$("#datepicker").datepicker();
		});
	</script>
	
	<!-------------------------------------------------------------- css -------------------------------------------------------------->
	<link rel="stylesheet" type="text/css" href="ui/css/ui.css">
	<style type="text/css">
	
		/*General*/
		body { font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
		.droppable-hover { outline: 2px dashed; }
		.clear { clear: both; }
		
		/* .png fix for early version of IE */
		img, div, input { behavior: url("/ui/js/png_fix.htc") }
		
		/* availableImages style - left side image library*/
		#availableImages { float: left; width: 250px; border: 1px solid #eee ; }
		#availableImages h4 { clear: both; margin: 0; padding: 0; }
		#availableImages hr { clear: both; display: block;  margin: 0 0 7px 0; color: #eee; background-color: #eee; border-color: #eee; }
		#availableImages ul { display: block; width: 250px; clear: both; margin: 0 0 7px 0; padding: 0; }
		#availableImages li { list-style: none; padding: 0; margin: 0; }
		#availableImages li div.primary { padding: 0; margin: 0; float: left; height: 85px; width: 55px; }
		#availableImages li div.secondary { padding: 0; margin: 0; float: left; height: 59px; width: 80px; }
		
		/* email content style - right side email content build tool*/
		#emailContent { float: left; width: 722px; }
		#emailContent .body {  background-image: url(ui/images/email_bg.png); width: 100%; height: 663px; }
		#emailContent .body .drop315x470 { width: 315px; height: 470px; float: left; border: 1px dashed #777; margin: 0; padding: 0; position: relative; top: 137px; left: 29px; }
		#emailContent .body .drop315x225 { width: 315px; height: 225px; float: left; border: 1px dashed #777; margin: 0; padding: 0; position: relative; top: 137px; left: 49px; }
		#emailContent .body .spacer { width: 315px; height: 17px; float: left; position: relative; top: 157px; left: 49px; }
		#emailContent .foot { width: 100%; height: auto; text-align: center; }
		#emailContent .foot p { margin: 0; padding: 0; }
		
		/* pop up forms (for vignettes) */
		#formPopup { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-image: url(ui/images/backGrounds/bg_modalGrey.png); background-repeat: repeat;	/*todo: semi-transparant .png*/		}
		#formBorder { left: 350px; top: 100px; position: absolute; width: auto; height: auto; text-align: left; border: 1px solid maroon; padding: 14px; background-image: url(ui/images/backGrounds/bg_modalWhite.png); background-repeat: repeat; }
		#formBorder input { font-size: 11px; margin: 3px 0; }
		#formBorder span { font-size: 10px; color: maroon; }
		
	</style>

</head>

<body>
	
	<div id="availableImages">
		<h4>Primary Area Vignettes</h4>
		<ul>
			<li><div class="primary"><img src="/ui/images/thumbs/image5_min.jpg" /></div></li>
			<li><div class="primary"><img src="/ui/images/thumbs/image6_min.jpg" /></div></li>
		</ul>
		
		<hr />
		
		<h4>Secondary Area Vignettes</h4>
		<ul>
			<!--- note: inline style must remain in vignettes. --->
			<!---add 'onclick - select all to form fields' --->
			<li>
				<div class="secondary">
					<div style=" display: none; ">
						<div style=" margin: 0; padding: 0; background: url(/ui/images/htmlImage1.jpg) no-repeat; width: 315px; height: 225px; border: none; " cellspacing="0" cellpadding="0">
							<input
								type="text"
								style=" width: 80px; background-color: #412412; font-family: Arial,Helvetica,sans-serif; color: #f0e0c7; font-size: 12px; border: none; font-weight: bold; position: relative; top: 169px; left: 202px; "
								maxlength="10"
								value="XX.XX.XXXX"
								name="[contentScriptFieldName]"
								id="expDate_0012569"
							/>
						</div>
					</div>
					<div style=" margin: 0 7px 0 0; padding: 0; float: left; width: 78px; display: inline; ">
						<img style=" display: block; border: 0px solid #eee; " src="/ui/images/thumbs/htmlImage1_min.jpg" />
					</div>
				</div>
			</li>
			<li>
				<div class="secondary">
					<span style="font-family: Arial;">
						<img style=" display: block; border: 0px solid #eee; " alt="alt text" src="/ui/images/thumbs/htmlImage2_min.jpg" />
					</span>
				</div>
			</li>
			<li><div class="secondary"><img style=" display: block; border: 0px solid #eee; " src="/ui/images/thumbs/image1_min.jpg" /></div></li>
			<li><div class="secondary"><a href=""><img style=" display: block; border: 0px solid #eee; " src="/ui/images/thumbs/image2_min.png" /></a></div></li>
			<li><div class="secondary"><img style=" display: block; border: 0px solid #eee; " src="/ui/images/thumbs/image3_min.png" /></div></li>
			<li><div class="secondary"><a href=""><img style=" display: block; border: 0px solid #eee; " src="/ui/images/thumbs/image4_min.jpg" /></a></div></li>
		</ul>
    </div>
	
	<div id="emailContent">

		<div id="emailContent">
			<div class="body">
				<!--- Droppable Area for Primary Vignettes. (315x470) --->
				<div class="drop315x470"></div>
				<!--- Droppable Area for Secondary Vignettes. (315x225) --->
				<div class="drop315x225"></div>
				<div class="spacer"></div>
				<!--- Droppable Area for Secondary Vignettes. (315x225) --->
				<div class="drop315x225"></div>
			</div>
		</div>
	
		<div class="foot">
			<p>This email was sent to: %%emailaddr%%</p>
			<br />
			<p>This e-mail was sent by:</p>
			<p>%%Member_Busname%%.</p>
			<p>%%Member_Addr%%</p>
			<p>%%Member_City%%, %%Member_State%%, %%Member_PostalCode%%, %%Member_Country%%</p>
			<br />
			<p>Copyright © 2010 %%Member_Busname%% All rights reserved.</p>
			<br />
			<p>Update Profile | Forward to a Friend | Locations | Qdoba.com</p>
			<br />
			<p>Unsubscribe from: eClub</p>
		</div>
	
	</div>

	<div id="formPopup" style="display: none">
		<div id="formBorder">
			<form>
				<label for="date-picker" style=" font-weight: bold; ">Coupon Expiration Date:</label>
				<input id="date-picker" type="text" maxlength="10"><br />
				<span>Format: 'mm.dd.yyyy'</span>
				<input type="submit" value="Set Coupon Expiration Date" />
			</form>
		</div>
	</div>

</body>

</html>

Open in new window

0
 
brianmfallsAuthor Commented:
Note:  The code above is the most current implementation, with the working form pop up (modal) that does not set the value of the input field of the placed vignette.
0
 
Mark_FreeSoftwareCommented:
$('.expDate_xI').val( 'date here' );

should do the trick (that code should be executed in the button's on click event)
0
 
brianmfallsAuthor Commented:
I managed to get it to work based off of the content variable's replace sequence within an if statement that checks to see whether or not an input field is present.  (in order to restrict when the modal is active)  However, I am not 100% sure on how to set the date based off of the form data.  I tried it in the onClick function as you suggested, but it didn't work.

The Javascript is in the snippet below in working form (with static date)


Vignette Form
<form name="expDate_xF">
      <input
            type="text"
            style=" width: 80px; background-color: #412412; font-family: Arial,Helvetica,sans-serif; color: #f0e0c7; font-size: 12px; border: none; font-weight: bold; position: relative; top: 169px; left: 202px; "
            maxlength="10"
            value="xx.xx.xxxx"
            name="[contentScriptFieldName]"
            id="expDate_xI"
      />
</form>

			$(".drop315x225").droppable({
				accept: ".secondary",
				activeClass: 'droppable-active',
				hoverClass: 'droppable-hover',
				drop: function(ev, ui) {
				var content="#".replace('#', ui.draggable.html().replace('thumbs/','').replace('_min','').replace('inline','none').replace('none','block'));
//				alert(mainContent);
				//Mark: show the form if the small image is getting assigned
				if (content.indexOf('<input') !=-1) {
					$("#formPopup").fadeIn( 800 );
					var content="#".replace('#', content.replace('xx.xx.xxxx', '02.02.2010'));
				}
				if ($(this).html() == "") {
					$(this).hide().append(content).fadeIn(1500);
				}
				else
					{
						$(this).empty().hide().append(content).fadeIn(1500);
					}
				}
			});

Open in new window

0
 
brianmfallsAuthor Commented:
I have classes through the remainder of the afternoon evening.  I'll check back in the morning.  Thanks for all of the help Mark.  It's coming together well, and I am learning quite a bit.
0
 
brianmfallsAuthor Commented:
Still can't get the form to populate the vignette being placed.  Check my comments and you will see where the issue is.  :(

Here's the current script:

      <script type="text/javascript">
      
            $(function(){
            
                  $("img[src*='_min']").thumbPopup({
                        imgSmallFlag: "_min",
                        imgLargeFlag: "_med"
                  }).delay(800);
                  
            });
            
            $(document).ready(function(){
            
////////////// for draggable elements //////////////
                  $(".primary").draggable({helper: 'clone', snap: '.drop', snapMode: 'inner', zIndex: 10000});
                  $(".secondary").draggable({helper: 'clone', snap: '.drop', snapMode: 'inner', zIndex: 10000});
                  
////////////// for droppable areas (primary area(s)) with dimensions of 315px x 470px (width x height) //////////////
                  $(".drop315x470").droppable({
                        accept: ".primary",
                        activeClass: 'droppable-active',
                        hoverClass: 'droppable-hover',
                        drop: function(ev, ui) {
                        var mainContent="#".replace('#', ui.draggable.html().replace('thumbs/','').replace('_min','').replace('inline;','none;').replace('none;','block;'));
//                        alert(mainContent);
                        if ($(this).html() == "") {
                              $(this).hide().append(mainContent).fadeIn(2000);
                        }
                        else
                              {
                                    $(this).empty().hide().append(mainContent).fadeIn(2000);
                              }
                        }
                  });
                  
////////////// for droppable areas (secondary area(s)) with dimensions of 315px x 225px (width x height) //////////////
                  $(".drop315x225").droppable({
                        accept: ".secondary",
                        activeClass: 'droppable-active',
                        hoverClass: 'droppable-hover',
                        drop: function(ev, ui) {
                        var content="#".replace('#', ui.draggable.html().replace('thumbs/','').replace('_min','').replace('inline','none').replace('none','block'));
                        if (content.indexOf('<input') !=-1) {
                              $("#formPopup").fadeIn( 800 );
////////////////need to pause here until form is submitted
                        }
                        if ($(this).html() == "") {
////////////////need to replace text with text from form
                              var content="#".replace('#', content.replace('xx.xx.xxxx', '11.11.2011'));
                              $(this).hide().append(content).fadeIn(1500);
                        }
                        else
                              {
                                    $(this).empty().hide().append(content).fadeIn(1500);
                              }
                        }
                  });
                  
                  //Mark: the onSubmit of the form button hides the form again
                  $('#formPopup').submit(function() {
                        $('#formPopup').fadeOut( 500 );
                        return false;                              //dont refresh the page
                  });
                  
            });

      </script>
0
 
Mark_FreeSoftwareCommented:
i have tried this a bit in the weekend, there seems to be a problem setting the text from the input (also various threads all over the internet explain the same problem)

i suggest you to replace the input element with a div, that you position like the input was positioned, then set the div's text using the jquery modifier .text
(for example with this div:
<div id="dateDiv"></div>
use this javascript:
$("#dateDiv").text( 'new date here' );
0
 
brianmfallsAuthor Commented:
Can't...  Thanks to Microsoft, positioned div's are taboo.  Outlook won't recognize them.  I had to revert to....  brace yourself....   (cough cough) tables (cough cough)  Which, aside from this issue, is causing a mess in Internet Explorer.  It's a double whammy of Microsoft 'goodness'.
0
 
brianmfallsAuthor Commented:
You can see what I am working with at http://brianfalls.com.

I fixed the issue that I mentioned with the droppable and tables in IE.  I had to nest tables within tables to get it to work.  Someone needs to lynch the committee who decided to change outlooks rendering from IE to word.

The issue still remains with setting the field.  IN ADDITION TO...  (IE AGAIN)  the form not working in IE.  It turns out that IE doesn't like indexOf.  Yay!  lol  ;)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>bf.c emTools</title>

<head>

	<!-------------------------------------------------------------- scripts -------------------------------------------------------------->
	<script type="text/javascript" src="/ui/js/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.core.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.draggable.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.droppable.js"></script>
	<script type="text/javascript" src="/ui/js/jquery.ui.thumbHover.js"></script>
	<script type="text/javascript" src="/ui/js/png_fix.js"></script>

	<!-------------------------------------------------------------- script functions -------------------------------------------------------------->

	<script type="text/javascript">
	
		$(function(){
		
			$("img[src*='_min']").thumbPopup({
				imgSmallFlag: "_min",
				imgLargeFlag: "_med"
			}).delay(800);
			
		});
		
		$(document).ready(function(){
		
////////////// for draggable elements ////////////// 
			$(".primary").draggable({helper: 'clone', snap: '.drop', snapMode: 'inner', zIndex: 10000});
			$(".secondary").draggable({helper: 'clone', snap: '.drop', snapMode: 'inner', zIndex: 10000});
			
////////////// for droppable areas (primary area(s)) with dimensions of 315px x 470px (width x height) ////////////// 
			$(".drop315x470").droppable({
				accept: ".primary",
				activeClass: 'droppable-active',
				hoverClass: 'droppable-hover',
				drop: function(ev, ui) {
				var mainContent="#".replace('#', ui.draggable.html().replace('thumbs/','').replace('_min','').replace('inline;','none;').replace('none;','block;'));
//				alert(mainContent);
				if ($(this).html() == "") {
					$(this).hide().append(mainContent).fadeIn(2000); 
				}
				else
					{
						$(this).empty().hide().append(mainContent).fadeIn(2000);
					}
				}
			});
			
////////////// for droppable areas (secondary area(s)) with dimensions of 315px x 225px (width x height) ////////////// 
			$(".drop315x225").droppable({
				accept: ".secondary",
				activeClass: 'droppable-active',
				hoverClass: 'droppable-hover',
				drop: function(ev, ui) {
				var content="#".replace('#', ui.draggable.html().replace('thumbs/','').replace('_min','').replace('inline','none').replace('none','block'));
				if (content.indexOf('<input') !=-1) {
					//alert('The Vignette you selected requires an expiration date.  Please be sure to specify the date.');
					$("#formPopup").fadeIn( 800 );
////////////////need to pause here until form is submitted
				}
				if ($(this).html() == "") {
////////////////need to replace text with text from form
					var content="#".replace('#', content.replace('xx.xx.xxxx', 'xx.xx.xxxx'));
					$(this).hide().append(content).fadeIn(1500);
				}
				else
					{
						$(this).empty().hide().append(content).fadeIn(1500);
					}
				}
			});
			
			//Mark: the onSubmit of the form button hides the form again
			$('#formPopup').submit(function() {
				$('#formPopup').fadeOut( 500 );
				return false;					//dont refresh the page
			});
			
		});

	</script>
	
	<!-------------------------------------------------------------- css -------------------------------------------------------------->
	<link rel="stylesheet" type="text/css" href="ui/css/ui.css">
	<style type="text/css">
	
		/*General*/
		body { font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
		.droppable-hover { outline: 2px dashed; }
		.clear { clear: both; }
		
		#container { width: 1024px; }
		
		/* .png fix for early version of IE */
		img, div, input { behavior: url("/ui/js/png_fix.htc") }
		
				/* availableImages style - left side image library*/
		#availableImages { float: right; width: 250px; border: 1px solid #eee ; }
		#availableImages img { border: none; }
		#availableImages h4 { clear: both; margin: 0; padding: 0; }
		#availableImages hr { clear: both; display: block;  margin: 0 0 7px 0; color: #eee; background-color: #eee; border-color: #eee; }
		#availableImages ul { display: block; width: 250px; clear: both; margin: 0 0 7px 0; padding: 0; }
		#availableImages li { list-style: none; padding: 0; margin: 0; }
		#availableImages li div.primary { padding: 0; margin: 0; float: left; height: 85px; width: 55px; }
		#availableImages li div.secondary { padding: 0; margin: 0; float: left; height: 59px; width: 80px; }
		
		/* email content style - right side email content build tool*/
		#emailContent { width: 722px; }
		#emailContent .body {  background-image: url(ui/images/email_bg.png); width: 100%; text-align: center; }
		#emailContent .body .drop315x470 { margin: 0; padding: 0; }
		#emailContent .body .drop315x225 { margin: 0; padding: 0; }
		#emailContent .body img { border: none; }
		#emailContent .foot { width: 100%; height: auto; text-align: center; }
		#emailContent .foot p { margin: 0; padding: 0; }
		
		/* pop up forms (for vignettes) */
		#formPopup { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-image: url(ui/images/backGrounds/bg_modalGrey.png); background-repeat: repeat;	/*todo: semi-transparant .png*/		}
		#formBorder { left: 350px; top: 100px; position: absolute; width: auto; height: auto; text-align: left; border: 1px solid maroon; padding: 14px; background-image: url(ui/images/backGrounds/bg_modalWhite.png); background-repeat: repeat; }
		#formBorder input { font-size: 11px; margin: 3px 0; }
		#formBorder span { font-size: 10px; color: maroon; }
	
	</style>

</head>

<body>

	<div id="container">
		
		<div id="availableImages">
			<h4>Primary Area Vignettes</h4>
			<ul>
				<li><div class="primary"><img src="/ui/images/thumbs/image5_min.jpg"></div></li>
				<li><div class="primary"><img src="/ui/images/thumbs/image6_min.jpg"></div></li>
			</ul>
			
			<hr>
			
			<h4>Secondary Area Vignettes</h4>
			<ul>
				<!--- note: inline style must remain in vignettes. 
				add 'onclick - select all to form fields' --->
				<li>
					<div class="secondary">
						<table cellpadding="0" cellspacing="0" border="0" style=" display: none; ">
							<tr><td colspan="3"><img src="http://brianfalls.com/ui/images/htmlImage1_slice1.jpg"></td></tr>
							<tr>
								<td><img src="http://brianfalls.com/ui/images/htmlImage1_slice2.jpg"></td>
								<td bgcolor="#412412">
									<form name="expDate_xF" style=" padding: 0; margin: 0; " action="">
										<input type="text" style=" width: 75px; padding: 0; margin: 0; border: 0; background-color: #412412; color: #dcc6af; font-size: 11px; font-weight: bold; " maxlength="10" value="xx.xx.xxxx" name="[contentScriptFieldName]" id="expDate_xI">
									</form>	
								</td>
								<td><img src="http://brianfalls.com/ui/images/htmlImage1_slice4.jpg"></td>
							</tr>
							<tr><td colspan="3"><img src="http://brianfalls.com/ui/images/htmlImage1_slice5.jpg"></td></tr>
						</table>
						<div style=" margin: 0 7px 0 0; padding: 0; float: left; width: 78px; display: inline; ">
							<img src="/ui/images/thumbs/htmlImage1_min.jpg">
						</div>
					</div>
				</li>
				<li>
					<div class="secondary">
						<span style="font-family: Arial;">
							<img alt="alt text" src="/ui/images/thumbs/htmlImage2_min.jpg">
						</span>
					</div>
				</li>
				<li><div class="secondary"><img src="/ui/images/thumbs/image1_min.jpg"></div></li>
				<li><div class="secondary"><a href=""><img src="/ui/images/thumbs/image2_min.png"></a></div></li>
				<li><div class="secondary"><img src="/ui/images/thumbs/image3_min.png"></div></li>
				<li><div class="secondary"><a href=""><img src="/ui/images/thumbs/image4_min.jpg"></a></div></li>
			</ul>
		</div>
		
		
		<div id="emailContent">
	
			<div id="emailContent">
				<div class="body">
					<table cellpadding="0" cellspacing="0">
						<tr>
							<td colspan="5" height="139" width="722"><img src="http://brianfalls.com/ui/images/slice1.png" height="139" width="722"></td>
						</tr>
						<tr>
							<td rowspan="3" height="470" width="30"><img src="http://brianfalls.com/ui/images/slice2.png" height="470" width="30"></td>
							<!--- primary droppable --->
							<td rowspan="3" height="470" width="315" style=" background-image: url(ui/images/slice3.png); ">
								<table cellspacing="0" cellpadding="0">
									<tr>
										<td height="470" width="315" class="drop315x470"></td>
									</tr>
								</table>
							</td>
							<td rowspan="3" height="470" width="20"><img src="http://brianfalls.com/ui/images/slice4.png" height="470" width="20"></td>
							<!--- secondary droppable #1 --->
							<td height="225" width="315" style=" background-image: url(ui/images/slice5.png); ">
								<table cellspacing="0" cellpadding="0">
									<tr>
										<td height="225" width="315" class="drop315x225"></td>
									</tr>
								</table>
							</td>
							<td rowspan="3" height="470" width="42"><img src="http://brianfalls.com/ui/images/slice6.png" height="470" width="42"></td>
						</tr>
						<tr>
							<td height="20px" width="315px"><img src="http://brianfalls.com/ui/images/slice7.png"></td>
						</tr>
						<tr>
							<!--- secondary droppable #2 --->
							<td height="225" width="315" class="drop315x225" style=" background-image: url(ui/images/slice8.png); "></td>
						</tr>
						<tr>
							<td colspan="5" height="54" width="722"><img src="http://brianfalls.com/ui/images/slice9.png" height="54" width="722"></td>
						</tr>
					</table>
				</div>
			</div>
		
			<div class="foot">
				<p>This email was sent to: %%emailaddr%%</p>
				<br>
				<p>This e-mail was sent by:</p>
				<p>%%Member_Busname%%.</p>
				<p>%%Member_Addr%%</p>
				<p>%%Member_City%%, %%Member_State%%, %%Member_PostalCode%%, %%Member_Country%%</p>
				<br>
				<p>Copyright &copy; 2010 %%Member_Busname%% All rights reserved.</p>
				<br>
				<p>Update Profile | Forward to a Friend | Locations | Qdoba.com</p>
				<br>
				<p>Unsubscribe from: eClub</p>
			</div>
		</div>
	</div>

	<div id="formPopup" style="display: none">
		<div id="formBorder">
			<form name="setExpDate" action="">
				<label for="expDate" style=" font-weight: bold; ">Coupon Expiration Date:</label>
				<input id="expDate" name="expDate" type="text" maxlength="10"><br>
				<span>Format: 'mm.dd.yyyy'</span>
				<input type="submit" value="Set Coupon Expiration Date">
			</form>
		</div>
	</div>

</body>

</html>

Open in new window

0
 
Mark_FreeSoftwareCommented:
try to replace this line:
if (content.indexOf('<input') !=-1) {
with this one:
if (content.indexOf('<input') !=-1 && content.indexOf('<INPUT') !=-1) {
0
 
Mark_FreeSoftwareCommented:
excuse me, that && should be || (not letters, but vertical pipes)
0
 
brianmfallsAuthor Commented:
Nice.  That brings up the form in IE.  All we have now is to figure out how to set the field value before the vignette is placed.  I really wish I was better at JavaScript...  frustrating...
0
 
Mark_FreeSoftwareCommented:
var content =  $('expDate').value;
that should probably be:
var content =  $('#expDate').value;
0
 
brianmfallsAuthor Commented:
I actually just got it with

                  $('#formPopup').submit(function() {
                        $('#formPopup').fadeOut( 500 );
                        var content = document.getElementById('expDate').value;
                        document.getElementById('expDate_xI').value = content;
                        alert(content);
                        return false;
                  });

It sets the value on the vignette that is draggable, but not on the vignette that has been dropped.
0
 
brianmfallsAuthor Commented:
It works and it doesn't work.  The problem I am facing now is with the JQuery dropped items.  New question...  Fun times.
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

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