Reload the page without submitting it to the server
the problem is that I have two sets of values in the dropdown. If type "A" is selected, I want the textbox to be populated with a value from the database and read-only. If "B" is selected, the field must be empty and editable.
My original code is written in jsp / struts and I kind of achieved this using
onchange="javascript:submit()"
to reload the page, but this has the obvious disadvantage of saving any changes you make, which means you can't really undo.
I also have other issues with serveride validation due to this method.
Is there a way to make the jsp page reload on change, this way I could write javascript to change the way the page is rendered according to the values contained in the session. This way, the save / submit function will only be called when the page is correctly populated and the server-side validation works as planned.
I know this is what AJAX can do, but I try to avoid it if possible.
AJAX is your only option of my friend, unless on initial page load you load all the other possible textbox values, so you don't have to go back to the database. Well, you can try placing the textbox in the IFRAME, but you are likely to run into more problems with this approach than with just AJAX.
source to share
Without AJAX, what you are asking would be difficult. Another option (which is ugly) is to write all possible values for the second list into a data structure like an array or dictionary.
Then write some javascript to get the values from the data structure when the user selects from the first list. The amount of javascript you will need to write to do this, and get it right in a cross browser, is going to be much more difficult than just using AJAX.
source to share
Not sure why you are trying to avoid AJAX in today's world, the JS libraries out there make it so easy today it’s crazy not to try.
I just had to replace the page written as Vincent pointed out. I guess it made sense for the application at the time, given the relative size of the data 4 years ago. Now that the app was zoomed out, the page was taking over 30 seconds to parse the data structures repeatedly (poorly written JS perhaps?).
I replaced all of the logic with a very simple AJAX call to the servlet that just returns a JSON response of the values for 2nd fall down based on what was passed to it and the response is mostly instant.
Good luck to you.
source to share
One way is to change the action of the form to submit the form to a different URL than the "save" URL. This allows you to reload certain aspects of the form and return to the form itself, instead of writing data.
<script>
function reload() {
document.forms[0].action="reloadFormData.jsp";
document.forms[0].submit();
}
</script>
<form action="saveData.jsp" method="post">
<select id="A" name="B" onchange="reload()"><!-- blah --></select>
<select id="B" name="B"><!-- blah B --></select>
<input type="submit">
</form>
source to share
I know a taglib that suits your problem: AjaxTags . I use this taglib in my J2EE projects and it is very easy to integrate into web applications.
This taglib gives you several tags designed to make an AJAX request in your jsp files.
Here is a description of each tag: http://ajaxtags.sourceforge.net/usage.html
The tag that will help you is the ajax: select tag. It allows you to populate a select tag that depends on another field without reloading the entire jsp page.
If you have more information on this, ask me and I will try to answer quickly.
source to share
If you get it right, you want either a dropdown menu ( <select>
) or a textbox ( <input type="text">
) depending on the selection (usually a checkbox or radio buttons) somewhere higher in the form?
In this case, you might need to handle the two types of input differently on the server, so why not have both the selectbox and the textbox in the form area with different names and id and one hidden ( display = none
). Then toggle the visibility when the selection changes. On the server, you choose eiter the selectbox or textarea input (both will be present unless you disable them ( disabled="disabled"
)), depending on the select input.
Of course, if you expect the user to usually only need text input and multiple times, requiring a massive list; it would be better to use ajax to fetch the list. But if it's the other way around (you only need the textbox octally), as I suggested above, it would be faster to have both present in their original form.
If the dropdown only contains easily generated data, for example, a few years after that, it can be much faster (requiring less bandwidth on the server) to create client side data using a for loop in Javascript.
source to share
Consistent with what Strindhaug said, but if you want dynamic data:
Could you back up the JS on the page and then the JS will change the form as needed? The backend can propagate some variables for descriptions etc. and then JS can modify / update the form accordingly. If you're unfamiliar with this, libs like jQuery make things like this easier and easier in the browser than your own (at least in my experience).
Except: If you are not using AJAX because it was difficult to compose (as I did not for a while, because my first experience was from scratch and was ugly), as others have said, libraries like MooTools and now it it becomes very easy. Also, don't be ashamed of using AJAX correctly. It has a bad rap because people do stupid things with it, but if you can't just write ready-made values into a form, or need to do live look ups, this is one of the right uses for AJAX.
source to share