Form calling a CFWINDOW that sends back form variables values

[AXcrystallis]

Guys

I have a problem that I think is interesting because it has to do with an issue we all face from time to time developing web applications.

I have solved this problem in the past using popup window and was working just fine, but now using cfwindow there is a point I need your help.

The issue

-------------------

We have a form where we enter data for the fields of a table eg customers.

For each customer we need to know the city where he lives.

We don't want to use a "INPUT type=text...." for the city as free string, because we don't want to have in the database "New York", "NewYork", "New Yor" ""Niw York" etc

We can't use a SELECT because the cities (eg in US) are thousands.

So for this issue in the form I used

A. a hidden field "INPUT type=hidden"..." for the city code (foreign key in the customers table)

B. a "INPUT type=text.." for the city name.

User could not write in this field. When he was clicking on it (or on a small buttom beside it) a popup window was coming and there there was a small form with search criteria for city. This small form (in the popup window) for city search criteria has eg a SELECT of States and a "INPUT type=text" for a part of the city name etc. Submiting this small form (always in the popup window) I was getting a list of a managable number of cities (always in the popup window). In this small list of cities I was CLICKING ON A CITY and 3 ACTIONS WERE HAPPENING

1. The code of the chosen city was going in the hidden field of the main form

2. The name of the chosen city was going in the city name field of the main  form

3. The popupwindow was closing, and I was in the main form again to keep on entering data in the other fields.

Someone could ask why I used in the main form AND a input for the city name, as city code is enough and all we really need. Well I was using AND a "INPUT type=text name=CityName..." just for interface, user had to see something understandable when choosing city in the popup window. Just code, (and hidden one) means nothing for the users.

So,

the code I was implementing this issue in the past using popup window is below.

=============================

The code of the page where the main form is

------ The javascript code in the header of the page ---------

<SCRIPT language=javascript>

    function PopUpWin4City()    {
        var win = window.open( 'PopUpWin4CitySearch.cfm', 'PopUpWin4City','resizable=yes, status=yes, .....');
        win.focus();        }

</SCRIPT>

----- in the body of the page ----

<form name="mainForm" action="WhatEver.cfm" method="post"....>

<input name="cityCode" type="Hidden" .... >

<input name="cityName" type="Text" onclick="PopUpWin4City()" ..... >

.... other input and select fields for customers .....

<input type="submit" ..... >

</form>

End of code in the main form

=======================

==============================================

The code in the popup window (PopUpWin4CitySearch.cfm)

----- in the header of the the popup -------

<SCRIPT language=javascript>
     <!--// Javascript Code Start

     function updCity ( code, name ) {

            top.opener.document.mainForm.cityCode.value = code;
            top.opener.document.mainForm.cityName.value = name;
   
            top.opener.focus();
            window.close();
        }

    // Javascript Code End -->
</SCRIPT>

...................................

whatever CF code for the small form for search criteria for the city.

After giving criteria and submitting the search form (always being in the popup) we have a list like the one below

User can click a buttton next to the city he chooses

...................................

<table .....>

<cfloop query="Q">

<tr>

     <cfoutput>

     <td>#Q.code#</td>

     <td>#Q.name#</td>

     <td><a  href="javascript:updCity( '#Q.code#' , '#Q.Name#' )"><img  src="Button.jpg" ....></a></td>

     </cfoutput>

</tr>

</cfloop>

</table>

End of the code in the popup window (PopUpWin4CitySearch.cfm)

=========================================================

All this were working just fine.

The point is how the same functionality can be done using CFWindow that is a layer, NOT a popup window.

Here is what I have already done for that

========================================

The code of the page where the main form is

<cfajaximport tags="cfwindow,cfform">

<form name="mainForm"  action="WhatEver.cfm" method="post"....>

<input  name="cityCode" type="Hidden" .... >

<input name="cityName" type="Text"

onclick="JavaScript:ColdFusion.Window.create( 'citySearch' , 'City search form' , 'PopUpWin4CitySearch.cfm' ,

{ width:600, minwidth:500, height:450, minheight:300 , draggable:true, closable:true, center:true } )" >

.... other  input and select fields for customers .....

<input  type="submit" ..... >

</form>

End of code in the main form

=====================

=================================================

The code in the CFWindow (PopUpWin4CitySearch.cfm)

...................................

whatever  CF code for the small form for search criteria for the city.

After  giving criteria and submitting the search form (always being in the  CFWindow) we have a list like the one below

User can click a buttton  next to the city he chooses

...................................

<table  .....>

<cfloop query="Q">

<tr>

      <cfoutput>

     <td>#Q.code#</td>

      <td>#Q.name#</td>

     <td><a  href="javascript:????????????"><img  src="Button.jpg" ....></a></td>

or

     <td><img  src="Button.jpg"   onClick="??????????"></td>

      </cfoutput>

</tr>

</cfloop>

</table>

End of the code in the popup window (PopUpWin4CitySearch.cfm)

===================================================

So the point is WHAT HAS TO BE IN THE PLACE OF ????????????

in order to place values  Q.code  and   Q.name  in the main form

and to close the CFWindow.

Doing just the second is easy

<img  src="Button.jpg"  onClick="ColdFusion.Window.destroy( 'citySearch' )">

So could someone help how I could update the fields of the form (mainForm) in the main page, choosing a city in the CFWindow ?

I think it's a general problem about how we make the interface for entering foreign key when the number of records of the master table is too big for a SELECT.

I searched many hours in the net, and I found many articles about how we transfer variables from the main page to the cfwindow, but nothing about the opposite that I need.

Thank you in advance

Iason_K

[AXcrystallis]

Guys,

I found the answer to my problem above and I wanted to share with you in case you need it.

In the net I found an excellent  article of Raymond Camden that is a complete answer to what I was  needing.

The  title is:  Using CF8 Ajax features to solve the 'pick one of  thousands' issue

and the page is here

http://www.coldfusionjedi.com/index.cfm/2008/12/25/Using-CF8-Ajax-features-to-so  lve-the-pick-one-o...

The above is Part-1.

Then he  published a Part-2 about the same issue using jQuery.

The title  is: Using CF8 Ajax features to solve the 'pick one of thousands'  issue (2)

and the page is here

http://www.coldfusionjedi.com/index.cfm/2008/12/31/Using-CF8-Ajax-features-to-so  lve-the-pick-one-o...

I used the part 1 and with some  modifications it works just fine, doing exactly what I was needing,  replacing the popup window and transfering values from the cfwindow to  the form variables of the main page.

Iason_K

[Guest]

@lason_k: thanks for the post. I had a solution using cfdiv's but when I tested it in IE 8.0.6 it won't work so now I need to go down this path. I have a very similar setup which is a cfwindow with a search in it so that the user selects an option and the cfwindow closes and populates the selection (name and ID) in the main page. My problem is that I have many identical rows so need to loop through them and change the id's. When I do that the function won't work and it submits every time the option is selected whci blows away other form variables that were set. Did you run into this? If so, what id you do?

Thanks,

J