Dynamic Dropdown list with actions - html

like 1 image says more than 1000 words. here is what I want to implement in a django webapp:
http://bit.ly/1ocI0X
Is a dynamic dropdown list with an action to add values to db and dynamicly added to self dropdownlist.
Any hint would be appreciated. Tks.

I'm not very familiar with Django, but as long as you can make ajax calls you're good to go. Using jQuery on the client side would probably make this easier.
If the user selects <New User> from your dropdown, you pop up a form, submit the form with ajax and the response from the server would preferably be json containing the new user's details. Then you insert the json data into your select element.

Related

How to dynamically auto populate a input field uisng Nodejs and MySQL?

I have a field in my website where I want users to enter book names that they can checkout from the database. I want it so that when they start typing the names I want suggestions or drop down under the input box matching the name of the book they are typing.
Is it possible to achieve something like this? I have a books table in my MySQL database and I am using Nodejs as my backend. I have searched a lot online but did not find anything related to this online. Therefore, I decided to ask the question here.
You have to send AJAX request with type GET and send the typed character to the Backend.
and in backend you have to do query for ex :select * from book where name like %input%
Then you have to return the result as an array to the front-end.
Finally, in your front-end code you have to render the result array under the input.
Also, you can use any ready jquery plugin to do this task in front-end code.
The UI element is commonly called a "typeahead" or autocomplete.
Twitter release their frontend component as a jQuery plugin called typeahead.js. Most frontend frameworks will have an equivalent plugin or component.
The backend datasource for the books is up to you to implement.
For small datasets you can render the required book data within the page so it is directly accessible from your javascript.
For large datasets you will probably need to create a backend "book search" service in Nodejs. Typeahead libraries can send that user input to a URL via an AJAX request and the service returns the matching results, usually as a JSON object.
Code for geek example for your stack.
You can make a drop-down menu with book names and using ajax you can get value from the input and search in database and display data .
I suggest you to use mongo db as database.
You can find tutorials in w3 schools or
in malayalam https://www.youtube.com/c/Crossroadstalk

How to fill initial values for select on HTML form from database?

I'm new here. Can you help me with a newbie question, please? Maybe provide a link to solution.
I have a RESTful service and a web form for editing a model (e.g. user preferences). I want to prepare initial values on form. I request "new" model from the service and it sends me a JSON that contains object with initial values set (for example gender or birth date). It is easy to fill text inputs with those values. But also form has several select elements which should be filled with options from a database. And then I can set appropriate initial options (id) from the model for those select elements.
What is the way to do this?
I see couple ways:
Service might send options together with the model in JSON;
Form can request options itself before getting initial values (but it is another request and if form has several selects it is several requests).
Is there any conventional or best practice way?

Handle variable number of dynamic input fields in ASP.NET MVC?

I've done a lot of C# programming but I haven't touched much web until recently. One thing I've been struggling a little bit with, and really think there must be a better way I don't know about, is the right(a few of the better ways?) way to send the data in a form to a server.
I'm using MVC4 / C #, and I'm working on an html form that will be at least 18 inputs, some with multiple selections, and the ability for users to click 'add another' to a certain spot, and could make the amount of input fields 30+.
Is there any neat way to package this into some sort of javascript object, and receive it as a object in c#?
I would prefer to not do a post with the form, since I want to use AJAX and not have the page refresh.
In the only other form I have done so far in this project, there was about 6 inputs, but each one was optional. I built a queryurl and used jquery. Just this seemed like more of a pain than it needed to be and it's much smaller.
$.get(apiLink, function (response) {
$("#SearchResults").html(response);
});
You can create a JSON object with all the inputs you have, and then parse it on your controller using JSON.NET

Query MySQL Database Client Side

I am trying to validate that a username is unique on a registration form and would like to verify the uniqueness of the username right after the client types it as opposed to performing this server side after the form has been submitted.
Should I collect a resultSet from the database, store it in an array and then pass this along to the jsp page in the form of a bean (I am using a model 2 design so the user passes through a servlet before arriving at the jsp page)? What if the array is very large? How do I bring this data into javascript?
Alternatively, is there a way to do the query using ajax and javascript all on the client side? Maybe its possible to somehow run the query in the background?
I am really just looking for some direction because I am clueless as to what to even begin researching something like this. Is this even a smart move, performance wise?
I'd use "AJAX" for this.
Here's one approach: set up a blur() handler on the username text field of your form. When the blur() method is invoked, you post the username to the backend code; it verifies it and returns some appropriate response. You then parse the response and change the CSS class on the username text field (e.g., turning it red) -- or do whatever else visually you want to do to indicate "username in use."
Either way, you've got to get the username from the client to the server for verification; you wouldn't want any mechanism which allowed the client to directly use the DB (think security/exploits/etc).
If you're not already familiar, check out jQuery (http://jquery.com/) to make your client-side life much easier.

Handling multiple forms on a single JSP

I have a JSP page with several forms on it. Some of these forms are
generated dynamically, and each of them submits some information to a
database.
Handling one form is easy, as I can simply make the form post to
itself, and handle the
data using a single bean. Since I have multiple forms, I now have a
problem. Several of the forms on the page handle the same type of data
(same input names), and a 'setproperty *' call for each of the form
beans would change data in several beasn, not just the form/bean that
sent the data.
I am attempting to write a separate JSP with a single bean that
handles a form submission. However, I'm not sure how to make this page
go back to the referring page from which the data was submitted.
i'm going to reformulate in a simple way my question :
I have one jsp, that lists an faq with one question and multiple answers.
Each answer has its comment form, so its the same formbean.
I dont know how to set this...
Use a servlet to control, preprocess and postprocess the request based on the request parameters. You can distinguish the form by the name and/or value of the submit button pressed. You can forward the request back to the JSP page by RequestDispatcher#forward().