I have a page that provide some information and a cfselect tag.
<cfform name="selectrate" method="post" format="html">
<cfselect name="rateid" query="getrate" value="rateid" display="ratecode" />
</cfform>
<cfajaximport tags="cfform">
<cfdiv id="rateDiv" bind="url:testniva_3.cfm?rateid={rateid}" style="height:1500" bindonload="true">
For each rateid that is selected the cfdiv will call on testniva_3.cfm which provide information for that rateid. The testniva_3.cfm has a <cfsavecontent> tag that will calculate the grandtotal for the cfgrid in the same page. The testniva_3.cfm has this code:
<cfform name="display" format="flash">
<cfgrid name= "cart" query="getdtls" selectmode="edit" width="580">
<cfgridcolumn name="chargename" header="Charge Type" dataalign="right" select="No" >
<cfgridcolumn name="price" header="price"type="numeric" dataalign="right" select="No" >
<cfgridcolumn name="quantity" header="Quantity" type="numeric" dataalign="right" >
</cfgrid>
<cfinput type="Button" name="calculateBtn" value="Calculate Order" onclick="#calculateTotal#">
<cfinput type="Text" name="total" disabled="true" label="Total $" size="5">
</cfform>
The cfdiv seems to bind with the cfselect tag, because when I change the option in cfselect, the data in testniva_3.cfm page also changes, however, instead of remain on the page with all the information and the select option, it give me an error: Error processing JavaScript in markup for element rateDiv: [Enable debugging by adding 'cfdebug' to your URL parameters to see more information
then when I click OK, it refreshs the page and just give me the testniva_3.cfm page without all the information and select option of the main page. If I change the format of the cfgrid on the cfform in the testniva_3.cfm page to html, then the grid refresh the data without any problem, however, my <cfsavecontent>#calculateTotal# will not work with html format.
I am not sure what went wrong, and how to fix it. Any one have any ideas? I would really appreciated.
Thank you.
Related
First off, I'm not really sure how to title this question so I apologize if it's vague. I am trying to create a shopping list using ColdFusion and I've ran into a bit of a snag. I want a delete button to appear next to the item that's been created. I have almost everything working, but I don't understand structures enough in ColdFusion to understand what I am doing wrong. Is it similar to a component in React.js? I ran into an issue saying that the variable "button" is not defined. I'm assuming this is because structkeyExists can't identify a single button. Why would this work for form and not for a button?
Here is my code:
<cfif structKeyExists(form, "submitButt")>
<cfquery datasource="ESC-ADD-TECH">
INSERT INTO Main(itemDesc) VALUES('#itemDesc#')
</cfquery>
</cfif>
<cfif structKeyExists(button, "delete_butt")>
<cfquery datasource="ESC-ADD-TECH">
INSERT INTO Main(itemDesc) VALUES('#itemDesc#')
</cfquery>
</cfif>
<cfquery datasource="ESC-ADD-TECH" name="items">
DELETE FROM Main
WHERE itemDesc = '#itemDesc#'
</cfquery>
<body>
<div id="myDIV" class="header">
<h2>My Shopping List</h2>
<form method="POST">
<input type="text" name="itemDesc" placeholder="Title...">
<input name="submitButt" type="submit" class="addBtn">
</form>
</div>
<cfoutput query="items">
<li>#items.itemDesc# <button class="delete" name="delete_butt">x</button></li>
</cfoutput>
</body>
Is there a way to do what I am trying to do here using a structure? Am I better off creating the button in javascript and try to create a structure as a boolean statement and just have javascript rewrite that value? Kinda just shooting in the dark here, but I would appreciate any and all help.
Thank you everyone!
So there isn't going to be a "button" structure from your form being submitted.
The first thing to remember is that a ColdFusion structure is just a collection of key/value pairs (similar to a JavaScript object), and unless the value is set, will be undefined.
In your case, the "form" struct exists because you are submitting your page back to itself with your input[type="submit"]. Which for a ColdFusion page, will create a form struct with keys for each named input within the submitted form, the values of which are pulled from those elements' value attributes.
If you are trying to use the form struct to handle deleting items, you may be better served using radio buttons/checkboxes to select which item(s) to delete, and set the action to take using the value attribute of your submit buttons.
Using your code as an example:
<cfparam name="form.action" type="string" default="none">
<cfswitch expression="#form.action#">
<cfcase value="insert">
<!---Your insert query goes here--->
</cfcase>
<cfcase value="delete">
<!---Your delete query goes here--->
</cfcase>
<cfdefaultcase></cfdefaultcase>
</cfswitch>
<!---Your select query--->
<body>
<form method="post" action="#">
<div id="myDIV" class="header">
<h2>My Shopping List</h2>
<input type="text" name="itemDesc" placeholder="Title...">
<button type="submit" name="action" value="insert">Submit</button>
</div>
<ul>
<cfoutput query="items">
<li>#items.itemDesc#
<input type="radio" name="delDesc" value="#items.itemDesc#"/>
</li>
</cfoutput>
</ul>
<button type="submit" name="action" value="delete">Delete</button>
</form>
</body>
In this case you will use form.itemDesc when inserting values, and form.delDesc when deleting items.
I have a cfform with multiple fields and I'm using an onpage post method to post information gathered from the user's entries into a session to pass onto each page of the registration process.
What I cannot figure out for the life of me and this is probably something simple is that if I have hard coded options for a how can I pass what is selected into the session? I can get a session.house.main.form.saletype is undefined error when trying to display the value selected on the next page. All my other form fields show up fine.
I removed all the other form fields to make it easier to check my code:
<cfif not structKeyExists(session.house, "main")>
<cfset session.house.main= {saletype="",
name=""}>
</cfif>
<cfparam name="form.saletype" default="#session.house.main.saletype#">
<cfparam name="form.name" default="#session.house.main.name#">
<cfif structKeyExists(form, "submit")>
<cfset session.house.main = {saletype=form.saletype,
name=form.name}>
<cflocation url="page2.cfm" addtoken="false" />
</cfif>
<cfform method="post">
<cfselect name="saletype" size="1">
<option value="Lease" selected>Lease</option>
<option value="Rent Now">Rent Now</option>
</cfselect><br />
<cfinput type="text" name="name" id="name" value="#form.name#" required="yes" message="Please enter your name"><br />
<cfinput type="submit" name="submit" id="submit" value="Save"><br />
</cfform>
Edit: Fixed cfselect name. How would I set the form.saletype into the cfselect with two hardcoded options?
I want to loop the selected number from the list (cfselect). I tried getElementById but only able to display it on the same page. I cannot pass this number to the loop. Can someone help me? Thank you.
function item()
var a = document.formName.numList.selectedIndex;
document.getElementById('i').value = document. family.tBro.options[a].value;
var n=document. family.tBro.options[a].value;
<!----OTHER INPUT TEXT BOXES --->
<cfform name="family" action="complete.cfm" method="post">
How many brothers do you have?
<cfselect name="tBro" onChange="item();" required="yes">
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
<option value="4">4</option>
</cfselect>
<!---DISPLAY THE SELECTED CHOICE from getElementById--->
Total number of brothers: <cfinput type="text" name="i" id="i">
<!---LOOP x amount of time from selected choice above.
For example, if 2 is selected, the below info will display two times
--->
<cfinput type="text" name="firstname" required="yes">
<cfinput type="text" name="lastname" required="yes">
<cfinput type="text" name="Age" required="yes">
<cfinput type="text" name="Ocupation" required="yes">
<!--- END LOOP--->
Tip: state what you're trying to accomplish, rather than the implementation. I had to reread it a few times to understand your need, in which case what your implementation isn't really a good fit.
You're trying to pass JavaScript to CFM code: that's not the way it works. ColdFusion is rendered on the server; JavaScript is rendered on the client. At the moment when item() is called, ColdFusion has finished all of its rendering; you can't effect a CF loop with the result of item().
Without a really complex AJAX solution, you have 2 choices:
refresh the browser when init() is called where you pass dropdown value in the url (not good, as you'd lose state of other form fields)
use something else like jQuery to render your dynamic list of text fields. This is probably the best approach, and a common one. The downside of this is you'll need to implement things like "required" in jQuery, which isn't a big deal, and a common use case.
On CF9, this CFGRID worked fine, at least, it displayed fine (I had other issues with it).
After the update to 9.0.1, its completely blank. I even tried the hotfix, no change. I am dumping the query named "financedetails" above this code and it is showing data. Any ideas? Did cfgrid change substantially in 9.0.1? Or can I no longer use the query attribute for an html cfgrid?
<cfform action="financials.cfm?showid=#url.showid#" style="margin-top:15px;" method="post">
<cfinput type="hidden" name="showid" value="#url.showid#">
<cfgrid query="financedetails" name="finance_grid" format="html" selectmode="edit" insert="yes" delete="yes">
<cfgridcolumn name="Date" type="date">
<cfgridcolumn values="chargeid" name="chargeid" display="false">
<cfgridcolumn values="Setup Fee,blahh,blah,Custom Changes" name="Description">
<cfgridcolumn name="Amount">
<cfgridcolumn name="InvoiceDate" type="date">
<cfgridcolumn name="PaidDate" type="date">
<cfgridcolumn name="Notes">
</cfgrid>
<p><input type="submit" value="Save Changes"></p>
</cfform>
This might because coldfusion 9 was using ExtJs 3.0 which is upgraded to ExjtJs 3.1 for coldfusion 9.0.1.
Check following should resolve it.
If you just updated to 9.0.1 then it may possible that js taking from browser cache which is version 3.0 causing this issue. Try to clear browser cache and try again.
Make sure you are not not using dflat/gzip on server side if so then clear file from server as well.
If you modified grid to add header or footer then you need to look for compatibility. check http://www.cfminds.com/post.cfm/updating-coldfusion-9-0-0-to-9-0-1
To make sure correct version of extjs.js is downloading, open firebug script tab and check the source of extjs.js and look into comment it should say version 3.1.0 instead of 3.0.0.
I think above four check will solve your issue.
-Pritesh
Within a form I have a button that launches a cfwindow, then presents a search screen for the user to make a selection. Once selection is made, the cfwindow closes and the selected content shows in the main page by being bound to a cfdiv. This all works fine in FF but the cfdiv doesn't show at all in IE. In IE, the cfwindow works, the select works, but then no bound page.
I have tried setting bindonload and that made no difference (and I need it to be true if there is content that is pulled in via a query when it loads). All I have been able to find so far regarding this issue is setting bindonload to false and putting the cfdiv outside of the form but that's not possible in my current design.
*4/21 update
This works as expected in FF 3.6.3 and Safari 4, but does not work in multiple IE versions. In IE, the cfwindow works, the select works, but when the window closes and it tries to load the page into the div it just spins.
This is the main page, test.cfm:
<cfajaximport tags="cfwindow, cfform, cfdiv, cftextarea, cfinput-datefield">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<cfset i = 1>
<cfform>
<table>
<cfloop from="1" to="4" index="n">
<tr>
<td class="left" style="white-space:nowrap;">
<cfoutput>#n#</cfoutput>. <cfinput type="button" value="Select #n#" name="x#n#Select#i#" onClick="ColdFusion.Window.create('x#n#Select#i#', 'Exercise Lookup', 'xSelect/xSelect2.cfm?xNameVar=x#n#S#i#&window=x#n#Select#i#&workout=workout#i#', {x:100,y:100,height:500,width:720,modal:true,closable:true,draggable:true,resizable:true,center:true,initshow:true,minheight:200,minwidth:200 })" />
<cfdiv bind="url:xSelect/x2.cfm" ID="x#n#S#i#" tagName="span" bindonload="false" />
<cfinput type="hidden" ID="x#n#s#i#" name="x#n#s#i#" value="#n#" />
</td>
</tr>
</cfloop>
</table>
</cfform>
</body>
</html>
This is the cfwindow, xSelect2.cfm:
<cfparam name="form.xSelected" default="0">
<cfoutput>
1<br />
2<br />
3<br />
4<br />
</cfoutput>
This is the page bound to the cfdiv, x2.cfm:
<cfajaximport tags="cfwindow, cfform, cfdiv, cftextarea, cfinput-datefield">
<cfparam name="url.xName" default="">
<cfparam name="url.xNameVar" default="">
<cfparam name="url.xID" default=0>
<form>
<cfoutput>
<input type="text" id="xName" name="xName" value="#url.xName#" size="27" disabled="true" />
<input type="hidden" id="xNameVar" name="xNameVar" value="#url.xNameVar#" />
<input type="hidden" id="#url.xNameVar#xID" name="#url.xNameVar#xID" value="#url.xID#" />
</cfoutput>
</form>
I am significantly stuck so any help is greatly appreciated.
AND OF COURSE IF ANYONE HAS A BETTER IDEA OF HOW TO ACHIEVE THE SAME FUNCTIONALITY PLEASE SHARE!
Thanks!
The answer was very, very simple. I got the clue from Mathijs' Weblog on whitehorsez.com (thank you!!).
Evidently IE doesn't like nested forms so all I needed to do in the end was remove the form tags from x2.cfm above. It makes that page incorrect, but when read into the cfdiv it works and posts all the correct values to the form. I finished one other rough solution using getElementById which eliminated the extra page but the problem with it was that you had to save before you could change the value if there were multiple options. Here is the new and simple x2.cfm:
<cfoutput>
<input type="text" name="xName" value="#url.xName#" size="27" disabled="true" />
<input type="hidden" name="xNameVar" value="#url.xNameVar#" />
<input type="hidden" name="#url.xNameVar#xID" value="#url.xID#" />
</cfoutput>