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.
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.
I want to enable a pair of cascading dropdown lists within a form in an ASP.NET MVC3 / Razor2 application. Ideally the solution will meet the following goals:
Child list populated simply by changing the selection of the parent list
Both dropdown lists contained within the form as they need to post information on submit
Uses Ajax to avoid whole page round-trip
Uses Ajax Html helper for easy integration
Works even if javascript is not enabled
So, from a user point of view, when an item in the parent dropdown is selected, the contents of the child dropdown is refreshed to display items related to it.
Can anyone please suggest the best way to do this?
EDIT.
No takers ... suggests to me that there may be conflicting requirements in the above list of goals. The closest I got to the above was this article, which met all the goals except that it doesn't work nested within an Html form.
So, I will restate the problem in a different way: how can I make an AJAX call from a dropdown list within an Html form so that I can populated another dropdown list with related items?
Took some time to find a reasonable solution to this, although so far I still don't have a no-jquery fallback. This article shows you how to use AjaxHelper extensions to create your own Ajax-enabled controls. Works a treat, and very reusable.
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 creating a pager for grid data. Basically, I can do it in two ways: when user clicks on a page number, load grid data by using ajax call, or, post back to server (GET or POST) and use query string parameters (or POST variables) to know which page to display. With both methods, sorting of grid items must be persisted.
What is better considering performance and SEO and why?
-- UPDATE --
I need pros and cons for both approaches. I know this is somewhat discussion rather than question, but I need your experiences.
Also, when using ajax, it is not only SEO that I'm wondering about. Will browser's back button behave as expected?
Why not do both.
Have the grid load with SEO friendly anchor GET links then implement some JavaScript to convert them to AJAX calls.
People without JavaScipt (like spiders) can then still navigate around while fancy people will get the enhanced AJAX experience.
With AJAX you can alter history and make the back button work as expected.
Your grids are loaded via AJAX? and you are worried that SEs won't pick them up?
What you can do to get your content indexed is to:
use segmented URLS like CodeIgniter and WordPress instead of query strings. SEs will (supposedly) see them as subfolders.
Instead of loading everything in AJAX, grid data can also be represented as tabular data. What you can do is to load the tabular format for the static page, then with JS, you can replace the table with your grid.
say for example i want to load sports stats, mysite.com/sports/stats should give me tabular data when JS is off, and if i had JS, that data is replaced with the grid.
I have a request concerning Drupal 6.x
I'd like to have this behaviour:
imagine to have 2 columns, on the left a list of nodes (only titles for example) and on the right a view showing just one of the contents on the left.
My idea would be to achieve this with an AJAX-fashion: clicking a link in the list on the left updates the view on the right with the actual node.
Which is the best way to handle this?
My idea is to use Panels, make 2 column panel with 2 views, one (left) filtered on content type, with no arguments, and one on the right which takes in as an argument the node id to be displayed.
But how to link the 2 views with AJAX?
(or, better, how to update the view on the right with an AJAX call?)
is this possible?
Any help or idea is really welcome
Thanks!
Cheers
Mauro
You also can do a quick hack, which is quite flexible, because it allows you to change your views without changing code.
I have had a similar task recently and for your task I would do the following:
for your right column, create a exposed filter (node id) and hide whole exposed filter form using CSS.
using jQuery, attach a click behavior to titles on your left column.
the click behavior takes the node id, finds the attached exposed filter at the right column, enters the node id into the input field and executes form's .submit().
the .submit() triggers the build-into-views well debugged ajax request which refreshes your right column.
this is certainly possible, and not very difficult to do.
Your task can be divided into two main parts:
Providing a 'callback' URL in the Backend that takes a node id (nid) and returns the markup to display the node in the right panel in a format that can be processed by javascript. This will be done in PHP within a normal Drupal module. The main point is not to return a full Drupal page as usual, but only the markup for the node.
Create logic for the Frontend that, when triggered by clicking a link in the left panel, retrieves the new node markup via the URL callback above and replaces the content of the right panel with it. This needs to be done in javascript, using the Drupal javascript API with jQuery.
You can find an introduction and example for AJAX in Drupal here. (This does almost exactly what you want to do, only with images)
You should also look at this more general entry point for JavaScript in Drupal.