I have a joomla site where users can log in. Once logged in, a user can display a list screen -- say, a contact list with a name column and a phone number column. I call it a list screen, but I guess it could be called a list view, grid view, etc.
I'd like to make one of the columns (say, the phone number column) editable in place; meaning, I don't want to force the user to open a contact editing form. Thus, in the phone number column, a text box should be displayed on each line. The textbox contains the existing data for that row. The user can change the phone number in the text box directly in the list screen, and then press some 'save' icon on that row to save only that row (and only if it has changed). It'd be nice if the saving was done with an AJAX request, but it'd be ok to submit a form for now.
Based on the 'list screen' in the book "Learning Joomla Extension Development", I can currently display the correct list of items for the user. Does any one have example/tutorial of how to do the saving of each row individually? It seems like all list screens that I see have a link which must be clicked to open an edit form, as opposed to allowing editing in place.
Thanks
You have to write a component first. Which will basically do the saving part of the individual row. So basically your component URL takes parameter as row_id phone number etc and have a update query updating the database.
Second is you need to write a javascript function which is called on click of every save button. The javascript function reads row details by reading from the DOM. and then fire an ajax request to the above mentioned component. the URL to the above mentioned component should have format=raw.
The result from the component update queries can be returned as true or false. And accordingly read by javascript ajax response. based on which A flag could be shown saying row updated. I can help you with code further if you describe it in more details
Related
Scenario/Context
I've got a drop down menu with two input elements underneath.
From the dropdown menu, are names of companies (with values set to the respective company id's), and another prompt to Add a new company.
If the option to Add a new company is selected from the dropdown, then the user is to fill out the 2 input field elements (i.e. company name and company email).
Otherwise, if an available company is selected from the dropdown,
then the 2 input fields (for company name and email are to be disabled).
My question
Is this possible to do without an AJAX call if I want things to happen without a page refresh?
Can anyone suggest some other alternatives??
Many thanks!
That is absolutely possible, though you'd need to use some JavaScript to make it happen and load a bit more data to the DOM on the initial page load.
For each option in your company select dropdown, add a data attribute for the name and email.
Then, watch that dropdown for the change event in JavaScript. Whenever that event is fired, if the data-company-name and data-company-email attributes are defined for the selected option, disable the input fields and populate them with those values. If those data attributes are not defined for the option (likely only for your 'Add a new company' option), then clear the values from the input fields and enable them.
I have created a page based on "Form & Report" template. So there is the Report page on which there is the create button. That create button leads to the form page which contains.
It is pretty simple. I don't know if there is a cache memory not emptying itself or if there is a setting that I have not properly set.
When I want to create a new database record, Oracle Apex behaves as if I asked it to update a record (though it still presents me with empty text fields).
Below the image of what's happening.
Create button of the Report
Buttons for edit are shown when I click the create button
Those edit buttons are shown instead of the buttons below => This means that the Apex software is behaving like I asked to edit a record not to insert a record.
Why is this happening?
You need to take a look at your create button. Is it passing a value to the form? If so, you probably don't want that. Is it clearing the cache of the form? If not, you probably want to clear it.
Also, on the form page take a look at your processes.. specifically the Automated Row Fetch (ARF) process.. what's the primary key that this process is using?
Also, take a look at the conditions for each button on your form. For the delete/save buttons you likely want a condition type of "value of item / column in expression 1 Is NOT NULL".
For your create button you would want the opposite.. "value of item /... IS NULL".
In both cases for the expression 1 you'd want to use the item that your ARF is leveraging.
#Bloomberg58 if you used the wizard that should not have anyway try to validate the create button in report page and the server-side validation of create and save button in form page
I have a bit of a unique challenge today. I have a client that wants to be able to search for multiple items based on inserts into a cfgrid. Suppose we have the following web form:
A Country selection dropdown
A State Selection dependent AJAX dropdown
A city Selection dependent AJAX dropdown
An ADD Button
----------------------------------------------------
A CFGRID that will populate a row with selections when the user clicks the add button
----------------------------------------------------
And finally, a CLEAR button, and a GO button on the bottom.
The resulting page will then query the database and get some statistics about the cities selected. So, suppose an individual picks USA > Arizona > Scottsdale and USA > Arizona > Flagstaff. The grid below the options will 'save' each selection and reset to their default options, waiting for a user to pick additional options or click on 'GO'.
The resulting page will then generate columns that list some statistics about the communities and highlight the 'best of' between each selected community.
Each time a user selects the ADD button (assuming three criteria are selected) I want the information to be added into a CFGRID that displays the options selected. Then, After the user selects at least one country/city/state option, have all of the data in the CFGRID get passed to another page that does a query from the data selected. In theory, the user could pick as many communities as they want, assuming they are willing to let the database sludge through enough data to get what they want and wait through a 'loading' screen to get it.
I'm having these challenges, in no particular order:
- I have an HTML grid that I must use per client spec (No Java or Flash, must be HTML)
- I have no idea how to get the selected options into the CFGRID. I assume there is some JavaScript I can write that uses some sort of AddRow function to add data into the grid with the add button but cannot seem to find how to it on the interwebs
- After we conquer the above challenge, how do I pass the data from the grid into the results page? I thought about passing one big string or a structure, but I'm not sure how to do that through the URL or posting, nor how to get the data out of the grid. I wonder if I am better off coding some sort of string that gets passed from the options page to the results page with a get method instead of dealing with the stuff in the CFGRID and have the CFGRID serve only as a 'dummy' display container.
- Finally, after the pass is complete, I would need to loop through through the structure and perform a CFQUERY or CFSTOREDPROC on each row of data, then get the statistics I need to display on the results page. I assume this would depend on how I am getting the data from the options selection page to the results page.
THANK YOU ALL!
CFGRID is great to start, but it can be b*tch to customize and extend... Have you tried editable CFGRID with bind? See how far off it is from what you want first. If it turns out to be very far, then you might want to go for a jqGrid and code up some jQuery.
To start, read Using HTML grids and make the cfgrid editable.
http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSc3ff6d0ea77859461172e0811cbec22c24-7a01.html#WSc3ff6d0ea77859461172e0811cbec22c24-72e0
Once you got that working, look at these provided JS functions that you can use with CFGRID
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WS0ef8c004658c1089-6262c847120f1a3b244-8000.html
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSd160b5fdf5100e8f-4439fdac128193edfd6-7f5f.html
If you still demand a bit more, you might need to dig into the underlying ExtJS component. At that point I would rather use jqGrid
I found out that the best way to handle this was by using a SerializeJSON call and a Deserialize JSON call back and forth. By using JavaScript notation we are able to pass a complex JavaScript object (array) between one page and another. This has the value add of not having to worry about sessions timing out and making URLs clickable from one solution to the next.
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.
This may be a followup to this question Possible to make jqGrid Search Box Stay on Page? - Or it may be unrelated because clicking the search button manually shows the same behavior.
We have a dynamically generated grid that is created by a) making an ajax request to get the grid columns based on a report id and then b) setting up the grid model and fetching the data. When the page loads initially, we pass in a starting report id, but there is a dropdown box on the page that lets the user change reports.
When the dropdown changes, I unload any existing grid, make the ajax request to get the columns, set up the grid model, and then get the data. The columns change, the data changes, and everything looks correct - except the search columns do not change in the search dropdown.
If I close the search box and reopen it, it still has the old search columns. Likewise, if I click the reset button or reload the entire grid.
I found it after a bit more poking around. I needed to set the recreateFilter option to true
prmSearch = {recreateFilter:true,multipleSearch:true,overlay:false,sopt:['cn','eq','ne','lt','le','gt','ge','in','ni','nc']};