I'm not sure how to ask this.
I have a HTML form that has several fields, including user id, which maps to a real name. I have jQuery validation of the form working.
Right now, I have to submit the POST request, to show the user's real name.
example: It should show "john doe" if the user types "3", before without clicking submit.
ID input: [3] ( john doe )
Do I use jQuery to retrieve this information? Do I also set up a new page, that has a response to a POST request, that returns 'john doe' as XML / JSON or something along those lines?
note: Using python's Flask. Maybe I should use Flask-Sijax ?
The Flask documentation has a good example using jquery to fetch a value from the server without posting the whole page.
If you wanted it to fire as a user types the number (rather then hitting a button in the example) you could use the .keyup event in jQuery instead of the .bind/click event shown the example.
Related
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
So let's say a user is signing up, and I want to notify them on the fly if they try to enter a username that's already in use.
Since it's jinja2, I can pass the current list of used usernames to the frontend, but how do I then use those without using javascript ?
You can not do that without JavaScript on the client side. But, what you can do is pass the list as a JAvaScript array String to the client and put it into the javascript code to verify the input on the client. For example in a method called by textbox .onblur.
So I am trying to find the most direct point to do a 'Get' from an API when a page loads. As an example, if in my app I go to "#/somepage", when I click on the link to do so, it also does a get from "http://{{host}}/api/common/trans/claim". That URI contains a single property with no name that looks like " "Bzc5YUL7dNjK6ApxpNK1XB%2bDtTU8cw7xRSGpjZ4XRuE%3d" ". So if I fire or add some listen event to this, what is the best way to store? I know that might be a seperate question, but legitimate here because of how the data is returned. Hopefully I provided and storied my question correctly.
My queries have pointed to things like viewContentLoaded and DOM readiness, etc..., but those seem overkill for this when simply clicking a link an retrieving info from the API.
Keep in mind, this API is local and private and the URI data is only available until after the user is logged in.
I'm not if I follow your question but you can fire the function using the ng-click directive.
To store the return value you could set it to the $scope of your controller or save it to a service if you'd like to share the data across controllers.
I was reading this Questions regarding REST
What exactly is RESTful programming?
While reading i get that the client is independent of server and client don't need to construct anything.
I want to know that when we are building forms like user registration . Then what is the REST way of doing it.
I mean when i do GET for /user/new then
Does the server has to send the complete FORM in html
Only send fields in JSON and form is constructed by client itself
But then again there will be many complexities, if i just send the fields, then what things like
Hidden fields
Default value for select boxes
what about some logic like this field can'r be greater than 30 etc
REST is, as you're already aware, a way of communicating between a client and a server. However, the issue here is what is being defined as the "client". Personally, I tend to consider that the browser itself is not in itself the client: instead, the client is written in JavaScript, and the browser is merely a conduit to executing it.
Say for the sake of argument that you wish to view the details of user '1414'. The browser would be directed to the following location:
/UserDetails.html#1414
This would load the static file ViewUser.html, containing all the form fields that may be necessary, as well as (via a <script> tag) your JavaScript client. The client would load, look at the URL and make a RESTful call to:
GET /services/Users/1414
which would send back JSON data relating to that user. When the user then hits "save", the client would then make the following call:
PUT /services/Users/1414
to store the data.
In your example, you wanted to know how this would work with a new user. The URL that the browser would be directed to would be:
/UserDetails.html#0
(or #new, or just # - just something to tell the JavaScript that this is a new client. This isn't a RESTful URL so the precise details are irrelevant).
The browser would again load the static file ViewUser.html and your JavaScript client, but this time no GET would be made on the Users service - there is no user to download. In addition, when the user is saved, this time the call would be:
POST /services/Users/
with the service ideally returning a 302 to /services/Users/1541 - the location of the object created. Note that as this is handled in the client not the browser, no actual redirection occurs.
"Forms" for hypermedia APIs could be rendered in a "forms aware" media type like for instance Mason (https://github.com/JornWildt/Mason), Hydra (http://www.markus-lanthaler.com/hydra/) or Sirene (https://github.com/kevinswiber/siren). In Mason (which is my project) you could have a "create user" action like this:
{
"#actions": {
"create-user": {
"type": "json",
"href": "... URL to resource accepting the POST ...",
"method": "POST",
"title": "Create new user",
"schemaUrl": "... Optional URL to JSON schema definition for input ..."
"template": {
"Windows Domain": "acme"
}
}
}
}
The client can GET a resource that include the above action, find it be the name "create-user" and in this way be told which method to use, where to apply it, how the payload should be formated (in this case its JSON as described by an external schema definition) and some default values (the "template" object).
If you need more complex descriptions (like selection lists and validation rules as you mention) then you are on your own and will have to encoded that information in your own data - or use HTML or XForms.
There are multiple ways to do what you want.
You can use GET for /user/new along with a create-form link relation to get a single link. This can in plain HTML or HTML fragment, or a schema description, practically anything you want (the result will be less reusable than the other solutions).
You can use a standard MIME type which supports form descriptions. For example HAL with a form extension or collection+json.
You can use an RDF format, like JSON-LD with a proper vocab like Hydra.
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.