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.
Related
I have to create a large form that will at the submit at the end.
However since this form is large, it is split into smaller steps. Each step is displayed on the same page but only accessible in order (so first have to complete step 1 before being able to open step 2 etc).
Therefore I need to validate the inputs for each section before giving access to the next.
1.Should I break apart the form (so create 5 forms that each get validated on submit and then have a final button that checks them all and sends them off to backend)
Or
2. can I keep it as one large form and is there a way to only validate certain parts of the form? From what I understand nesting forms is not possible
(I am using jquery)
As you said, the steps are merely a UX improvement to a long form. So stick to one form tag and validate the inputs either on blur / input for each field or when your user is about to move from one step to the next.
You could maintain a small object with the state of each step and upon submit validate that each step is marked as "validated" before sending your request to the backend.
Alternatively, as forms can be tedious to validate properly, have a look at the many libraries out there that could help you in the process.
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 want to copy (populated) data, say a "company" name from a form, to another form, and/or web page. This (populated) data field changes, based on what the client enters, however, the resulting data is always a "company".
Is there code I can paste into my HTML document to do this?
To better clarify what I want to do, please see as follows:
("To: ____")
This is on the top half of my web page in a word document contained in a form.
("Bandera") is the company name.
This is on the bottom half of my page in a word document contained in another form.
All I want to do is copy the "company" name (in this case Bandera) to the "To:___" on that form.
I only mentioned the fact that the company name "Bandera" changes, in case this has any affect on the issue.
I am not a programmer and do not know any languages, so I am looking for the easiest way (a code I can paste into my HTML document) to accomplish this.
Thank you,
Michael
This doesn't look like a problem with a simple cut and paste solution. Since you haven't specified what technologies you're using, i'll keep it generic. Two options that I see are:
Have the user submit the form, take the entered value on the server side and set it as a value/default in the resulting (your other) form that you return.
If you're just looking to populate another form on the same page, you can hook the onblur/onchange event of the input control with javascript and populate the value of a second form using something like the dom/javascript function GetElementById or GetElementByName.
Hope this helps point you in a useful direction.
It sounds like you are referring to a data-bound fields?
I am assuming further that the Company is populated from a database as an ID/Name hash/datatable.
If you are using ASP.Net, there a few options of which some are: storing your key for the data-bound field in Session, moving it across to another page using inline variables, or storing the selected Id against a user details table, and retrieving the ID on the other web-page.
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! :)
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.