Best way to do this in Scriptcase - Display Nicely as one field, edit as multiple.

Scriptcase 8 Discussion
#1

I am attempting to create a method that I can reuse over and over again for displaying data… then giving the user the ability to Edit that data, then go back to just displaying it only.

I will use an address for example.
I want to display the address first… in just one field formatted how I like… no problem.
I want an “Edit” button that replaces the single field with separate text boxes for the appropriate data (Name, Address1-3, City, State, etc)
Once the user has made their changes I want to click “Save” or “Update” etc. to get them back to the “Display only” version.

Im just asking for advice on how the best way to do this is for the end user?

If I display the address in text boxes, but remove the ability for them to edit the boxes then the address is very large and takes up a lot of space when its not needed.

Can I toggle a field from hidden back and forth via javascript somehow? So I would hide the “Nicely formatted” field of the address and then show the text boxes when they click an “Edit” button?

Thanks for any advice you can offer.

#2

Hi,
the best in my opinion would be to create two blocks. The first with the formatted address and a button, the second with your fields for editing
and maybe another button to cancel the edit mode.
With some javascript hide the ‘edit’ block and show the ‘formatted’ block at the onLoad event. When clicking the button just switch the blocks and
return to the original setting on afterUpdate event.

Here is a mock up.
Block1: 2 Label fields ({myaddress}, {mybtn}).
Block2: Address fields.

Create a javascript method (switchBlocks) with a variable (vswitch) to be passed in.


if(vswitch == 1)
{
	document.getElementById('div_hidden_bloco_0').style.display = 'none'; //you need to determine the number of the block by inspecting the element in the browser
	document.getElementById('div_hidden_bloco_1').style.display = 'block';
}
else
{
	document.getElementById('div_hidden_bloco_0').style.display = 'block';
	document.getElementById('div_hidden_bloco_1').style.display = 'none';
}

Create a php method (call_switchBlocks):


sc_ajax_javascript('switchBlocks',array(0)); //we need this because we can't call javascript from the onLoad event

onLoad:



{myaddress} = {name}.'<br>'.{address1}.'<br>'.{city};
{mybtn} =  "<button type='button' onclick='switchBlocks(1)'>Edit</button>"; //could be beefed up with some css
php_switch_blocks();

onAfterUpdate:


sc_ajax_javascritp('switchBlocks',array(0));

That should give you a start.

jsb

#3

Thank you SO much! This is EXACTLY what I was looking for.
Not having done this before the only thing I could add to others who may come across this is that when you create the javascript method adding the variable to it is done by clicking the first button in the code editor that says f(x) on it.
Its called the “Attribute” button according to the roll over help and it lets you add a “parameter” which is basically a variable… to the method.

You totally ROCK!
Thanks again!

#4

As a follow up to this I have been looking into the Jquery “toggle” function found here: http://www.w3schools.com/jquery/eff_toggle.asp
Can I use this within script case?
Thanks!