AJAX Remove record from page - javascript

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.

Related

Refresh div on JSP page with Ajax call without a response

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.

PHP MySQL : How to make an auto refresh data only when data changed on database

Usually I make content refresh automatically with the javascript function using setInterval.
But it seems ineffective because every second the content must be reloaded will take up a lot of resources.
Therefore if there is another alternative to creating an automatic refresh function only when the data has changed in the database.
One way to update your data would be to use Ajax in the frontend to request the data every few seconds and update it instead of reloading the page. Otherwise, you should check out socket.io (websockets)

Chat List Ajax Functionality

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.

Execute jquery ajax function after PHP POST

I am creating a mobile app, using jQuery Mobile and Ajax calls to PHP.
I have several mobile pages defined in the same php-file that lets the user filter down on location, type of item etc using listviews.
On some of my PHP pages I am using forms in panels to add new records.
Everything works fine except I can't figure out how to get back to the same page with the same selections, after I have added a record with a form POST?
In the normal selection workflow I use a Ajax call to populate the page in question with the correctly filtered data, based on the previous page, but to do that I would have to execute the jQuery Ajax function in my page when the page is created with PHP.
To do that the only way I have come up with is to use the PHP header function and submit the search parameters in the URL and then catch these when the web page is created and dynamically create some type of javascript onload event that executes the Ajax function with the parameters I have submitted, but surely there must be a better way?
Ok, so the way that I solved this in the end was to do all the form POSTS with Ajax calls, then I could reload the same page through javascript on complete, rather than trying to reload the page from PHP somehow.

Updating a page when data changes

It has been a long time since I have worked with PhP or Javascript and I want to build a website that runs on a server with MYSql that can update the page when the data in the MYSQl table changes.
I am not sure how to do this, if anyone has any ideas I'd love a boost.
assuming this data is being gathered using an SQL SELECT statement,
move your statement and the way in which it displays the results into a different file.
then you can load the results from the query into a div using jquery .load
$("#someDiv").load("somefile.php");
If the data is not being updated from the page in which you want it auto refreshed, use setInterval
$(document).ready(function(){
setInterval(function(){
$("#someDiv").load("somefile.php");
}), 2000);
});
with 2000 meaning it will run every 2 seconds.
If you are updating the data and want the updated results shown without the need for a page refresh, use ajax and in its 'success' function call:
$("#someDiv").load("somefile.php");
You want a webpage to be notified of a change in the server. More specifically, you want the data in your page to be refreshed when the data in your database changes.
You have at least two options:
You write some javascript so that you browser periodically asks (polls) the server for changes via ajax (as another user has already explained). You could even consider long polling.
or...
You make use of websockets, which will allow your server to push the data to the client whenever the server wants.
You may want to take a look at the many posts in SO which discuss this matter.
Refresh content automatically if the database changes
Automatically refresh browser in response to file system changes?
How can I refresh a page when a database is updated?

Categories

Resources