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.
My answer is: why even refresh parts when it can be done without it?
For example when we are talking about basic form elements like text fields and check/radio buttons I would prefer the following: on a successful save/send simply display a nice message like "Profile saved" for some seconds and the user is sure that the changes are save and sound.
In case I msissed somthing let me know.
I have tried both solutions and #2 is the only one that worked for me.
Related
I have to regions with items on my page. One of them is to edit data, another one is display only. Editable region is hidden on page load and shows when users click on a button. I'd like to pass data between these regions after submit a page. Are computations after submit the only way to do that? I tried with processes after submit, before header etc. but it didn't work.
I'd like to have one pl/sql code to pass data between two regions after submit, how to do such a thing?
Other options include
dynamic action (you'd use Set value)
button's Redirect to page in this application (where you'd redirect to the same page; Link Builder then lets you choose which items will be set to which values)
If you still can't make it work, consider creating sample page on apex.oracle.com; then provide login credentials so that someone might have a look.
I'm currently using Laravel but i assume this question could also be asked with any framework in any language.
If i have a simple form to create an user, with the most basic fields (firstname, lastname, email...), the resource method i'll use will be create to display the view and store to handle the post logic.
After that, the edit form will be displayed in the edit method and the update managed by the update method.
Eventually, the user sheet will use the show method.
Now, imagine i have a view that combine both the edit and show purposes, i mean like a page with multiple tabs, where each tab display information about the user, some charts, some tables, a lot of stuff... but also an edit form in one of these tabs.
Which method should be used to display this view ? edit or show ? Since it acts like a show but also have a form to edit the user... i'm always asking myself and sometimes i have a hard time to figure out which method i should use.
This case often happens in back offices, where some edit pages looks like a dashboard more than a simple form, i'm sure you see what i mean ;)
Is there a convention about this ? Something like "if there is a form it's an edit, even if it mainly show information" ?
Is there a MediaWiki-like method for supporting concurrent editing of text bodies/ or even product data in Magento? (in the admin)
If i want to implement this function, what should be the concerns?
Can anyone suggest some approach & situation that i should consider?
I have considered few function:
when admin user enter product edit page, he must click the "start edit" button
after clicked, the screen will show the concurrent user in this page(who also click "start edit")
if one of them has submitted the saving, the other one cannot save it and an error will be displayed as " The content on this page has either been modified by another user, or you have already submitted modifications using this form. As a result, your changes cannot be saved." It will validate in every content saving.
Magento doesn't support this feature, but it is not hard to implement this with a little customization.
Firstly you need add lock entity in Magento, better to add a sperated lock resource model(which it at least has asset type, asset id, lockUserId, lockStartTime..etc ). Thus every time if merchandiser want to change something , it will insert one lock record into this resouce model if there's no exist lock record.
You can find the corresponding event in Magento and add one new observer event appended to that. So the lock merchanism can be done following this way.
I have a C#.NET MVC3 web app. I have a View that has a List of Models. This list can be long, requiring the user to scroll down on the View. When selecting one of the models in the View to Edit, the user is taken to the Edit View. After submitting the Edit View, the user is redirected back to the List View. However, the List View is now displaying back at the top of the list. How can I redirect the user back to the same position in the List View where they clicked the Edit button?
You would probably be better suited using a modal popup dialog to edit the data, rather than navigating to another page.
While it's possible to do what you want, it's a pain. You would have to get the scroll location via javascript, save it to a hidden field, post that to your edit page, along with record number and anything else, then re-post it back to your original page when you return, then read the post value and scroll to it via javascript.
All that is avoided if you just use a modal edit dialog, then when the dialog goes away the page is still in the same place.
I am familiar with several approaches to making the back button work in AJAX applications in various situations, but I have not found a solution that will work gracefully in my specific scenario.
The pages I am working with are the search interface for a site. You enter terms in a normal search box, click "go and wind up at a search results page. On the search results page there are a ton of UI controls for filtering/sorting the search results to find what you are looking for. Some of the operations triggered by these controls may take a (relatively) long time to complete (e.g. several seconds).
This latency is fine in case where the user is initially filtering/sorting their results... there's a nice AJAX spinner and so on... however when the user clicks on a search result and then clicks on the BACK button, I would like the page to instantly be restored to the state it was in when they clicked through.
I can restore the states using IFRAMEs/fragment identifiers as a dictionary of page history, but what ends up happening is that when the user first hits the back button the initial page is loaded, then it (re) makes the AJAX query to get the page state back, which triggers the AJAX spinner and another wait of possible several seconds.
Is there any approach that does not require this kind of two-stage load of the page when the user returns to the page via the BACK button?
Edited to add: I am partial to jquery but I'd be happy with solutions that depend on other libraries/toolkits or that are standalone/raw javascript.
Edited to add: I should've added that I'm trying to avoid cookies/sessions because this prevents people having multiple brower windows/tabs open and manipulating different sets of search results at the same time.
Edit: Matt, can you elaborate on your proposed solution (triggering a page change event via fragment identifer)? I see how this would help with BACK button clicks across the same page but not coming BACK to the search results page after clicking on a specific result.
Just use a cookie.
Have you investigated the YUI Browser History Manager?
Try to use localStorage object. Here is crossbrower libs jStorage and WEBSHIMS json-storage
Would it help to trigger a page change event using the "Add some info to the # at the end of the URL approach".
That way, clicking the back button shouldn't actually change the page, and you should be able to restore state without the first page load.
Use something persistent that is tied to the user's profile.
Cookies and sessions are good ideas, but you can also keep those stuff in the database. That gives you an added advantage of being able to save the user's filtering preferences accross different browsing session.(if, for exampple, he was looking for something in the office and then decided to continue searching when he is back at home).
It all depends on the complexity of the filters and weather or not it is something you think that the user will want to use accross diffrent browsing sessions..
Edited to add: I should've added that
I'm trying to avoid cookies/sessions
because this prevents people having
multiple brower windows/tabs open and
manipulating different sets of search
results at the same time.
You can create a random token and assign it to the fragment identifier.
on first page load create a token if no fragment identifier is set
before navigating out, store all the temporary ajax data in a cookie with that token as index.
when hitting back, if you have a fragment identifier set, load the data from the corresponding token in the cookie.
you can even add a "time" field to expire tokens, etc...
sample cookie (JSON):
{"ajaxcache":[{"token":<token>,"time":<time>,"data":<data>}, ... ]}