Question

I’m using Joomla to develop a user profile management component with AJAX.

The goal is to allow the user to edit his own user information. There is a lot of information so instead of having one massive form, I decided to make “subforms” or sections. And for the whole thing to be user-friendly I want to send the forms and refresh the user information with AJAX.

Here’s an example :

There are two sections, “Basic user info” which displays the first name, the last name and the age of the person and “Extended user info” which displays the occupation, the company and the skills of the person. Each section has an “edit” link (or button) which turns the content into a form (AJAX) allowing the user to modify the presented information. You can only edit one section’s information at a time. When the user has finished modifying the data, he sends the form with a “send” link (or button) and the section gets back to simply displaying the information of the section (with the updates that were just made).

So I need to know what is the most efficient way to develop such a component. I thought of two approaches :

1) In the “tmpl” directory of the main component view we the following files :

• default_basic.php (displays the basic user information),
• default_basic_edit.php (displays the form which allows the user to edit the basic information)
• default_extended.php (displays the extended user information),
• default_extended_edit.php (displays the form which allows the user to edit the extended info)
• default.php (loads each of the display subtemplates with calls to JView::loadTemplate($subtemplate))

When the user clicks on an edit link, an AJAX call is made to the following URI index.php?option=com_userinfo&view=userinfo&subview=basic_edit&format=ajax, which causes the view class to call $this->loadTemplate('basic_edit') after assigning the user information to it.
If the user clicks cancel the same process is used to load the ‘basic’ template again. And if the user modifies the information and clicks the send link, the form is sent and then the ‘basic’ template is loaded too.

2) There is only a “default.php” file in the “tmpl” directory which holds the edit version and the display version of each section. But all the edit versions are hidden at first. And when the user clicks on the edit link the display version of the section becomes hidden and the edit version is displayed (using display:none and display:block). Then, if the user clicks the cancel button we do the opposite. And if the user clicks the send button we send an AJAX request to update the data in the database and return the updated user info which will be loaded into the display version of the section. And we finally replace the edit version of the section with its display version.

I know there’s a lot of text but in the end it goes down to choosing between refreshing full HTML blocks with AJAX, or just sending the updated info and modifying the content of hidden blocks and then make them appear. So what do you think is the most logical approach, knowing that we are in a Joomla 1.5 environment ? How would you procede ? (maybe there are other ways to create such a component ?)

(I tried both ways and I couldn’t entirely make it work so I decided to ask to see if it is a matter of conception…)

Thank you for taking the time to read all the text.

Answer 1

I have tried both solutions and #2 is the only one that worked for me.