Id like to make a drop down list box where in at the end of the list, an option "Enter New housing", that if selected there will be a message box then it will automatically saves on the database and refreshes the object.
Im a beginner and this is what ive started:
<cfquery name="housingsel" datasource=" " dbtype=" ">
select rtrim(housing_name) as housing, housingid as housingid from housing order by housing
</cfquery>
<!---<cfquery name="housingins" datasource=" " dbtype=" ">
insert into housing (housingid,housing_name) values (1,'Tierra Pura Housing')
</cfquery>--->
<body>
<div class="container">
<div class="content">
<h1>Housing</h1>
<table width="300" bgcolor="#FFFFFF" cellpadding="2" cellspacing="0" border="0">
<cfform action="de_housing.cfm" method="POST">
<tr><td height="20" class="lbl" align="right">Housing</td><td>
<select name="housingcat">
<CFOUTPUT QUERY="housingsel">
<OPTION VALUE="#housingid#">#housing#</OPTION>
</CFOUTPUT>
<option value="new">Enter New Housing</option>
</select>
</td></tr>
<tr><td height="20" class="lbl"></td><td align="left">
</td></tr>
</cfform>
</table>
Please help!
Thanks!
First off, avoid cfform at all costs. It will not help you. See https://github.com/cfjedimaster/ColdFusion-UI-the-Right-Way for reasons why and examples of how to do stuff the right way.
That being said, what you want to do isn't difficult. Let's break it down.
> "Id like to make a drop down list box where in at the end of the list, an option "Enter New housing", that if selected "
Using jQuery, you would add a change handler to your dropdown. In that change handler, you can get the selected index of the drop down. If that index is equal to the length of the options, then the user has picked the last one.
> "there will be a message box"
You have a few choices here. One simple, but not pretty way, is to use the built in confirm option. It has a simple modal box API that the user can type in. There are pretty options, like jQuery UI dialogs, but the confirm option is super simple. I'd recommend starting there.
> "automatically saves on the database"
So, you will know when a user enters a value into the confirm. Take that and use jQuery to do an XHR (Ajax) hit to your code. You will need to write CF code to respond to this request and insert it into the db. Not too difficult and it has been shown many places elsewhere. I'd also add logic to check for dupes.
> "refreshes the object"
When you do a XHR in jQuery, you know when the server is done doing crap, so in the response handler, you can add a new option to the drop down. This too has been done many times before, just Google for adding an option to a drop down. (You will probably end up back here.)
Related
Something weird or something obvious.
I've inherited a coldfusion application, which I need to work with as it is for the meantime, including the widespread use of <CFFORM> etc.
We have a select list as follows:
<cfselect
class="selGroup"
query="get_merchant_categories"
name="category_id"
display="category_name"
value="unique_id"
onclick="document.getElementById('Merchant_Groups_Form').submit();"
size="15">
</cfselect>
This produces the following in the DOM:
<select name="category_id" id="category_id" class="selGroup" onclick="document.getElementById('Merchant_Groups_Form').submit();" size="15">
<option value="1">Equestrian Sports</option>
<option value="2">Other</option>
</select>
and the following page output:
Upon clicking the first item in the select list (Equestrian Sports), the request is seen as follows (NOTE: CSRFTOKEN is a hidden form field):
And the dump at the top of the receiving page is:
So, all is good there.
HOWEVER, when I click the second item in the list ("Other"), the request is OK and looks like this:
But, the dump on the receiving page looks like this:
Been trying to figure this out for over an hour and have no idea what is going on. Maybe someone's come across this before.
I have a button (anchor tag) that send a confirm message if you press it.
The problem is that for example if you press it 5 times very quickly it will send 5 confirm messages, if you press it 2 times it will send 2 messages.
This can occur when the user has low connection speed and while the page is refreshing he presses again the button.
How can I manage this situation? I though of disabling the button but for other reasons this is not possible.
<a class="msg" href="/manage/conversations.cfm?destination=#destination#">
#ucase(request.l('Send'))#
</a>
Thank you for your time
Ultimately, you need to have code on your server to prevent processing the link multiple times from the same user.
However, to solve the UI issue, have you link call a function instead of the cf file directly.
<a class="msg" href="javascript: processLink(#destination#);">
#ucase(request.l('Send'))#
</a>
<script>
runCount = 0;
function processLink(destination){
runCount++;
if (runCount == 1){
window.location.href = "/manage/conversations.cfm?destination=" + destination;
}
}
</script>
As mentioned in the previous answer it's nice to have some client side javascript to stop duplicate submissions from trigger happy users however you should also do this checking server side.
One approach would be to create a hidden formfield with a GUID that coldfusion generates when coldfusion renders your form.
So something like:
<cfset GUID = createUUID()>
<cfoutput>
<form id="frm" action="/target.cfm" method="post">
<input type="hidden" name="guid" value="#GUID#">
<!-- all your formfields go here -->
<input type="submit">
</form>
</cfoutput>
On the server side the target page then checks if it has already previously received the GUID. There are lots of ways to do, here are two of many ways.
a) Use Session Scope.
This is probably the quickest way if you are not running in a clustered environment and just need something quick for a tiny application.
<cfif isDefined("session.MYPAGE_GUID") AND session.MYPAGE_GUID EQ form.guid>
<cfoutput>Duplicate Form Submission</cfoutput>
<cfabort>
<cfelse>
<cfset session.MYPAGE_GUID = form.guid>
<!-- Do Business Logic Here -->
</cfif>
b) Use a Database Table.
Create a database table with a column called GUID. Make sure that GUID is the primary key or has a unique constraint.
Before you run your business logic insert the form.GUID into the database table. If you can do the insert process your business logic, if not the database query will throw an error that the record exists. You can then catch this error and take the appropriate action for a duplicate submission.
I prefer the database option as it works across clustered environments and database server are solid protecting against race conditions to ensure that a GUID is only set once.
Please be aware that this is just demonstrating the basic concepts and is not a drop in solution. There is a bit of more work to get these concepts into an e-commerce solution.
The best way is to disable the link once it's selected. If you don't want to do that, an alternative is to structure conversations.cfm like this.
<div id="pageContent">
small amount of text
</div>
<cfflush>
</body>
</html>
<cfsavecontent variable = "actualPageContent">
code
</cfsavecontent>
<cfoutput>
<script>
var #toScript(actualPageContent, "newPageContent")#;
document.getElementById("pageContent").innerHTML = "newPageContent";
</script>
</cfoutput>
I attach Bootstrap tooltips via
$("[title]").tooltip({ html: true });
When I use a <cfdump>, title tags are attached all over the place. The start of the <cfdump> html looks like this
<table class="cfdump_struct">
<tr><th class="struct" colspan="2" onClick="cfdump_toggleTable(this);" style="cursor:pointer;" title="click to collapse">struct</th></tr>
<tr>
<td class="struct" onClick="cfdump_toggleRow(this);" style="cursor:pointer;" title="click to collapse">Cause</td>
<td>
Is there a way to keep, the two from stepping on eachother?
You shouldn't care because cfdump shouldn't be used in production, however you could just reduce the array returned by the jQuery selector. Not sure if this is the best way to do it, but it works:
$("[title]").filter(function(){
return ($(this).closest(".cfdump_struct").length == 0);
}).tooltip({ html: true });
It runs the filter function for each item in the array returned by the selector. If it is within the CFDUMP table (signified by the .cfdump_struct class) it will not return it. You will have to extend this to other cfdump types (queries, etc) but this should get you started.
Again, it really shouldn't matter since you shouldn't be using cfdump in production code anyway.
You can see this in action here: http://jsfiddle.net/seancoyne/rc7TL/
I am facing an issue working with django ( using shopcart ). I want to add a select options field to change dynamically an item suscription in the cart, but I am not getting the value selected from the template.
In my template where I display the cart I have :
<form action="" method="GET">{%csrf_token%}
<select name="suscr" title="suscr">
<option value="" selected>Suscribe</option>
<option value="1" name="suscr" >Weekly</option>
<option value="2" name="suscr">Monthly</option>
</select>
</form>
I want to select an option and then, if I press 'Checkout' to have the cart updated.
Appart from that, I believe its missing a method modifying the item in cart.py.
Any ideas would help.
Thanks
The above form is inside a loop
{% for item in cart %}
What i propose you to do is not python-oriented but all javascript for the most part as, from the description, we assume that what you are dealing with is going all at the client-side.
As you are dealing with a shopping cart, what i'd do is storing what the user is checking in a sessionStorage so that the information would persist while the user navigates through your website even with multiple tabs. As the user might just be "walking around" you shopping website, there's no need to push things to the database without even knowing if the user wants that. Just remove the form and keep with the select, then you get what the user selected appending an attribute to select: <select onchange=my_function(this.value)>...</select> and then, inside my_functionin a script change whatever you want to the page.
When the user enters the shopping cart page you show him what he selected so far getting the items from the sessionStorageand then, if he/she confirms that wants to buy, then submit a form to the server-side, update the database and proccess that as your workflow states.
tl;dr: store the options in sessionStorage, just post to the server at the end.
For help on the server-side update your question with more info about the cart.py
In APEX 3.2, I want to be able to run JavaScript validations to check the data entered and display the appropriate message above each row in the tabular form.
I'm not sure how this would work given that it is a tabular form and the user will be able to add/delete rows.
Appreciate any ideas or suggestions.
Thanks.
Okay, doing some javascript validations on tabular forms is a bit complex, and you need to know what you're doing.
First off, you will need to know the ids or names of the elements you wish to check. As you may know, elements in tabular forms are stored in arrays in apex on submit, and are accessed through apex_application.g_f01/g_f02/...
This is reflected in the html code, and the generated elements also have the attribute 'name' set to the column they belong to. The id also holds the column, plus the rowindex. Warning though, this id is only generated like this when the item is created 'implicitly', ie you did not write your query with apex_item calls (apex_item.textbox(...)).
Another but is that only fields of which the state is saved will have an array column defined. An item which you'd only show as 'display only', will not be generated with an input tag, and will just be held as text in a td tag.
All by all, when you know that, the next steps should be straightforward enough. Take a look at the page source, and take a note of the elements you wish to target. For example, i went for the job field.
<tr class="highlight-row">
<td headers="CHECK$01" class="data"><label for="f01_0003" class="hideMeButHearMe">Select Row</label><input type="checkbox" name="f01" value="3" class="row-selector" id="f01_0003" /></td>
<td headers="EMPNO_DISPLAY" class="data">7782</td>
<td headers="ENAME" class="data"><label for="f03_0003" class="hideMeButHearMe">Ename</label><input type="text" name="f03" size="12" maxlength="2000" value="CLARK" id="f03_0003" /></td>
<td headers="JOB" class="data"><label for="f04_0003" class="hideMeButHearMe">Job</label><input type="text" name="f04" size="12" maxlength="2000" value="MANAGER" id="f04_0003" /></td>
<td headers="HIREDATE" class="data"><label for="f05_0003" class="hideMeButHearMe">Hiredate</label><span style="white-space: nowrap;"><input type="text" id="f05_0003" name="f05" maxlength="2000" size="12" value="09-JUN-81" autocomplete="off"></span></td>
<td headers="SAL" class="data">
<label for="f06_0003" class="hideMeButHearMe">Sal</label><input type="text" name="f06" size="16" maxlength="2000" value="2450" id="f06_0003" />
<input type="hidden" name="f02" value="7782" id="f02_0003" />
<input type="hidden" id="fcs_0003" name="fcs" value="19BD045E01D6BA148B4DEF9DDC8B21B7">
<input type="hidden" id="frowid_0003" name="frowid" value="AAuDjIABFAAAACTAAC" />
<input type="hidden" id="fcud_0003" name="fcud" value="U" />
</td>
</tr>
In the javascript section of the page i then added the following 2 functions.
validate_job does the validation of just one field, the element elJob. The validation i used is just very basic, it's up to you to determine just how complex you want it.
If you want to reference other fields in the same row here, you can do several things: extract the rowindex from the id, if you have it. If it doesn't hold the it, get the parent TR, and then use .children("input[name='f##'") to get an input element in the same row. Or if you need the value of an item which does not save state at all, you'll need to get the TR element, and then find the TD which contains the element you need through the headers attribute, which holds the column name.
function validate_job(elJob){
var sJob = $v(elJob).toUpperCase();
$(elJob).val(sJob);
//do your validations for the field job here
if(sJob=="MANAGER"){
$(elJob).css({"border-color":"red"});
alert("invalid value!");
//depends what you want to do now:
//keep the focus on this element? Set a flag an error occured? Store the error?
return false;
} else {
$(elJob).css({"border-color":""});
alert("value ok");
};
};
Call bind_validations onload. If you allow rows to be created, bind a click event to the addrow button and call bind_validations.
function bind_validations(){
//f01 : row selector
//f03 : ename
//f04 : job
//f05 : hiredate
//f06 : sal
//each input element with attribute name with value f04
//blur event is when the user leaves the field, fe tab out, or even click apply changes
//much like how when-validate-item behaved in forms
$("input[name='f04']").blur(function(){validate_job(this);});
};
Just a proper warning though. I've used javascript validations in some apps so far, but i knew they were only going to be used by a small number of people, and then only internally. It was only one field, with some validations. I made the cursor refocus on the field when the validation failed, so they couldn't jump to the next record and change that aswell. Either a valid value was given, or they reloaded the page or canceled the action. Set up like this, they can't press apply changes either, as the blur event would also fire, validating the field.
When your audience is larger, it gets a bit more iffy: what i javascript is disabled? What if they find some way around? Wizzkids?
I still like the immediate feedback it gives, but in a more critical environment i'd also use the server-side validations. To do this, you need a validation of the type "function returning error text". Check out this page for an example, or this one for some usefull tips (at least for pre 4.0!). Also: apex 4.1 really improves a lot on tabular form validations! ;)