I am aware of using AJAX calls to refresh content inside a div using the response received, but in my case I have no response but still want to refresh the div.
My application has a table called 'Cart', on which when I click the delete button, it removes an item from the cart. I remove the item by sending an AJAX call to the Java servlet that updates the cart in an ArrayList. As I'm removing only one object, I dont have a response, but still want to update the cart with the removed item.
I have tried the following ways:
Redirect to the same page using servlet after updating cart array. This causes the page to reload.
request.getRequestDispatcher(target).forward(request, response); where target is index.jspx
Use $(..).load('index.jspx') to try and refresh the particular div, but this places the entire contents of index.jspx into the tiny div with the cart table.
An AJAX request (Asynchronous Javascript And XML) is sent to your server. You can define a callback for your AJAX request, that is, a Javascript function that is going to be executed once the request ended. You can also use promises for this purpose. Anyway, once you know how you can execute a function AFTER the request has completed, you need to decide whether you need information from the server.
If you are content with not receiving any meaningful answers from the server and are okay with assuming that the removal was successful, then you can simply remember which delete button was pressed, find the row which contains it and remove() it. In this case you do not need to send further requests to the server.
Otherwise, if you need to get further information from the server (because new items might have been created/modified/removed), then simply change your server-side in order to send back a JSON about the items to the client-side and refresh your table there.
You actually don't have to redirect the whole thing again. Instead of redirecting, just use response.getWriter().write(<Your updated Array>); inside doPost() or doGet() depending on which you are using.
This will send your updated array to your AJAX code, instead of refreshing the whole page.
Related
I need to send form data to another page that will allow the user to do something in a form and return the result of that form back to the original page? Is this possible? I know it's not ideal, but the issue is that I need to make a "drop-in" solution that does not need to be integrated with other code. I know it's a very specific request and scenario.
I know how to send POST data that doesn't require any user input on the processing page. i.e. I can send POST data to 'calculate.php' which will do the math and send it back, but if I need additional user input on 'calculate.php', how can I still send it back?
An example of expected results would be:
Page #1: User enters a number and presses submit to go to next page.
Page #2: User enters a second number and presses submit to finish.
Back to Page #1: User receives sum of both numbers.
Obviously, this is a really redundant thing to do, but I'm trying to simplify the problem as much as possible.
EDIT: There a few restrictions I forgot to add.
Page #1 is not my application, I am developing Page #2 as a "drop-in" solution for Page #1. Essentially, I can only use Page #1 to call Page #2 and receive a response from it. The problem is that I need to be able to allow for user input on Page #2.
I know I can post to Page #2 and then post to Page #1 again, but what if I need to maintain the state of Page #1. For example, if there's an open Web Socket connection.
Please note, I understand that this may be impossible or extremely difficult, but if I don't ask I'll never know right?
You want it with PHP or any other language. If you are running Php on server side then you can use Global variables like $_GET and $_POST.
Page #1: Use Post/Get method to send data to second page.
Page #2: Receive all fields' values using Globe variables ($_GET and $_POST). You can use these values as default values of form fields. Now submit this data to page 1 using post or get method.
Back to Page #1: Here you will receive the data of first page from second page and newly posted data from page 2
Either of these should work:
Never leave the page - use AJAX / XMLHttpRequest to call out to other pages to process chunks of data
Do everything on page 1 using "postbacks" -- the form targets are the same page, there is a state variable like "stage=1", and you use JavaScript to add set hidden variables for any additional state that's needed.
... PHP state validation and processing for the different stages ...
... one or more blocks of HTML for the page (PHP if / else can be used to choose between multiple page views) ...
Edit for added restrictions:
Have page 2 use postbacks or AJAX to collect the additional information
I figured out a few ways to do it.
Update a Database (or Data Store of some sort, depends on security needs) and have Page #1 listen for events from a separate page (on the same server as the database). Very similar to the way PayPal's Instant Payment Notification (IPN) works. I was actually able to set up server sent events with it as well.
Essentially, Page #1 sends data to Page #2 where the user will perform the function and then Page #2 will send POST data to a listener somewhere (either on the same server or Page #1's server), the listener will update a database and Page #1 will be listening or pulling to an event handler that will send an update once the database updates.
Use JavaScript Child/Parent Window functions. This is okay if Page #1 and Page #2 are on the same server, but can get messy and browsers have a lot of restrictions and it varies depending on browser.
Page #1 will open Page #2 in a child window, after the user performs a function, Page #2 will call a function that accepts the result data on Page #1.
In my webpage, the user can write a post and the data the user enters is then stored in the database. I want that data to be Selected by a query and posted into the webpage but without the page being reloaded.
I am aware that I need to use Ajax, but I do not know how to use it. I need the post to be added to the page when the post button available in the webpage is clicked.
If you do not know how to use it, why not try to read up on it? :)
To give you a gist of what you need to do, the button needs to be tied to an event handler in Javascript/JQuery. That event handler will be responsible for making the AJAX call and retrieving the information from the server. The call would be something like:
$.ajax({type: 'GET', url: '/path/to/information'})
Calling .done() on this particular AJAX call will execute the callback function specified in the parameter. Usually it's done like so:
$.ajax(...).done(function(data) { ... });
Where data is the response data on a successful (200) response. Once you receive the data, you would just use Javascript to update the html/text of an element on the DOM. How you implement this is solely up to you, but I suggest reading up and trying to get it to work before asking!
I have a chatbox, so when user hits post, it calls a php script to update database, and another php script located within itself to refresh the conversation to display the newly added message.
I thought about how to do this and here is how i have come about:
Have ajax call on button click to POST the data needed to the first php form to update the database (No need to return anything except whether succeed or fail)
Have e same ajax call php script located within itself to refresh the conversation (Note that this php script is located within itself as it is a loop and i use it to echo out the reply divs) in this case, page will not refresh and data can still be sent and obtained.
However, I'm not very sure how to do the second point, being call a php loop within itself to refresh the page and update the newest entry, any suggestions or would it be overly hard to do so such that i should just manually refresh the page.
To be more specific, this is the process flow of how adding a reply will work:
User types reply, clicks post.
Ajax is already attached to post button, so detects the post and fires first POST request to addchat.php
addchat.php contains mysqli code to update the database with the data posted from the ajax, returns success or fail
Once Ajax receives back success request, immediately fire off a command(this is what i am not very sure), that runs the php code located within the same document to echo out the newly updated chat reply (i do have timestamps in my database, so there is the ability to compare time, but note that the function is located within the same script)
After the php code is fired again, it updates the html automatically, since its located within the same script.
I am also not possible whether this is achievable with ajax, because many others use long polling instead to keep checking the database, but because my chat system does not need that high level functionality and the replies aren't that request, so what i am doing is just to get ajax to fire off the retrieval php script whenever somebody posts a reply to update the conversation. this should be more than enough.
I have a php script where a query runs to load all the messages from my database.
When I click at one message I can choose delete, then he runs a AJAX call with jQuery.
At page that AJAX called there runs a query to remove the record from my database.
This is works fine. But when the AJAX call is finished, I see still the div with the message. Pass if I refresh the page the div is gone. (because I have delete it from the database).
Is it a good way to refresh the page directly after the AJAX call return true.
The disadvantage is that you run the database query again, and get all the data from the database.
Is there also a way to refresh the page "localy" so already loaded content is no longer be retrieved again by the database?
EDIT :
I have solved the problem now with:
$('#message' + myId).remove();
This works.
Is it possible to kill a previous ajax request?
We have tabular data very adjacent to each other. On mouseover event of each data we are making a request to our server using JQuery Ajax object and showing in popup.
But as frequently we move mouse to other tabular contents previous Ajax responses are being displayed inside popups prior exact response being displayed which is meant for that tabular content.
I need when new Ajax request is generated previous request/response should be killed, so that always expected latest response is available inside popup.
I am using JQuery, PHP and Mysql to server the request.
Could you create a custom Javascript Sync object which would be shared by the function making subsequent ajax calls?
Assign a sequentially generated id as a parameter to the request call going in. Include the same id in response. On firing every request assign a new id, incremented by 1 or whatever logic. If the current id in response is not same as the one in shared object; ignore the response else render the response.
this would cleanly solve the race condition. I am not sure myself if there is a way to kill the request prematurely but it would at least not create rendering problem that you face now.
Another option would be not to initiate another request until the first is completed.
Yes and no. That is the point of Ajax. To be able to do something asynchronously. What you are wanting to do is to abort a request which destroys the idea of asynchronously. Perhaps what you can do is, if you send another request, set a value somewhere indicating the number of requests, then in the callbacks to your requests, check if the amount of request is higher than 1, if so ignore the response.
Check this AJAX Manager plugin. The XmlHttpRequest has an abort() function but jQuery doesn't have a wrapper for it.