Skip to main content
AXcrystallis
AXcrystallis
Known Participant
March 2, 2010
Question

Form calling a CFWINDOW that sends back to form values of form variables

  • March 2, 2010
  • 2 replies
  • 1082 views

Hi,


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

    This topic has been closed for replies.

    2 replies

    AXcrystallis
    AXcrystallisAuthor
    Known Participant
    March 9, 2010

    Adam,

    Thank you for your help. yes I know that CFWindow is a div, not a popup. I wrote the code with a popup just to show how I was solving the same problem in the past without cfwindow, and in order to help readers understand what I want to replace with cfwindow.

    Well, yes your answer about using GetElementByID is tha base for the solution.

    But meanwhile 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-solve-the-pick-one-of-thousands-issue

    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-solve-the-pick-one-of-thousands-issue-2

    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.

    Thank you both.

    Iason_K

    A
    Anonymous
    March 3, 2010

    It would seem easier to get a zip code table and load it into your system. just ask for the ZIP, and then you can infer the city, state, county from the zip lookup.  Do it as Ajax if you feel sparky...

    D.

    AXcrystallis
    AXcrystallisAuthor
    Known Participant
    March 3, 2010

    Dear GrandNagel

    thank you for your try to help.

    Well just for this case (selecting city) your answer maybe could help.

    But for the general problem when

    - in a form of a child table (eg Projects)

    - we have to choose a record of a master table (eg Customer of the project)

    - and the number of records in the master table is too big for using a SELECT (eg 1000 or 2000 customers),

    then we need a kind of "pop up window" (or cfwindow) over the main form, where to make a kind of search in these 1000 customers in order to pick the one we need for the main form. In this example we can't force the user to know the zip codes of 1000 customers.... We have to use what he really knows, eg a part of customer name, a kind of customer category etc.

    So zip codes don't solve the general problem, I mentioned.

    I write it again, the core of my question is:

    Being in a CFWINDOW, how we can click on something and send value in a field (eg INPUT) existing in a form of the main page.

    Any other idea ???

    AdamPresley
    AdamPresley
    Participating Frequently
    March 5, 2010

    The biggest issue here is that you are thinking of CFWINDOW as a separate popup window, when it is not. It is nothing more than a div. As a result you have access to all the content on the page. So, for example, in a  click handler you could easily grab your page form element using good old fashioned document.getElementById("myFormElement").

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices