• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 341
  • Last Modified:

Display text window when cfquery is run in background with IFRAME.

A user clicks to add a CD title from a cfquey list. My code works; the cd title is added. When the image is clicked, cfquery "add_one_cd.cfm" is run. The customer is not forced into another page to see that the cd title was added. That's the way I want it. I don't want another page to load.

But after "'add_one_cd.cfm" is run, I need to display a JavaScript configured text window in the middle of the screen for a couple seconds before it dissapates, something like "CD Added To Cart".

I'd settle to force the user to click to remove the text box but it would look much better if the text box went away itself. This should not be an anoying popup. Doing this via the iframe would probably not look too good, and I don't want to show the iframe.

So, the trick is to do this after the user clicks the image.

Show me how.

<body>
<iframe name="brain" src="" width="0" height="0" marginwidth="0" marginheight="0" frameborder="0"></iframe>
 
<input type="image" src="/mail_order/i/add_to_order.gif" onClick="brain.location='add_one_cd.cfm?catalog_id=#area_id#&add_to_cart=1'">

Open in new window

0
Janrow
Asked:
Janrow
  • 3
  • 2
2 Solutions
 
sunithnairCommented:
Try this please
<html>
<head>
<script type="text/javascript">
function showMessage()
{
document.getElementById('divMessage').style.display='block';
var t=setTimeout("document.getElementById('divMessage').style.display='none';",5000)
}
</script>
 
</head>
<body>
<iframe name="brain" src="" width="0" height="0" marginwidth="0" marginheight="0" frameborder="0"></iframe>
 
<input type="image" src="/mail_order/i/add_to_order.gif" onClick="showMessage();brain.location='add_one_cd.cfm?catalog_id=#area_id#&add_to_cart=1'">
<div id="divMessage" style="display:none;">Item Added to Cart</div>
</body>
</html>

Open in new window

0
 
sunithnairCommented:
This shows the message for 5 seconds. Change the time if you want to show it for more time. The time must be in milliseconds
0
 
oleberCommented:
more AJAX like

show the alert only if and when request is ok
<!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>
    <style>
            #my_alert {
                background-color:#efa;
                text-align: center;
                width: 150px;
                display:none;
            }
    </style>
    <script language="javascript">
            function getHttpRequest() {
                var xmlHttp;
                try {
                    xmlHttp = new XMLHttpRequest();
                } catch (e)  {
                    // Internet Explorer
                    try {
                        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        try {
                           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch (e) {
                           alert("Your browser does not support AJAX!");
                           return false;
                        }
                    }
                }
                return xmlHttp;
            }
            
            function include_cd(url, msg) {
                var xmlHttp = getHttpRequest();
                xmlHttp.onreadystatechange = function() {
                    if ( xmlHttp.readyState == 4 ) {
                        document.getElementById("my_alert").style.display='block';
                        setTimeout('document.getElementById("my_alert").style.display="none"', 5000);
                    }
                }
 
                xmlHttp.open( "GET", url, true );
                xmlHttp.send(null);
            }
    </script>
    </head>
    <body>
        <input type="image" src="/mail_order/i/add_to_order.gif" onClick="include_cd('\?your_url_in_here')">
        <div id="my_alert">CD Added To Cart</div>
    </body>
</html>

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
JanrowAuthor Commented:
Oleber: Your solution seems just a bit closer to what I want but it's not working for me. It does on a page by itself but with my variables and tables, the alert is displaying between two table td's and this won't work. I attempted to force the display on top of the tables, on its own layer but this is also not working as the background is wrong and the width of the alert is too narrow.

I'll probably end up with a multiple solution as far as points go but to both of you:

Can we display the alert on top of the tables, on top of everything, in its own box so it can be seen, in the same place, center screen, each time? As you can see I attempted to do this using absolute, right, and left, but the tables td's get in the way.

I included the entire code so you can see what's going on.
<html>
<head>
<style type="text/css">
<!--
a:link {
	text-decoration: underline;
	color:#6666aa;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
a:hover {
	font-style:none;
	color:#66aa66;
	text-decoration: none;
}
a:visited {
	text-decoration: underline;
	color:#aa3333;
}
-->
</style>
<style>
<!--
a, body, table, td, tr, input, textarea {
	font-family: Verdana;
	font-size: 8pt;
}
//
-->
</style>
<style>
#my_alert {
	background-color:#efa;
	text-align: center;
	width: 150px;
	display:none;
}
</style>
<script language="javascript">
            function getHttpRequest() {
                var xmlHttp;
                try {
                    xmlHttp = new XMLHttpRequest();
                } catch (e)  {
                    // Internet Explorer
                    try {
                        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        try {
                           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch (e) {
                           alert("Your browser does not support AJAX!");
                           return false;
                        }
                    }
                }
                return xmlHttp;
            }
            
            function include_cd(url, msg) {
                var xmlHttp = getHttpRequest();
                xmlHttp.onreadystatechange = function() {
                    if ( xmlHttp.readyState == 4 ) {
                        document.getElementById("my_alert").style.display='block';
                        setTimeout('document.getElementById("my_alert").style.display="none"', 1000);
                    }
                }
 
                xmlHttp.open( "GET", url, true );
                xmlHttp.send(null);
            }
    </script>
</head>
 
<body>
 
<iframe name="brain" src="" width="0" height="0" marginwidth="0" marginheight="0" frameborder="0"></iframe>
 
<cfif IsDefined("COOKIE.CART")>
  <cfset CID  = "#COOKIE.CART#">
</cfif>
 
<cfif NOT IsDefined("CID")>
  <CFQUERY NAME="CARTHISTORY" datasource="CART">
   SELECT *
   FROM ORDERS
   WHERE IP = '#CGI.REMOTE_ADDR#'
   AND BROWSER = '#CGI.USER_AGENT#'
   AND DATE_ADDED > #DateAdd("d", -31, Now())#
  </CFQUERY>
  <cfif CARTHISTORY.RecordCount>
    <cfset CID  = '#CARTHISTORY.CID#'>
  </cfif>
</cfif>
 
<cfquery name="TopInfo" datasource="CDLIB">
 SELECT top 100 AREA_ID, TITLE, FILE_COUNT, BYTE_COUNT, DESCRIPTION, CLASS
 FROM AREAS
 WHERE (CLASS = 'm') AND (FILE_AREA = 1)
 AND BYTE_COUNT < 728987876
 AND BYTE_COUNT > 7289870
 AND ONLINE = 1
 order by byte_count desc
</cfquery>
 
<CFPARAM NAME="ITEMS_PER_PAGE" DEFAULT="12">
<CFPARAM NAME="CURRENT_PAGE" DEFAULT="1">
<CFSET TOTAL_PAGES = Ceiling(TopInfo.RecordCount/ITEMS_PER_PAGE)>
<cfset ColumnsPerRow = 3>
<table width="633" border="0" align="center" cellpadding="2" cellspacing="2" bgcolor="#CCCCCC">
<tr bgcolor="#eeeeee">
<td colspan="3" align="center">
Page <cfoutput>#CURRENT_PAGE# of #TOTAL_PAGES#</cfoutput>
 
<cfif TopInfo.RecordCount>
	<cfif TOTAL_PAGES GT 1>
      &nbsp;&nbsp;
      Go to page:
    </cfif>
</cfif>
<cfif TopInfo.RecordCount><cfif TOTAL_PAGES GT 1>
  <CFLOOP FROM="1" TO="#TOTAL_PAGES#" INDEX="PAGE">
    <CFIF PAGE IS CURRENT_PAGE>
      <cfoutput>#PAGE#</cfoutput>
        <CFELSE>
      <cfoutput> <A HREF="/mail_order/add_cds.htm?current_page=#PAGE#">#PAGE#</A> </cfoutput>
     </CFIF>
  </CFLOOP>
</cfif>
</cfif>
 
</td></tr>
</table>
 
<TABLE width="600" bgcolor="white" border="1" align="center" cellpadding="1" cellspacing="1">
 
<cfoutput><tr bgcolor="##EAEAEA"></cfoutput>
 
<CFLOOP Query="TopInfo" startRow="#Evaluate(CURRENT_PAGE*ITEMS_PER_PAGE-ITEMS_PER_PAGE+1)#" endRow="#Evaluate(CURRENT_PAGE*ITEMS_PER_PAGE)#">
<CFOUTPUT>
 
<font size="2" face="Arial, Helvetica, sans-serif">
<cfset NewDescription = Left(DESCRIPTION, 50)>
<cfset NewDescription = ListFirst(NewDescription,".")>
<cfset TMB = byte_count/1024/1024>
 
<cfquery name="FilesInfo" datasource="CDLIB">
 select *
 from files
 where area_id = '#area_id#'
</cfquery>
 
 
<cfset thumbpath = "/tview/#Replace(ListRest(FilesInfo.FILEPATH,"\"),"\","/","all")#">
<cfset newfilename = ListFirst(FilesInfo.FILENAME,".")>
<cfset thumb_ext = "#REReplace(Right(FilesInfo.FILENAME,3),"[^0-9]","","ALL")#.#ListLast(FilesInfo.FILENAME,".")#">
<cfset DISPLAY_FILENAME = "#FilesInfo.filename#">
<cfset ALT_TAGS = FilesInfo.FILENAME>
 
<td bgcolor="##87a4be"><table bgcolor="##aaaaaa" width="100%" border="0" cellspacing="1" cellpadding="1">
 
 
<STYLE TYPE="text/css">
<!--
td.mybackground{
	cursor:hand;
background-image: url(#thumbpath##newfilename##thumb_ext#.JPG);
width: 200px; 
height: 133px; 
 
font-weight:bold;
font-size:20px;
color:white;
vertical-align: top;
text-align: center;
 
 
background-repeat: no-repeat;
background-position: left top;
} -->
 
</STYLE>
 
 
<cfif TopInfo.Class eq 'M'>
<cfset fileclass = 'Special'>
<cfelse>
<cfset fileclass = 'Reserved'>
</cfif>
 
<tr>
 
<td bgcolor="##333333" colspan="6" width="200" height="133">
<div style="position: relative;">
<a href="detail_cd_mail_orders.htm?catalog_id=#area_id#">
 
<img src="#thumbpath##newfilename##thumb_ext#.JPG" border="0" width="200" height="133" alt="Order #Title# #FileClass# by mail.">
 
</a>
 
<CFIF FindNoCase("FireFox", CGI.HTTP_USER_AGENT)>
<cfset divcolor = 'white'>
<cfelse>
<cfset divcolor = 'red'>
</cfif>
 
 
<div style="text-align:center;font-weight:bold;font-size:18px;color:#divcolor#;position:absolute;top:0px;width:200px;left:0;filter:shadow(color:black,strength:5, direction:120)">
<div style="padding:10px">
#ucase(Title)#
</div>
</div
><div style="font-weight:bold;font-size:25px;color:white;position: absolute; top:65px; left:41%;filter:alpha(opacity=60)">CD</div><div style="font-weight:bold;font-size:20px;color:white;position: absolute; top:90px; left:57px;filter:alpha(opacity=60)">Mail Order</div>
</div>
</td>
</tr>
 
<cfset fileformat = "#REReplace(Right(FilesInfo.FILENAME,3),"[^0-9]","","ALL")##ListLast(FilesInfo.FILENAME,".")#">
 
 
<cfquery name="GetCost" datasource="CART">
 select rate
 from config
</cfquery>
 
<cfset TMB = TopInfo.byte_count/1024/1024>
 
<CFSET price = NumberFormat(TMB/100, "9.9")>
<tr bgcolor="##F7E1CE">
<td align="center"><font size="1" face="Arial, Helvetica, sans-serif">#File_Count# #fileclass#</font></td>
<td align="center"><font size="1" face="Arial, Helvetica, sans-serif">$#price#0</font></td>
<td align="center"><a href="detail_cd_mail_orders.htm?catalog_id=#area_id#">Detail</a></td>
</tr>
<tr bgcolor="##F7E1CE">
<td width="20%" align="center"><font size="1" face="Arial, Helvetica, sans-serif">#round(TMB)# Mb</font></td>
<td width="20%" align="center">#fileformat#</td>
<td width="20%" align="center">
 
<cfoutput>
<input type="image" src="/mail_order/i/add_to_order.gif" onClick="include_cd('\?your_url_in_here')">
<div id="my_alert" style="background-color:white;color:black;font-size:36px;text-align:center;font-weight:bold;position:absolute;top:300px;width:200px;left:40%">
Added</div></cfoutput>
</td>
</tr>
</table>
<cfif (currentrow mod ColumnsPerRow) is 0>
</td>
</tr>
</cfif>
</CFOUTPUT>
</CFLOOP>
</table>
</body>
</html>

Open in new window

0
 
JanrowAuthor Commented:
After testing this further I see another problem. When I include the CD title in the lart (a variable), the alert indicates the same CD is always selected. I imagine this is because the JS code is outside the query. Yes, I can remove the variable name of the cd but that won't look too good.

But the main problem here was solved so I'm going to award the points and ask another questions separately.

Thanks
<!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>
    <style>
            #my_alert {
                background-color:#efa;
                text-align: center;
                width: 150px;
                display:none;
            }
    </style>
    <script language="javascript">
            function getHttpRequest() {
                var xmlHttp;
                try {
                    xmlHttp = new XMLHttpRequest();
                } catch (e)  {
                    // Internet Explorer
                    try {
                        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        try {
                           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch (e) {
                           alert("Your browser does not support AJAX!");
                           return false;
                        }
                    }
                }
                return xmlHttp;
            }
            
            function include_cd(url, msg) {
                var xmlHttp = getHttpRequest();
                xmlHttp.onreadystatechange = function() {
                    if ( xmlHttp.readyState == 4 ) {
                        document.getElementById("my_alert").style.display='block';
                        setTimeout('document.getElementById("my_alert").style.display="none"', 2000);
                    }
                }
 
                xmlHttp.open( "GET", url, true );
                xmlHttp.send(null);
            }
    </script>
    </head>
    <body>
    
<cfquery name="TopInfo" datasource="CDLIB">
 SELECT top 10 AREA_ID, TITLE, FILE_COUNT, BYTE_COUNT, DESCRIPTION, CLASS
 FROM AREAS
 WHERE (CLASS = 'm') AND (FILE_AREA = 1)
 AND BYTE_COUNT < 728987876
 AND BYTE_COUNT > 7289870
 AND ONLINE = 1
 order by byte_count desc
</cfquery>
    
<CFOUTPUT Query="TopInfo">
<input type="image" src="/mail_order/i/add_to_order.gif" onClick="include_cd('add_one_cd.cfm?catalog_id=#area_id#&add_to_cart=1')" alt="#TITLE#"><br />
<div id="my_alert">#TITLE# added</div>
</CFOUTPUT>
 
</body>
</html>

Open in new window

0
 
JanrowAuthor Commented:
I believe I was able to solve the CSS layer problem by creating two z-index's. Thanks.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now