rbroder
Posts: 67
|
| Posted: 10/02/2012, 1:59 PM |
|
CCS5. I have a form with a checkbox for NewVendor and a TextArea for the vendor information. I would like the text area normally not visible. If new vendor info is required I want the user to check on the checkbox and have the text area appear, all without submitting the form.
|
 |
 |
bannedone
Posts: 273
|
| Posted: 10/02/2012, 4:16 PM |
|
Hi
This is relatively easy. You need to create javascript to do it.
Basically what you do is on your checkbox, add an onclick action that calls a javascript function.
Something like this:
onclick="hideTextArea(this);"
The javascript function checks the state of the checkbox and toggles the textarea's style attribute visibility to hidden vs. visible based on the checked value of your checkbox.
Create yor function like this
function hideTextArea(checkbox){
e=document.getElementById("the_id_attribute_of_your_text_area");
if (checkbox.checked==true){
e.style.visibility=visible;
}else{
e.style.visibility=hidden;
}
}
Something like that should work.
Note.. If onclick does not work due to the fact that possibly the event is triggered before the control is updated.. try maybe the onmouseup event or something like that.
_________________
John Real
CodeCharge Studio Support, Training, Consulting, Development, Web based solutions
http://realsites.biz
http://ccselite.com
Other Banned IDs on this Forum. jjrjr1, jjrjr2 |
|
|
|
Lucius
Posts: 220
|
| Posted: 10/03/2012, 12:26 AM |
|
You could also use here the Show/Hide component feature, if you would like to have it done by CCS. Example of use should be in Example pack you have installed with CCS.
|
|
|
|
solesz
Posts: 137
|
| Posted: 10/03/2012, 2:22 AM |
|
Lucius: hide/show method works on the server side. On client side the method proposed by bannedone works.
There are a few issues on client side with visibility property. If you put content into textarea then you change your mind and you hide it ticking the checkbox, voila: the textarea content will be saved to the database anyway.
I think it is better to disable the control, or before you make it hidden clear it.
|
|
|
|
Lucius
Posts: 220
|
| Posted: 10/03/2012, 3:11 AM |
|
solesz,
Are you sure? I meant the described in CCS help file "AJAX - Hide/Show", I thought it should work client side...
And yes you are right, he would also need to untick the checkbox, but this would also be easy via Client Custom Code feature.
|
|
|
|
bannedone
Posts: 273
|
| Posted: 10/03/2012, 6:07 AM |
|
to clear the textarea on hiide try this
e.value="";
_________________
John Real
CodeCharge Studio Support, Training, Consulting, Development, Web based solutions
http://realsites.biz
http://ccselite.com
Other Banned IDs on this Forum. jjrjr1, jjrjr2 |
|
|
|
solesz
Posts: 137
|
| Posted: 10/04/2012, 4:30 AM |
|
Quote Lucius:
solesz,
Are you sure? I meant the described in CCS help file "AJAX - Hide/Show", I thought it should work client side...
And yes you are right, he would also need to untick the checkbox, but this would also be easy via Client Custom Code feature.
You are right, with the AJAX version. I did not realize the very first word of the original question CCS5 ! Sorry.
|
|
|
|
bannedone
Posts: 273
|
| Posted: 10/04/2012, 7:34 AM |
|
Well To Cool
I missed that too Solesz
I just checked out the AJAX - Hide/Show feature in CCS5.
Lucius is correct, the IDE has a built in way to do this now in CCS5
I actually ran it and it works in general. Very nice.
I looked at the code CCS Generates and it really does not create AJAX code as in making a request to the server.
It actually creates code similar to what I proposed.
I tried it using a check box and there is no built in way to see if the checkbox is checked. The code only fires on events for the control. This makes a toggle a little impossible using the checked or unchecked value of a checkbox.
You might still have to use the method I outlined unless Lucius knows of a way to do it with the built in CCS Code.
Have Fun
BTW Thanks Lucius. I love it when I learn somthing new about CCS!!
_________________
John Real
CodeCharge Studio Support, Training, Consulting, Development, Web based solutions
http://realsites.biz
http://ccselite.com
Other Banned IDs on this Forum. jjrjr1, jjrjr2 |
|
|
|
rbroder
Posts: 67
|
| Posted: 10/04/2012, 7:46 AM |
|
The javascript is not working. I put a panel around the textarea field and in the before show event for the panel, I examine the status of the checkbox and show/hide the panel (and the field) appropriately. That works when moving from record to record. However when I check the checkbox it generates a javascript error: 'null' is not an object (evaluating 'e.style').
I have tried the javascript using e=document.getElementByID("id_of_the_panel") as well as using the actual fieldid.
|
|
|
|
bannedone
Posts: 273
|
| Posted: 10/04/2012, 8:34 AM |
|
Hi rbroder
I think you are confused.
Panels do not have IDs. Also this is all client side so the server side events like before show do not come into play
Code it exactly as I described above and it will work
This is all javascript
Do you know how to add a call to a function from an event on a control???
Where did you place the onclick=""? did you try onmouseup ??
Maybe post your code here??
_________________
John Real
CodeCharge Studio Support, Training, Consulting, Development, Web based solutions
http://realsites.biz
http://ccselite.com
Other Banned IDs on this Forum. jjrjr1, jjrjr2 |
|
|
|
rbroder
Posts: 67
|
| Posted: 10/04/2012, 8:43 AM |
|
Hi bannedone,
I agree, panels do not have ids. However place the text area inside the panel, its id is changed from REQHeadernewVendorInfo to REQHeadernewVendorPanelnewVendorInfo.
I have tried mouseup and on click with the same results. I know the function is being called. I am using Safari's Web Inspector window. Each time I click the checkbox the error is generated.
I realize this is client side processing. I added the explanation of the server side event in case that impacts the overall solution.
Here is the code snippet:
<code>
//REQHeaderchkNewVendor_OnClick @235-B7C1E276
function REQHeaderchkNewVendor_OnClick(checkbox)
{
var result = true;
//End REQHeaderchkNewVendor_OnClick
//Custom Code @241-2A29BDB7
// -------------------------
// Write your own code here.
// define the panel object that has the textarea
e=document.getElementById("REQHeadernewVendorPanelnewVendorInfo");
if (checkbox.checked== true)
{
e.style.visibility=visible;
}
else
{
e.style.visibility=hidden;
}
// -------------------------
//End Custom Code
//Close REQHeaderchkNewVendor_OnClick @235-BC33A33A
return result;
}
//End Close REQHeaderchkNewVendor_OnClick
</code>
Thanks in advance.
rod
|
|
|
|
bannedone
Posts: 273
|
| Posted: 10/04/2012, 8:50 AM |
|
The above code is not what I suggested.
This will not work at all
You need to do it exactly as I descrtibed
Do not use the CCS custom code based on events
Create this function manually in your html as javascript in white space on your page
function hideTextArea(checkbox){
e=document.getElementById("the_id_attribute_of_your_text_area");
if (checkbox.checked==true){
e.style.visibility=visible;
}else{
e.style.visibility=hidden;
e.value="";
}
}
Then find the input HTML for your checkbox
Inside the input tag place
onclick="hideTextArea(this);"
or try onmouseup as I mentioned before. Not sure what order the control gets updated vs the event called.
_________________
John Real
CodeCharge Studio Support, Training, Consulting, Development, Web based solutions
http://realsites.biz
http://ccselite.com
Other Banned IDs on this Forum. jjrjr1, jjrjr2 |
|
|
|
solesz
Posts: 137
|
| Posted: 10/05/2012, 12:16 AM |
|
I think, one of the best solution, if you create a DIV (or more divs) by hand, giving it a unique (and same) ID.
Then, you create the elements which have to be hidden.
Then use jquery or prototype to iterate for DIV IDs within BODY and iterates within the given DIVs for controls to clear the content and hide/show the DIV itself. Even you can attach animation for hiding/showing... It should not exceed 2-3 lines codes at all.
Then you bind the relevant event to control which you want to trigger the hide/show method.
Best not to use CCS5 "AJAX" hide/show event. It will work in some case, but the above (or bannedone's method) works in all case.
|
|
|
|
rbroder
Posts: 67
|
| Posted: 10/05/2012, 8:15 AM |
|
Doesn't work. It's gotta be me.
Here is the javascript. I have tried this in the <head> section and also in the last line of the <body> section without success.
<script language="JavaScript" type="text/javascript">
function hidetextarea(checkbox)
{
e=document.getElementById("REQHeadernewVendorPanelnewVendorInfo");
if (checkbox.checked== true)
{
e.style.visibility=visible;
}
else
{
e.style.visibility=hidden;
}
}
</script>
Here is the html in the checkbox:
<input type="checkbox" id="REQHeaderchkNewVendor" onmouseup="hidetextarea(this);" name="{chkNewVendor_Name}" value="1" {chkNewVendor}>
Here is the html for the text area with panel:
<!-- BEGIN Panel newVendorPanel --> <textarea style="WIDTH: 226px; HEIGHT: 79px" id="REQHeadernewVendorPanelnewVendorInfo" cols="21" rows="4" name="{newVendorInfo_Name}">{newVendorInfo}</textarea><!-- END Panel newVendorPanel -->
Thanks in advance for your help.
rod
|
|
|
|
solesz
Posts: 137
|
| Posted: 10/07/2012, 9:55 AM |
|
I had this issue before.
When you bind event to a control (in your case to a textarea) you have to be sure there is no binding from CCS has made. Because sometime CCS binding hooks the execution before your onmouseup event fires, then it does not give back the execution anymore.
You have to either delete CCS bindings to this control or add your code to CCS event code.
p.s.
I did not evaluate your code for faults, you can do by yourself using javascript debugger to check whether your code loaded without problems into browser. If not you have to refine the code first.
|
|
|
|
bannedone
Posts: 273
|
| Posted: 10/07/2012, 12:01 PM |
|
Also this HTML does not look quite right
<input type="checkbox" id="REQHeaderchkNewVendor" onmouseup="hidetextarea(this);" name="{chkNewVendor_Name}" value="1" {chkNewVendor}>
What is this thing out here all by itself.
{chkNewVendor}
Here too
<textarea style="WIDTH: 226px; HEIGHT: 79px" id="REQHeadernewVendorPanelnewVendorInfo" cols="21" rows="4" name="{newVendorInfo_Name}">{newVendorInfo}</textarea>
what is > doing in this piece??
{newVendorInfo_Name}">
Then later there is another closing tag </textarea>
Dunno but that HTML does not look good to me.
The code I posted works perfectly some how you might have things jumbled as Solesz mentions since the first time you did it you used CCS add client side code which does create addevent bindings. Did you remove the orginial code you inserted using CCS??? Did the bind events get removed by CCS?
Maybe try starting with a new clean page??
Maybe try using Google to search for a solution? You might find explainations of how to do this in a way you will undertsdtand it. I must have trouble communicating what I am trying to say here.
Sorry.
_________________
John Real
CodeCharge Studio Support, Training, Consulting, Development, Web based solutions
http://realsites.biz
http://ccselite.com
Other Banned IDs on this Forum. jjrjr1, jjrjr2 |
|
|
|
Lucius
Posts: 220
|
| Posted: 10/08/2012, 7:36 AM |
|
Hi,
It is possible to do this purely in CCS, check out the "Condition" feature of CCS. It allows you to check condition and then launch some other feature if the condition is met.
|
|
|
|
rbroder
Posts: 67
|
| Posted: 10/09/2012, 8:38 AM |
|
I realize there is a critical piece of information I have not explained: the fields are in an editable grid. I also realized that the ids were not set correctly by CCS for either the checkbox or the text area.
The bad news is, it still does not work. I took bannedone's advice and started a new page with just the check box and text area. The text area is surrounded by a panel. Everything is in an editable grid. I used the javascript with the corrected id ("header1newVendorInfo_{header1:rowNumber}"). Ticking the checkbox now generates the error "can't find variable: hidden". Ticking again generates "can't find variable:visible"
|
|
|
|
bannedone
Posts: 273
|
| Posted: 10/09/2012, 10:13 AM |
|
LOL
Yeah!! That is a critical piece of information not known..
If you like, PM me and let me know if you would like a little training on how to do that in an editable grid.
Have Fun
_________________
John Real
CodeCharge Studio Support, Training, Consulting, Development, Web based solutions
http://realsites.biz
http://ccselite.com
Other Banned IDs on this Forum. jjrjr1, jjrjr2 |
|
|
|
solesz
Posts: 137
|
| Posted: 10/10/2012, 8:11 AM |
|
rbroder:
Case 1
In case of Jquery you can easily handle the situation, because you have to refer to next(s) or previous(es) sibling to the checkbox control. For this you have to know how far the checkbox and textarea are located.
Csae 2
You have to extract out of control ID the relevant serial number (which shows the actual record position within the editable grid) It can be extracted using some text function in javascript. Then pass this serial number to the hiding function. Concat the textarea ID and this serial number together.
|
|
|
|
bannedone
Posts: 273
|
| Posted: 10/10/2012, 9:23 AM |
|
Solesz
Your Case 2 is exactly correct and the easiest way to do it in CCS..
I do it all the time that way LOL
Rbroder
Again if your want the exact code and some assistance on implementing it, let me know.
Have fun
_________________
John Real
CodeCharge Studio Support, Training, Consulting, Development, Web based solutions
http://realsites.biz
http://ccselite.com
Other Banned IDs on this Forum. jjrjr1, jjrjr2 |
|
|
|
bannedone
Posts: 273
|
| Posted: 10/10/2012, 5:13 PM |
|
Well... In for a Penny in for a Pound
So now with all the relevant information.... Here goes again.... LOL
Do it EXACTLY like described here. DO NOT use CCS events. Start with a new clean page and create your editable grid. DO NOT add a panel.
Now find some white space in the html on your page.
Add this function in the appropriate place. (ie: if in whitespace already within script tags just add the function. If in whitespace outside of script tags, be sure to add the script tags around this function)
function hideTextArea(checkbox){
var id=checkbox.id;
var rowid=id.split("_");
var row="_"+rowid[1];
var e=document.getElementById("the_id_attribute_of_your_text_area"+row); //do not include the stuff in {}
if (checkbox.checked==true){
e.style.visibility="visible";
}else{
e.style.visibility="hidden";
e.value="";
}
}
Here is an alternate function to try that might work better if the checkbox value is not updated before the function runs. You will need to determine the starting visible state and checkbox value are correct on the initial page state if using this approach
function hideTextArea(checkbox){
var id=checkbox.id;
var rowid=id.split("_");
var row="_"+rowid[1];
var e=document.getElementById("the_id_attribute_of_your_text_area"+row); //do not include the stuff in {}
if (e.style.visibility=="hidden"){
e.style.visibility="visible";
}else{
e.style.visibility="hidden";
e.value="";
}
}
That is your hide/show textarea toggle function based on the value of your checkbox for the textarea's visibility attribute.
Now here is the easiest way to get "the_id_attribute_of_your_text_area"
Run the grid page. View Source. Find your grid.
You will see for every row the text area will have the id attribute followed by _the_row_number
Everthing before the underscore is the ID value you want to put in the above code. DO NOT INCLUDE the _ and the row number. This above code will figure that out by the row number passed with the checkbox.
Now on the checkbox input control on your grid inside the input tag add either onclick or onmouseup (which ever works as I cannot remember when the value of the checkbox is actually made.)
eg: onclick="hideTextArea(this);"
That should do it.....
LOL if you would like to make a donation, you can do so at PayPal.com to my PayPal account paypal@jjrjr.com
Let me know how this works for you.
Have fun
_________________
John Real
CodeCharge Studio Support, Training, Consulting, Development, Web based solutions
http://realsites.biz
http://ccselite.com
Other Banned IDs on this Forum. jjrjr1, jjrjr2 |
|
|
|
bannedone
Posts: 273
|
| Posted: 10/11/2012, 7:30 AM |
|
Sorry..
I omitted some things in the above code.
The values hidden and visible need to be in quotes.
Review the above code to see the corrections
_________________
John Real
CodeCharge Studio Support, Training, Consulting, Development, Web based solutions
http://realsites.biz
http://ccselite.com
Other Banned IDs on this Forum. jjrjr1, jjrjr2 |
|
|
|
rbroder
Posts: 67
|
| Posted: 10/11/2012, 7:33 AM |
|
Bannedone, thanks for the great information. It's too bad CCS doesn't address this scenario directly in the documentation.
It will take me a couple of days to get back to this, but I have high confidence in your solution.
rod
|
|
|
|
Waspman
Posts: 948
|
| Posted: 10/15/2012, 6:24 AM |
|
Nice help again John:)
This is how I do something similar...
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
The link/trigger...
<a href="javascript:void(0)" onclick="toggle_visibility('track_detail{eid}')">Details...</a> <br>
The div...
<div style="DISPLAY: none" id="track_detail{eid}">
the content - I use the record ID to make things unique.
</div>
_________________
http://www.waspmedia.co.uk |
|
|
|
bannedone
Posts: 273
|
| Posted: 10/15/2012, 10:05 AM |
|
Tony
That is certainly another viable option.
But recall.. we found out after several iterations, this is an editable grid.. LOL
He would need to add the get row code and add it to your example and possibly remove the data from the text area when hidden.
Very good tip doing it your way as well.
_________________
John Real
CodeCharge Studio Support, Training, Consulting, Development, Web based solutions
http://realsites.biz
http://ccselite.com
Other Banned IDs on this Forum. jjrjr1, jjrjr2 |
|
|
|
solesz
Posts: 137
|
| Posted: 10/15/2012, 11:02 PM |
|
I still believe, if you use either jquery or prototype it is more simple in coding.
JQuery, Prototype gives the easiest way to walk&act within the DOM.
You have to only refer to the siblings and do with them what you want.
Only thing you have to care of, if you change the html (DOM) structure you have to apply relevant modification in the code.
(or there would be a good way to select the next (closest) tag with a given ID or name then code maintenance even less important)
And then within the onclick or any kind of event you can do all relevant coding.
For sure, solutions above still works from John and Waspman.
____________________________
never give them fish...
|
|
|
|
bannedone
Posts: 273
|
| Posted: 10/16/2012, 6:52 AM |
|
Solesz
How about an example of your solution?
I would be interested in how do do this with jQuery & Prototype.
I am very interested in your solution since you mention it is more simple than what I proposed. (I always prefer simple) And since you mention your jQuerey & Prototype code would be so simple, it should be easy to share it with us.
Thanks, looking forward to learn something new.
Having fun learning
_________________
John Real
CodeCharge Studio Support, Training, Consulting, Development, Web based solutions
http://realsites.biz
http://ccselite.com
Other Banned IDs on this Forum. jjrjr1, jjrjr2 |
|
|
|
|
