We Keep Coding

Having separate ajax calls on a jsp calling to servlets

I have a button that is used for displaying an annual leave request by doing an ajax call to a servlet which then retrieves data in the response and displays it on the modal.
'view modal' buttons in a table.
Once one of these buttons are clicked, they run a javascript function which does an ajax call and displays the data that recieved on the modal
(Screenshot). Basically I need another ajax call to a servlet as and when the "respond to request" panel is clicked. I've heard of event binding which might be useful for solving my issue, however being the newbie I am, I haven't seen an example of how this works that I understand so maybe someone could attempt to provide one here for me.
The second ajax call is to basically running a query against the database to check whether or not the currently logged in user on my web app has already accepted/declined the request so that I can disable/remove the buttons without refreshing the page.
Thanks in advance!

Two options for submitting different calls:
Each button submit different form, each form submit different action - example with jquery
Each button submit different JavaScript function the execute different ajax call
- example JavaScript

JavaScript: how to pass additional information to source page?

I have a website and when a user follows an internal link I would like to pass some extra information to a new page, so JavaScript on the destination page could do some useful highlighting.
There is an option to pass that information via the link parameters (GET), but it will generate lots of virtually duplicate pages and break pretty URLs concept. Another way is to make a webapp using AJAX, but it will also bound content to a single URL.
How can I transparently pass some information to the new page during navigation w/o messing with site's URL structure?

You could store the data in local storage or session storage, and retrieve it again on the destination page.

So you have a few options.
Form Submission
First option post a form with the data. Add a hidden form, on the anchor click capture the click event, set the hidden fields with the values you want to send to the next page, and submit the form. On the next page, read the post parameters in the backend and update the page.
Local Storage
On click of the anchor, set localStorage to the values you want to appear on the next page. When the next page loads, read the localStorage values and update the page. Note: The server will not have access to the values
Ajax with pushState
Use Ajax to submit the form. When the Ajax call returns, use window.history.pushState to update the url with whatever url you want to be displayed to the user.

One of the options not mentioned is to create a dirty URL:
/destination/param1/value1/...
then strip additional parameters at server-side and redirect:
/destination
keeping additional values stored at server-side (e.g. via sessions). I still prefer using sessionStorage in a real application, but it worth mentioning anyway.

What do you mean it will "bind content to a single url"? AJAX request is the first thing that comes to my mind as the solution to this problem. You dont have to use the url of the page to make the ajax request, you can build the url inside your javascript based on whatever conditions exist in your application.
Besides AJAX and passing parameters in the URL, the only other thing I can think of is to use Cookies. That of course runs into problems if the user has cookies disabled. I think an Ajax call to your server is the most robust way of handling the problem.

Node.js form update with and without ajax

What would be the "best" approach to dealing with forms which have to work without and with JavaScript enabled?
Would it be better to create different routes for each, like
AJAX request: route "API/contact" and return res.send("message")
without JavaScript: route "contact"and return a redirect with a query param of "message"
Or in one route and detect xhr and render it depending on this?
Or is there a better way of dealing with the problem of taking the user to the res.send("") when the JavaScript isn't enabled to give the user feedback on the submit?
To clarify:
I have a site which is working with AJAX requests for its forms to avoid full page loads. It lacks the fallback when JavaScript is not enabled and thus when a user clicks submit on a form, he receives the data from the post back with res.send and it replaces the whole page, instead of the desired effect which would be to just update a label with the "success/fail" message. The question then remains as above which would be the neat way of dealing with this?

Probably the best thing to do would be to check the X-Requested-With header and check that it contains XMLHttpRequest (but this might get deprecated as the new fetch API will slowly come into browser.
Based on that value, you might want to return a JSON payload, or eventually trigger a server side rendering, therefore returning an HTML page ready-to-be-consumed.
As an alternative, you can return a redirect response with a particular query string value; once the page is loaded, you will check for that value (using qs for example, or deparam in jquery and manipulate the client side accordingly.

Your server routes have nothing to do with client-side javascript. You don't need javascript to receive a "res.send" message.

Any way to make form submission synchronous?

I need to download a file from a server and to get a pop-up 'save as' box on the client. I can't do this in Ajax, so I create a hidden form in the client JavaScript, and I submit the form in the JS when a button is clicked. The server gets a POST, and it sends the file back as an attachment, and the client produces the 'save' box.
So far, so good, except that there are two problems here:
1 - I want the JS to delete the newly-created form when the user has completed the download. I suppose I could just leave a useless hidden form in the DOM, but it's not ideal. The problem is that form.submit() executes asynchronously, so I don't know when to delete the form - I can't simply do it after executing form.submit()
2 - Sometimes the user actually needs to download two files. This code doesn't work:
form1.submit(); // download file 1
form2.submit(); // download file 2
The client only executes/completes one of the submits - I can do both by putting an alert between the two, for example, but I need to do it properly.
If I was doing this with Ajax, I'd just make the calls synchronous, but I can't find a way to do this with form submission. Ideally I'd like an attribute to make the submit synchronous (something like .setAttribute('async', false), which doesn't work).
Any ideas? Or another way to download two files with two save-as dialogs?

A great trick is to use a cookie. The trick works like this:
Create your temporary form, and add two extra fields that you populate, one with a cookie name and the other with some unique value (could be random, could be a timestamp or a counter; doesn't really matter).
Submit the form.
At the server, the code should do whatever it normally does to create the download. It should also create a new cookie with the given name and value. Return the response.
Back at the client, right after submitting the form, start an interval timer to check (every 100ms or so) to see if there's a cookie with the chosen name and chosen unique value. As soon as you see the cookie, you know that the form response has arrived!
As to downloading two files, I don't think there are any provisions in HTTP for two attachments. You can of course return something like a zip file.

HTML5 executing query without postback

I am using html5, javascript and JSP for my project. I want to know if there is some method that i can used to execute a query from my servlet without actually posting back the page. i know it can be done in ASP.net but i do n't how it can be be done in java script and JSP. Actually i have a dynamic webpage displaying data from server.what i want is that in a click event of button i want to execute a query form server and update it on the page. i know i can submit the form but it will submit the page which i want to avoid.Any suggestion......
regards
nquazi

You can use an AJAX request to submit inputs and get back an output without reloading that page. Here is a previous stackoverflow answer that shows you how to do a HTTP GET request.
HTTP GET request in JavaScript?
You will then need to process your inputs, run the query, and send back an output on the backend server.