I'm implementing a twitter like news system on my website. It loads all news items on page load with an ajax call fine. But how do I show a new item without having a trigger like a page load or a click on something? So when a new item is added to the database, It should automatically be added to an open page, like an auto-update or something.
you can look into
ajax polling
reverse ajax
comet
server polling
here is a useful link http://www.zeitoun.net/articles/comet_and_php/start
edit
you can achieve the effect by using jquery alone below are some useful links
http://jquery-howto.blogspot.com/2009/04/ajax-update-content-every-x-seconds.html
Timeout jQuery effects
If you don't have an event, you have to generate one. A common practise to archive this is to have a timer running on the client/browser which fires an event in certain intervals to generate ajax requests.
Here are a few jquery plugins which might help you:
http://plugins.jquery.com/project/timers
Some SO posts which are in a similar direction:
Use AJAX to watch SQL database for changes
jQuery - If a database is updated, update the page
Sending notification to the user on database change
Related
I am working on a app with a drag and drop function that on drop, posts a set of variables to a handler to change the status of the item being dropped. I also have an AJAX script running to auto refresh the div with the updated database ID's.
The issue I have is that whilst the AJAX is reloading the div, I loose the ability to interact with the object. Is there a way to pause the AJAX whilst MouseDown is active or another way to handle this. I need the refresh of the Div to be every 100ms or so.
Thanks in advance.
Am developing a php mysql app with codeigniter for users on an intranet. It heavily uses jquery and flexigrid. One of the components on a page is a table which gets populated via jquery post based on user action/actions on other components of the same page ... So far, all works fine.
There are too many components (tables/forms, etc) on this page, and for lack of real estate, users have requested me to add functionality/ability to move one of the components to a new window. I can move the component in question to a new window, but am not sure how I could refresh that new window based on user activity on the default window - and thats where I could use some help.
An example of what I am looking for can be found in phpmyadmin, wherein you are able to edit a sql query in a popup window and on running the query, it updates another window with the results of the query - It also seems to know which window to update/refresh if there are multiple tabs/windows open ...
If you can give any hints on how to proceed with this, that'd would be very helpful ... thanks.
Look for window.opener in jquery you can use your querystring to pass data to the popup/form page
I plan to make this commenting system where comments can be posted and updated without refreshing the page ( you can see this on youtube)
Posting comments is understandable ( post to php page from javascript and run SQL query on server side to import it, than return the comment and fetch in html )
Updating is the part I don't understand. How can I refresh the page automatically on certain intervals and add comments? Isn't that going to be a mess when multiple users try to comment at the same time?
I was wondering if anyone can recommend a good way ( just like word of advice ) to achieve this and save me some time
The most common way is to call setTimeout or setInterval in javascript to poll every 5-25 seconds. Basically, you store the idea of the last comment you received on the javascript side, then you call a function that sends this id to a remote server. If there are newer messages than this id, you send all of them back via XML or JSON (usually json is easier to deal with on the javascript side, especially if you use a framework like jQuery).
You can use "Long Polling". Basically it is a technique in which you open an Ajax connection and the server doesn't close until it has some response to send. The client upon receiving this response requests a new connection and waits again for a response.
You can check a tutorial: Simple Long Polling Example with JavaScript and jQuery.
Another really good way would be using a subscribe/publish service.
I'm using PubNub at the moment for Notifications, Comments ect..
I once used a simple technique (no timer used, no total refresh) with a flaw that it shows only new comments, but not edit and delete by others done to existing displayed comments. Be mindful that refreshing the whole comments panel may be unfeasible if you allow "expand / collapse / view more" comments. My simple technique is to have (i) a hidden input element to store the index/primarykey of the last comment displayed (ii) several uniquely identified divs to hold existing displayed comments and ajax refresh or html dom manipulation only that div when actions are performed on it (iii) a div to hold a view more comments button whereby the button will only be displayed if there are more comments to view.
Therefore, whenever a new comment is posted, "the view more comments panel with a button" will be refreshed saying view [X + (# recent new comments by others) + (# your new comment)] comments. Upon clicking the button, it will display 3 more new comments along with "view Y more comments" button.
I am building a photo sharing service in php. I am using a lightbox in jquery which will popup when we click 'add' button to add photos. We can upload multiple photos. Also I am using ajax to upload photos so that the page is not reloaded. I want that after I upload photos the same will be automatically loaded in my gallery and the gallery should display new photos without need to refresh the page. The photos will have a particular id for a particular user in the database, so ulitmately the change in the table for the user should be reflected. Now the problem is that I don't have control over the closing button of the lightbox. Therefore I cannot modify it to call any other function so that it performs the query and displays my photos using ajax. I have heard that we can detect changes in the database automatically using JSON, but I have never used JSON and know almost nothing of it. Can anyone illustrate a simple example in php of how can the changes in a mysql table detected using JSON? Is there any other way to achieve it? Please help me.
JSON an ideal data-interchange language.JSON is used for fast data interaction only.so you can not do this with out help of DOM request.
http://www.json.org/
You can do this with ajax. You make ajax request for every second for latest update.
or
use long polling method like comet
Implement COMET with PHP
EDIT:-
gowri:How to make ajax request per second?
use setInterval
setInterval(function(){
//make your ajax call here
},1000);
Let's say we have a page written in PHP. This page loads by it self a template with header, body and footer and print this out. Now let's say that in the body of this page we would like to start a loop and load some posts (messages taken from a database).
We also need the page to load new posts every 10 seconds, if any, without refreshing the page (classic AJAX). This ajax call will use JSON and AJAX and micro templates.
Now i'm just wondering:
Do we really need PHP to load posts the first time the page is loaded? Can't we just start that Ajax call and load posts with Ajax instead? (Notice that the existing ajax call would be kept as it is, since it loads posts starting from the latest loaded (in case of no posts, that would mean all posts).
If you did not understand my question don't hesitate to let me know.
In this situation I think the simpler approach is the let AJAX handle it, if you do let php load the initial messages, you'll have two places in code, that you'll need to maintain to perform identical jobs.
I think you are asking how you should load the posts the first time the page is accessed. If so: When the page firsts loads, have some PHP that prints out the existing posts. Then, add some JavaScript to update the page with new posts every 10 seconds. This is a matter of preference. You might want there to be no posts when the page first loads, and then use Ajax to get the existing posts once your page has loaded.
Edit:
I agree with jondavidjohn that you might be better off using pure Ajax. However, you could always isolate the code that fetches the pages into a separate function. That way, the script that generates the page calls the same function as the script that is called via Ajax.
The drawback with that technique is that it doesn't downgrade gracefully. So people with javascript disabled will not see any posts.
I'd recommend outputting some data with php - AJAX requires JavaScript which many people don't have activated.
Why not, instead of having the browser poll the server for new posts, have the browser push new content to the browser when it is available using the likes of node.js?
I designed my site with AJAX exclusively, and it works perfectly except for one rather major issue: Using AJAX requires JS to be enabled. Of course, if users trust your site, this is not a problem, but if they don't, then an AJAX solution won't work unless you put the entire page in a noscript tag.