{"id":365,"date":"2010-09-13T10:47:22","date_gmt":"2010-09-13T14:47:22","guid":{"rendered":"http:\/\/erics-test-lab.com\/?p=365"},"modified":"2010-09-13T10:47:22","modified_gmt":"2010-09-13T14:47:22","slug":"coldfusion-list-to-modal-window-select-to-javascript-to-coldusion-variable","status":"publish","type":"post","link":"https:\/\/www.esearing.com\/v2010\/2010\/09\/coldfusion-list-to-modal-window-select-to-javascript-to-coldusion-variable\/","title":{"rendered":"Coldfusion list to Modal Window Select to Javascript to Coldusion variable."},"content":{"rendered":"<p>I think I have accomplished what was once thought impossible or at least improbable. I have passed variables to a Modal window, allowed the user to execute a form there, passed the variable back to the parent page using javascript, updated a form variable in a hidden form and displayed the results using coldfusion. In other words Server -> client and used that javascript variable as a cf variable. Mixing client and server side data.<\/p>\n<p>Q1. check to see if multiple sources are available for a particular order number(shows we have duplicate order numbers from different<br \/>\nsystems)<br \/>\n<code>&lt;cfquery name=\"chksource\" datasource=\"yourDS\"&gt;<br \/>\n\t\tselect distinct source from the table<br \/>\n                where order_number = #someordernumber#<br \/>\n&lt;\/cfquery&gt;<\/code><\/p>\n<p>if result is greater than 1  source we have duplicates. So we want the user to select which source they want to use.<br \/>\nFirst we create a form with hidden input field.  We then create the list of sources using valuelist().<br \/>\nWe then pass the valuelist to the window.showModalDialog function where the user can select the options.<br \/>\nAfter the source is selected we pass it back to the form.<br \/>\nWe can then set a coldfusion variable to the form value using cfset and javascript document.write. <\/p>\n<p>\t\t<code>&lt;cfif #chksource.recordcount# gt 1><br \/>\n\t\t\t&lt;cfform name=\"srcform\"&gt;<br \/>\n\t\t\t&lt;cfinput name=\"sourcesel\" type=\"hidden\" \/&gt;<br \/>\n\t\t\t&lt;\/cfform&gt;<br \/>\n&nbsp;<br \/>\n\t\t\t&lt;cfset sources_list=ValueList(chksource.source)&gt;<br \/>\n&nbsp;<br \/>\n\t\t\t&lt;script language=\"javascript\" type=\"text\/javascript\"&gt;<br \/>\n\t\t\tvar returnValue=window.showModalDialog(\"order_chksource.cfm?<br \/>\nsource=<cfoutput>#sources_list#&lt;\/cfoutput>\",\"new_win\",\"width=400,height=200\");<br \/>\n\t\t\tdocument.srcform.sourcesel.value= returnValue;<br \/>\n\t\t\t&lt;\/script&gt;<br \/>\n&nbsp;<br \/>\n&lt;cfset sourcesel = \"&lt;script type='text\/javascript' language='javascript'><br \/>\ndocument.write(document.srcform.sourcesel.value);<br \/>\n&lt;\/script&gt;\"&gt;<br \/>\n\t\t\t&lt;cfoutput&gt;#sourcesel#&lt;\/cfoutput&gt;<br \/>\n&lt;\/cfif&gt;<br \/>\n<\/code><\/p>\n<p>here is the modal window order_chksource.cfm page. It contains a form for the selection of source and the javascript to pass back the selected value to the form on the parent page.<br \/>\n<code>&lt;HEAD&gt;<br \/>\n&lt;TITLE&gt;New Window&lt;\/TITLE&gt;<br \/>\n&lt;script language=\"JavaScript\"&gt;<br \/>\n&lt;!--<br \/>\nfunction sendAndClose(selObj,restore){<br \/>\n    \/\/alert('x='+ selObj.value);<br \/>\n    if (selObj.selectedIndex != 0 ){<br \/>\n      returnValue=selObj.value;<br \/>\n      self.close();<br \/>\n      }<br \/>\n}<br \/>\n\/\/--&gt;<br \/>\n&lt;\/script&gt;<br \/>\n&nbsp;<br \/>\n&lt;\/HEAD&gt;<br \/>\n&lt;BODY&gt;<br \/>\nYour tin is duplicated in Source systems (&lt;cfoutput&gt;#url.source#&lt;\/cfoutput&gt;). Select the source you want to view.<br \/>\n&lt;FORM onsubmit=\"return false;\"&gt;<br \/>\n    &lt;select name=\"menu1\" onChange=\"sendAndClose(this,0)\"&gt;<br \/>\n      &lt;option>--Select--&lt;\/option&gt;<br \/>\n      &lt;cfloop list=\"#url.source#\" index=\"src\" delimiters=\",\"&gt;<br \/>\n            &lt;cfoutput&gt;&lt;option value=\"#src#\"&gt;#src#&lt;\/option>&lt;\/cfoutput&gt;<br \/>\n      &lt;\/cfloop&gt;<br \/>\n &lt;\/select&gt;<br \/>\n&lt;\/FORM&gt;<br \/>\n&lt;\/center&gt;<br \/>\n&lt;\/BODY&gt;<br \/>\n&lt;\/HTML&gt;<\/code><\/p>\n<p>UPDATE:<br \/>\nWhile I can display the variable as <cfoutput>#sourcesel#<\/cfoutput><br \/>\nI could not use the variable in a cfquery as part of the where clause.<br \/>\nThe output prints the <script....  rather than the value.\nThe workaround was to add more hidden fields to the form then resubmit all the same variables plus the new value\nso it reloads the current page (or a new page) with only one source value. \n\nFurther proof you can not mingle server side and client side variables. Believe me I tried every trick under the sun.\nWhat is needed is a JS2CFML plugin for WDDX\nor the reverse of #toScript()#\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I think I have accomplished what was once thought impossible or at least improbable. I have passed variables to a Modal window, allowed the user to execute a form there, passed the variable back to the parent page using javascript, &hellip; <a href=\"https:\/\/www.esearing.com\/v2010\/2010\/09\/coldfusion-list-to-modal-window-select-to-javascript-to-coldusion-variable\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,16,12,14],"tags":[],"class_list":["post-365","post","type-post","status-publish","format-standard","hentry","category-code","category-coldfusion","category-javascript","category-sql"],"_links":{"self":[{"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/posts\/365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/comments?post=365"}],"version-history":[{"count":0,"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/posts\/365\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/media?parent=365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/categories?post=365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/tags?post=365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}