HTML form has some text boxes and a drop down box.
Drop down has huge values, and takes lot of time to fetch from database.
So I want to load the page first and while the user fills the form (text boxes) I want to load the drop down box (without his knowledge :-) ).
But without any event trigger, how do I make call to database again ?
I am using JSF with RichFaces, Servlet.
The following code is not working
<h:selectOneMenu value="#{obj.selectedValue}">
<f:selectItems value="#{obj.allValues}" />
<a4j:support selfRendered="true" action="#{bean.action}"/>
</h:selectOneMenu>
Thanks,
+1 for using Ajax - but if you have a very large number of values,t hen you might want to consider using an auto completion dropdown - where the the user starts typing what they need and after they have typed a few characters, you kick off your ajax reqeuest and just load those requests that match.
have a look at "google suggest" if you want to see this in action
-Ace
As already mentioned you can use AJAX to load the dropdown items asynchronously, but I would suggest redesigning the form so that the huge dropdown is not required. Perhaps let the user search for the correct value on a previous or subsequent screen? Long dropdowns are not easy to use as they require lots of scrolling and it can be hard to find the correct value on a large list.
At the bottom of your page put the following:
<a4j:jsFunction name="yourJsFunction" action="#{bean.fetchSelectItems}"
reRender="yourDropdown" />
window.onload = yourJsFunction();
You will have to use AJAX. When the page loads display a empty select box. Then write some JavaScript that will call some URL on your server that will return the options for the select box. And when you get that just populate the select box with those values.
Be advised that your form will be useless to those without JavaScript.
Related
I'm trying to build a way to update a user profile one question at a time.
Essentially I want a div on my page that displays a form that lets the user submit the most important information, say firstname. When that has been filled out (success on the form) I want to refresh that div and show the second most important form, for say lastname, or if that is already filled in then birthday and so on.
Much like linkedin prompts you to add one more piece to your profile.
How would you do it?
My first thought was to use elements. But I need to fetch existing profile data to populate the form and how would the element get that data, abusing requestAction is not an option.
So I guess I in that case need to call a controller action that determines which element should be rendered, renders it to a variable and submits that (response->body) in json to the js that updates the page. Seems a bit .. unclean but should work.
Then we have view cells. They seem ideal for the task until I want to call them via ajax. That is not possible right?
So how would you go about to build something like that?
A form that needs to have the ability to be prepopulated with data if there is any and then refreshed automagically to display the form for the next piece of info needed.
View cells can't really be used in AJAX requests. This is not what they thought for.
The best thing you could do, if you want to keep the cell, is to make sure you followed SoC properly and put all your business logic into the model layer.
Now have a separate controller and action that is reachable from the outside throught a request (a cell is not) and return the data as JSON from there using the same code.
You could try to instantiate the cell in the controller action as well and send it's output. But honestly, I think that's a pretty fugly way of doing it.
I've got a master form on my page, and I want to create onClick events for some of my drop down boxes to populate other drop down boxes depending on the choice made.
I know I can't have a form within a form.
Any advice on how I can achieve this.
I'm using HTML, Classic ASP and Mysql to populate the combo boxes.
Thanks
John
John. To do this, you would need an AJAX engine running alongside your Javascript, unless you want your page to reload everytime you want the combos to be populated.
There are many ways to do this and each easier than the latter, but all of them will require an ASP file doing the response in a XML file.
Start with the basics: Learn about Javascript & Ajax... or cut half of your work/time and learn jQuery's. Trust me,... it's worth the trouble.
http://api.jquery.com/jQuery.ajax/
I have three input fields, in the first i enter an cardnumber in the second i enter the pin, after i entered both of the inputfields it should run an perl script which fills the third input field with the ammount of the card (the amount comes from the db with the perlscript).
Is there something like an afterupdate for the inputfields, which then starts the perlscript?
And is there anyway to fill the third inputfield without print the whole page again with the perlscript? Thanks for ya help!
Use jQuery - its a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development
The blur event of the second input field should trigger an AJAX request to your perl script that will return data you require and then populate the 3rd textfield with this data, without the need to reload the page.
I could write the code for you BUT you'll gain a much better understanding by trying it yourself.
If you get stuck - edit the question to include your code and we'll see what we can do.
I have a web page consisting of a dropdown menu. What i want is the contents of other dropdown menus present in the page must change according to what has been selected in the first dropdown box. For example if a dropdown consists of Degree as its element. If i select Degree element then another dropdown must show only degree courses. This must happen automatically without clicking any button. How can i achieve this?
I would make this a comment, but I do not have commenting abilities. You are going to want to use $.post with jquery and ajax to accomplish this: http://api.jquery.com/jQuery.post/ . Ajax with JQuery is not difficult to do.
You will want to use the onchange event of the first drop down to use a jquery ajax $.post call to post to the server, passing the selection from the drop down as a parameter. The page that it post's to should us GET to get the selected attribute from the drop down, and then retrieve ( from the database or where ever) the options that go into the second drop down, based on the parameter. The code should be written out to the page. The jquery ajax call has a way to get the response and let you define a custom function to be run once the post returns. The return should be what you had written out to the page, and then you can just update the second drop down list with the returned data inside this function.
I hope this helps!
Assume I have a html from, and it contain some submit type. I want to create a "are you sure" popup window that will appear when user click submit button.
My question is that is there any way to create it by using "only" html, not using javascript or any other?
HTML only is possible, but not without a postback
Scenario that could work without javascript:
You have your form with submit button
User clicks (and submits) the form
You display another form with are you sure? form (that contains Yes and No buttons as well as hidden fields of the first form that will make it possible to do the action required on the original data
functionality that executes the action and goes back to whatever required.
This would be completely Javascript free, but it would require several postbacks.
This kind of thing is usually done on the client with a Javascript confirm() function (here's a simple example) or lately with a more user friendly modal dialog provided by many different client libraries or their plugins.
When to choose the script free version?
If you know your clients are going to be very basic ones (ie. vast majority of your users will access your application using clients like Opera Mini that's not able to run scripts at all). But in all other cases it's much better to do this using Javascript. It will be faster, easier to develop and much more user friendly. Not to mention that it will put less strain on your server as well since certain parts will execute on the client without the need of any server processing.
No, there isn't. Despite of the new features in HTML 5, HTML is still a markup language, not a programming language. In order to express dynamic behavior (such as an "are you sure?" box), you need to use a programming language.
Javascript would be the most obvious choice for this, but you could also do it with frameworks that can get you around writing Javascript by hand (for example ASP.NET).
Edit: Actually it appears that it would theoretically possible to do this with without Javascript or other frameworks. As I just learned, HTML 5 + CSS 3 seems to be turing complete. But this is hardly relevant to this question.
It's possible to ask for a confirmation, but it will not be in a "popup window". The creation of the "popup window" requires javascript/other language.
It will be:
Request (first form)
POST
Response (confirmation form)
POST
Response (outcome message)
You can create a form with all hidden elements containing the data from the first form and a "Yes" and "No" button below the "Are you sure?" text. You can use PHP sessions to avoid the hidden form elements. If there is a lot of data or confidential data or you do not want to re-validate the data from the second form, use sessions. Make sure you validate the data from either form before using it.
I know I'm like .. 10 years late. But for anyone still wondering I thought I could be of some help!
What I did for this exact problem was make sure I had multiple "divs" in my code. For me specifically, I had two main ones.
First, one whose id="main", and another whose id="popup" with the 'visible' property initially set to 'false' for the popup div.
Then, on whichever event you're looking for (button click for example) you'll simply set main.Visible = false and popup.Visible = true, then you could have more buttons in your popup (yes, no, cancel, confirm, etc.) which do the exact same thing, but in reverse!
The most important thing to make sure of is that you have the 'runat="server"' property in your divs so that you can access them in your CS code
Hope this was helpful! :)