Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Cfform post to cfwindow

Posted on 2008-06-17
2
Medium Priority
?
1,503 Views
Last Modified: 2013-12-24
Hi,

I have a search results page that displays a list of products that the user can add to a shopping cart.

I want a cfwindow to appear and display the contents of the shopping cart when the cfform submits.

Is there a way to target the window in the cfform tag?

Almost like so:



<cfform name="AddToBasket" action="#Application.WebRoot#/shoppingbasket/basket.cfm?ServiceType=AC" method="post" target="cfWindowName">

Open in new window

0
Comment
Question by:TIO-Solutions
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 36

Accepted Solution

by:
SidFishes earned 375 total points
ID: 21805886
I put this together a couple of weeks ago....it's a little more complex than what you are asking for but it should give you an idea of what is possible.
 
This snippet provides a cfwindow which scrolls with the page. I developed this for a shopping cart.
It allows customers to see what's in their cart while scrolling on long shopping pages.
Requires an additional file called windowContent.cfm (see commented section in head)

The original rePositionWindow set the vertical position on load and then stopped. By using the
setInterval function in windowContent.cfm, we call rePositionWindow every 1 second. Since rePositionWindow
finds the current Window Element object relative to the viewport, we can apply myWindow.moveTo(X,Y) and it will
also be relative to the viewport. The rest is just getting the window to show and hide as required.

In the example I pass a url variable on creation of the window to get cart information.
The cfwindow would allow you to delete items from the cart via an ajax call (shown as alert()'s in the example
Because of the setInterval call we are not able to offer any input boxes as these lose focus every second, which
makes entry impossible. For my purposes, delete via ajax is fine.

This has been tested in FF3, IE7 and Safari 3.11 (for pc)

see http://www.danvega.org/blog/index.cfm/2008/3/7/Adding-Custom-Buttons-to-ltcfwindowgt for adding buttons to cfwindow
see http://www.coldfusionguy.com/ColdFusion/blog/index.cfm/2008/4/22/Reposition-A-CFWindow--From-Center
for original rePositionWindow function

important:must include the button.js src to access addButton

note: this does not detect browser resolution ...I expect it wouldn't be that hard to dynamically set the moveTo(X,Y) but I didn't go that far. If your site is set for a specific min width, hard coding the values should be fine... (the example is for w=1024)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!--- 
 
 
 
---- windowContent.cfm ---
<cfoutput>
<script type="text/javascript">
var showCfWin = #url.showCfWin#
if(showCfWin==true){
	setInterval("rePositionWindow('detail')",1000);
	}
</script>
<h3>CartID: #url.vCartID#</h3>
 
<button onclick="alert('Deleted Itemid1');">X</button> Item 1<br>
<button onclick="alert('Deleted Itemid2');">X</button> Item 2<br>
<button onclick="alert('Deleted Itemid3');">X</button> Item 3<BR> 
</cfoutput> 
--------------------------
 
--->
	
<script type="text/javascript" src="http://10.10.10.225/CFIDE/scripts/ajax/ext/package/button/button.js"></script>
 
<script language="JavaScript">
var showCfWin = true
function init(){
	//called from ajaxonload
		myWindow = ColdFusion.Window.getWindowObject('detail');
		myWindow.addButton({
		text:"Hide Cart",
		cls:"x-btn-text-icon",
		handler:hideWin         
      })
    }
    
function hideWin()
	{
		myWindow = ColdFusion.Window.getWindowObject('detail');
		myWindow.moveTo(910,205);
		myWindow.hide()
		showCfWin = false
	}
	
	function showWin()
	{	
		showCfWin=true;
		myWindow = ColdFusion.Window.getWindowObject('detail');
		 ///hide so first appearance doesn't cause flashing'
	    myWindow.hide();
	    myWindow.moveTo(910,205);
	    myWindow.show();
	}
	
   rePositionWindow = function(windowName){
   //Get window object    
   myWindow = ColdFusion.Window.getWindowObject(windowName);
   ///hide so appearance doesn't cause flashing'
   myWindow.hide();
   myWindow.center();
   //get the Window Element object    
   winEl = myWindow.getEl();
   if (showCfWin==false){
   myWindow.moveTo(910,205);
   myWindow.hide();
   }
   else{
   	myWindow.hide();
   myWindow.moveTo(910,205);
   myWindow.show();
   }
   }
</script> 
</head>
 
<bodY>
<div style="display:block;width:1100px;border:1px dashed;height:190px;padding:10px;">
<h1>Welcome to our store</h1>
This is our lovely banner. 
</div>
<div style="width:1100px;">
<div style="float:right;width:198px;border:1px dashed;text-align:center;height:2000px;">
<button onClick="showWin();">Show Cart</button>
</div>
 
<div style="height:2000px;width:898px;display:block;border:1px dashed;padding:25px;">
	
<h2>Roving Cart</h2>
 
</div>
</div>
<cfset vCartID = left(createuuid(), 10)>
<cfwindow closable="true" initShow="false" name="detail" title ="Your Cart"
			source="windowContent.cfm?vcartid=#vCartID#&showCfWin=true"
			Width="190"	
			height="300"
			y="225"	
			x="910"
			>
</cfwindow>	
 <cfset ajaxonload("init")>
</bodY>
</html>

Open in new window

0
 

Author Comment

by:TIO-Solutions
ID: 21811071
Thanks for your help, that did give me a good idea of what can be done, and given me an idea of how to improve our current basket.

I have attached the solution our developer came up with as well. It works quite well if you want to do a simple post to a cfwindow.

<cfinput type="image" src="#Application.WebRoot#/images/website/addtobasket.gif" name="Submit" value="Add to my Basket" style="border:0px; padding-bottom:10px;" onClick="ColdFusion.Window.show('MessageWindow');javascript:ColdFusion.navigate('#Application.WebRoot#/travelbasket/travelbasket.cfm?ServiceType=AC','MessageWindow','','','POST','test');">

Open in new window

0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The viewer will learn how to dynamically set the form action using jQuery.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question