My skills in Java/AJAX are relatively poor. I am looking for a method or example link, that would enable the creation of a postgresql front end, that displays a record, the user clicks submit to edit the record changes. and Next to view the next one. The record would be shown within the text boxes within the page as it does when it is first created.
Related
My current setup looks like this(from here, mostly):
This is the result of my home view. What I intend on doing is keep those 2 sidebars in place and refresh only the content part.
My question: What is the obvious solution to this in django?
From what I read so far it seems to be using Ajax to see what exactly the user clicks on the sidebars and return only a part of the HTML which would be the div where all the content is. (or return a JSON and refresh that div depending on the JSON values?)
I need to avoid refreshing the entire page, it seems useless. I could forget about Ajax and just run on separate views but I would have to pass every time a context variable to populate the sidebars depending on the user and this seems to be an overkill.
Even more specific: On the push of a button on the navbar now that is a href- links to another page. In order to make it refresh only part of the page what should the button trigger? Should it trigger a jquery function or is there a better option?
If your concern is only about left sidebar calculations, then you can go with caching
Django allows to cache part of page - sidebar is ideal item for caching. If sidebar is different for users (I see at least playlists menu item), then it's also possible to implement fragment caching per user, check Vary on headers part of documentation.
Using ajax will complicate your development process - generate html/json encode/render it on user side, etc, etc. And now almost no one uses django in this way. If you want pure single page application, then I suggest you to take a look at some javascript framework like Angular, Vue or React + Django API backend.
We have a website product that allows users to search rental inventory, view results and then click through to a details page.
On the results page, we also allow users the option to refine their search via bedrooms, bathrooms, price, etc. When the form changes, we do not reload the page, we use Ajax to run a new search query and load the new results into the container.
For example, when the user first did a search, they got back 100 properties. Then they refine their search for 3 bed, 5 bathrooms, view = oceanfront and they get back 10 properties. Once the user finds a property they like, they typically click through to the details page. But, let's say they change their mind and click the browser 'back button'.
When that happens, all of our search params that were loaded via Ajax are now gone and our property count is back to 100 instead of 10.
So what I have realized is any data loaded via Ajax is not being cached in the browser so the original search is loaded not the refined search.
After doing some research, I think using history.pushState() and history.popstate() might be the solution but I'm having trouble wrapping my head around how to implement it for our problem.
Is there a better solution? If not, will history.pushState() work?
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.
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
i am asking myself if it is possible to somehow create a dynamic gui in jsp. So that i could have something like a dropdown menue for the country and based on what i have selected in that window a dropdown menue for cities, without reloading the jsp page. Or, in a dialog with multiple input lines, to be able to add an additional line with a button, again without reloading the whole page. In the first case the cities information would be in a database, in the second the information provided would be stored at the end in a database, so i cant just use java script (and don't really want to).
At a minimum, you would need to utilize JavaScript to implement what you want. Most would implement it the way Tim describes in his first paragraph.
Set up two .JSP's:
The first contains your main form with the country drop-down menu. Some JavaScript on the first .JSP triggers an AJAX request to a second .JSP. The second .JSP accepts a country-ID parameter and uses a servlet to query your DB for a list of cities, then renders that data. Once the request returns, the JavaScript in your first .JSP inserts the list of cities into a new drop-down menu.
This may seem complex, but several JavaScript libraries exist to assist you with this task. Look into jQuery or Dojo.
To update the page without posting back the whole page, the browser would use ajax. Using a database does not eliminate ajax. Ajax calls server code that digs your data out of the database.
Regardless, to do what you want, without writing your own javascript, look at GWT (Google Web Toolkit). You right ajax applications in Java that generates the javascript for you.