Since edit-in-place feature can be very helpful on the backend and can be implemented with ease. If you have used Flickr then you know what I am referring to. Now you can quickly add this feature into your Mambo/Joomla component by following the simple procedure below. The source code was commented as needed so feel free to poke around!

Newest version can be download at my personal blog http://www.alexle.net or at http://extensions.joomla.org/. Prototype1.4.0 is currently bundled in this release. I place no restriction on the license, do whatever your heart desires!

• Unzip and copy all files to your admininistrator component folder.
• Edit editinplace.php

Update the array to enable tables for edit-in-place features.

// Change this array to allow tables to be enabled for edit-in-place features
// This is implemented as a security feature, just in case the mallicious user change the post info
$eip_allowed_tables = array( “table1″,
			     “table2″,
			     “table3″
			    );

• Edit editinplace.js

Find the saveChanged function, change the componentName variable to the name of your component, including the com_ part. E.g. com_myJoomlaComponent.

function saveChanges(obj){
	// Update this to point to your component!

	var componentName = ‘com_dealerlocator’;
 

• Adding the necessary javascript libraries and css stylesheet file to your component.

Before printing out your component content, add these lines to your files. Remember to change the component folder accordingly

<!– Setup the javascript for the edit-in-place function–>

<link href=“components/com_your_component_name/editinplace.css” rel=“Stylesheet” type=“text/css” />
<script src=“components/com_your_component_name/prototype.js” type=“text/javascript”></script>

<script src=“components/com_your_component_name/editinplace.js” type=“text/javascript”></script>

• You can quickly change a regular div into an editable div by using this syntax in your component. Note, any div with the class “makeEditable” will become edit-in-place-enabled. If you have a conflicts, change the class to something else and update the editinplace.js accordingly. Also, include a   in the div will help as if the div is empty, the user won’t be able to click on it to update! Don’t worry, the   is trimmed before going to the database.

<div class=“makeEditable” eip_id=“id_of_the_record_to_edit” eip_id_column=“column_name_of_the_id” eip_table=“name_of_tale_in_the_allowed_list” eip_field=“what_field_to_update”>current_content_of_the_field&nbsp;</div>

For example, I have this $dealer associative array from a foreach loop, the $dealer can be described as follows

Array
(
    [dealer_id] =>
    [dealer_name] =>
    [dealer_address] =>
    [dealer_city] =>
    [dealer_zip] =>
    [dealer_state] =>
    [dealer_country] =>
    [dealer_phone] =>
    [dealer_fax] =>
    [dealer_email] =>
    [dealer_website] =>

    [dealer_type] =>
)

In the case the table I am updating is called “dealers”, the code necessary to make the “dealer_address” field become editable is

<div class=“makeEditable” eip_id=“<?=$dealer[”dealer_id“]?>” eip_id_column=“dealer_id” eip_table=“dealers” eip_field=“dealer_address”><?=$dealer[“dealer_address”]?>&nbsp;</div>

If you ever need to use a different input field other than the default textarea for usability, you can customize it in a similar fashion to the code below. The idea is to check the object’s “eip_field” for your special case, then create the form element accordingly. I think the code is pretty self-explanatory. For your convenient, I have also included a State and a Country dropdown selection.

function edit(obj){

	Element.hide(obj);
	var textarea = ‘<div id="’+obj.id+‘_editor"><textarea id="’+obj.id+‘_edit" name="’+obj.id+‘" rows="4" cols="35" style="background:white;">’+obj.innerHTML+‘</textarea>’;
	var button	 = ‘<div><input id="’+obj.id+‘_save" type="button" value="SAVE" /> OR <input id="’+obj.id+‘_cancel" type="button" value="CANCEL" /></div></div>’;

	/**************************************************************************
	 * To enable special cases such as dropdown box, customize the part below
	 * See 2 examples below for State and Country!
	 **************************************************************************/

	if(obj.getAttribute(‘eip_field’) == ‘dealer_state’)
	{
		var currentState = obj.innerHTML;
		var stateDropdown = ‘<div id="’+ obj.id + ‘_editor"><select id="’+obj.id+‘_edit"><option selected="selected">’+ currentState +‘</option><option value="Alabama">Alabama</option><option value="Alaska">Alaska</option><option value="Arizona">Arizona</option><option value="Arkansas">Arkansas</option><option value="California">California</option><option value="Colorado">Colorado</option><option value="Connecticut">Connecticut</option><option value="Delaware">Delaware</option><option value="Florida">Florida</option><option value="Georgia">Georgia</option><option value="Hawaii">Hawaii</option><option value="Idaho">Idaho</option><option value="Illinois">Illinois</option><option value="Indiana">Indiana</option><option value="Iowa">Iowa</option><option value="Kansas">Kansas</option><option value="Kentucky">Kentucky</option><option value="Louisiana">Louisiana</option><option value="Maine">Maine</option><option value="Maryland">Maryland</option><option value="Massachusetts">Massachusetts</option><option value="Michigan">Michigan</option><option value="Minnesota">Minnesota</option><option value="Mississippi">Mississippi</option><option value="Missouri">Missouri</option><option value="Montana">Montana</option><option value="Nebraska">Nebraska</option><option value="Nevada">Nevada</option><option value="New Hampshire">New Hampshire</option><option value="New Jersey">New Jersey</option><option value="New Mexico">New Mexico</option><option value="New York">New York</option><option value="North Carolina">North Carolina</option><option value="North Dakota">North Dakota</option><option value="Ohio">Ohio</option><option value="Oklahoma">Oklahoma</option><option value="Oregon">Oregon</option><option value="Pennsylvania">Pensylvania</option><option value="Rhode Island">Rhode Island</option><option value="South Carolina">South Carolina</option><option value="South Dakota">South Dakota</option><option value="Tennessee">Tennessee</option><option value="Texas">Texas</option><option value="Utah">Utah</option><option value="Vermont">Vermont</option><option value="Virginia">Virginia</option><option value="Washington">Washington</option><option value="West Virginia">West Virginia</option><option value="Wisconsin">Wisconsin</option><option value="Wyoming">Wyoming</option></select>’;
		new Insertion.After(obj, stateDropdown+button);
	}

	else if (obj.getAttribute(‘eip_field’) == ‘dealer_country’)
	{
		var currentValue = obj.innerHTML;
		var dealerTypeDropdown = ‘<div id="’+ obj.id + ‘_editor"><select id="’+obj.id+‘_edit"><option selected="selected">’+ currentValue +‘</option><option>USA</option><option>Canada</option>’;
		new Insertion.After(obj, dealerTypeDropdown+button);
	}
	else

	{
		new Insertion.After(obj, textarea+button);
	}

	Event.observe(obj.id+‘_save’, ‘click’, function(){saveChanges(obj)}, false);
	Event.observe(obj.id+‘_cancel’, ‘click’, function(){cleanUp(obj)}, false);

}

I hope you find this helpful. Drop me an email at nworld3d@yahoo.com if you want to share your ideas, comments, or suggestions. Also, I am currently seeking for a job in Chicago area. Let me know if something comes up. Until then, good luck and have fun coding!

By the way, don’t forget to check out my blog at http://www.alexle.net.

I got much information of this edit-in-place technique from the 24ways.org tutorial. Give it up to them for such good tutorial!

• http://24ways.org/advent/edit-in-place-with-ajax