Automatically update scoreboard without refresh page - php

when i update score from my admin i want to update score in client autometically without refresh can any one help with script and technices
i see such auto refresh https://stackoverflow.com/
ANSWERS , VIEWS autometically updating

The only way I know to do this is to actively poll your server from the client.
You'd need to create some polling script that called your script service page with a request for the data. Then, when the data is saved in the admin page, the service will return the latest scores when next asked.
Typically, you'd use setInterval and clearInterval. So on page load, you'd assign your polling function call to the setInterval method and give it a timeout of something sensible (10 seconds plus depending on how often you expect to update your scores and how big your traffic is).
You'd need to be using clearInterval whenever you want to stop the polling. As per the other answer, a JS framework will help you with making the Ajax requests whether in Xml or JSON format. Given your tags imply 'faster' then I'd recommend JQuery and JSON.
Additionally, whatever framework you use, consider using Googles CDN for fast deployment of that framework.
I'm unaware of any server push with Ajax so would be interested to see if that methodology is available (though I doubt it).
EDITS: added more info on Google cdn and frameworks.
HTH,
S

You'd probably want to look into a js framework.
The steps you'd go about doing this are similar to:
Add an onclick listener to your link /button
When that gets trigger, stop the event (this way you stop the browser from refreshing / redirecting the page)
Get the user submitted data and send it to the server via an json ajax request
Process data server side and return a response
Process the response and update the interface accordingly
Here is a bit more documentation on how you could do this with mootools:
* http://mootools.net/docs/Request/Request.JSON if you want to go with the JSON path
* http://mootools.net/docs/Request/Request.HTML if you just want an AJAX updater

While I haven't used it, it sounds like this is what "comet" is intended to solve. It's a way of streaming content from a server to a client - basically a "push" approach. It might be what you're looking for.
http://ajaxian.com/archives/comet-a-new-approach-to-ajax-applications

There is no need to refresh the page if you use AJAx.
With AJAX you can call the server and place the result in a portion of your web page without refreshing the page.
There is an article here regarding using AJAX via jQuery.
The jQuery documentation on AJAX is good too.
An example which would request data from the server and append the result to a section of your page is shown below:
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
$("#results").append(msg);
}
});

Related

I need to push data to browser of all clients which are currently browsing our web page

We are making a app with php in which we want to push data to client browser same in the way in which facebook notificaiton sent by facebook. i know about commet and also have used ajax in past but ajax is not efficeint while commet programing is out of my mind.
Sample can seen at ESPNCRICINFO.COM live scorecard which is automatically pushed
by server to brwoser and than append to document without refreshing. Same app we
have to made.
Simply i need to build some code that send data to all the browser which have our webpage opened. No restrictions. Just need to send to all. So there is no need to check to whom data will be push.
I really need it urgently.
can you use JavaScript setTimeout(function name, seconds) ?
In JavaScript function you can generate .post request for some PHP script which can load messages, when the message will load, you can show it via you JavaScript. the timer will call this function for all people.

how to send data from Android to PHP and display it without refreshing the page

I successfully send data from Android to PHP and store in MYSQL database.
What I want is to display the data in my PHP page automatically without refreshing the page when data has been sent from and Android device.
Is this possible, possibly using jQuery with AJAX?
Please explain how it can be done or point me to a resource where I can find such information.
So you essentially want to update the page when data changes on the server.
Two main options come to mind:
1. Ajax poll
Use setTimeout in conjunction with an ajax call to periodically call the server and see if anything changed. You already mention jQuery, that's certainly a good place to start. Get familiar with http://api.jquery.com/jQuery.ajax/. This is probably going to be your best bet.
2. PubSub
I use http://www.pubnub.com/ on one of my sites for this very purpose. The browser subscribes to a pubnub channel, and the server publishes on that channel anytime something changes on the server. This is obviously more work to get setup up front, and more applicable for rich client-side applications (mine is a single-page app).
There are plenty of other implementations of PubSub as well.

How to refresh the Server or Database Table Values for every X Seconds

Ok i am tryin to make a Chatting application where users can chat with each other if theyr logged in to the website. I have set up everything except a little working which i am not able to write.
In my example : 2 users are chatting with each other : User A and User B
When User A submits a comment in the Chat Window , then the whole div containing the Comments should be refreshed not only at User A's side but also at User B's side so that when User A submits the comment, User B should be able to see it.
In short refreshing the div on every users page when a new record is added to the database table.
Im good in PHP, Jquery, AJAX.
Every x seconds use Ajax to check for new messages and if there is a new message, write it in the div.
There is no way for the server to tell the client a new message was posted. The client has to ask the server.
If you're comfortable restricting your users to new technologies, your best bet is to look into HTML5 websocket API. It's still a bit green around the gills, but it's certainly the way these things will be done in the near future. Kaazing's default example is a chat client, actually.
On the server side, there are implementations for websockets in JavaScript (Node.js), Java, and other technologies, but I'm not sure about PHP.
If you don't want to use websockets, research techniques that fall under the name "COMET" or search for "long polling". These will be far more responsive than a time interval.
If on the other hand you don't need it to be super-responsive, you could just use setInterval to have both clients poll the server for changes.
DC's answer is correct, if you are looking for an AJAX polling solution. This could be done with a simple JavaScript Interval.
However, polling is not light on resources as there are going to be a lot of duplicate content requests - and you would need to poll frequently to make the chat feel as though it is real-time.
If you would like to push data to the client from the server, I would look into writing this application using web sockets. NodeJS would be perfect for what you are trying to achieve, depending on what browsers you are wanting to support.
you need a timeout function like so:
function updateChatWindow(){
var xhr = $.ajax({
url : /* controller url */,
})
.done(function(response){
/** do something with the response the server gave you back **/
});
.fail(function(response){
/** handle a lost connection is some way, maybe show a message to the user, or retry request */
})
.then(function(){
periodicRefresh();
});
}
var timeoutFunction; //idealy, this will be inside a javascript object
//starts a refresh (in 500ms)
function periodicRefresh(){
timeoutFunction = setTimeout(updateChatWindow,500);
}
//stops the refresh from happening, see below why
function clearRefresh(){
clearTimeout(timeoutFunction);
}
var inputElement = $(/** the input area where the user types text **/);
inputElement.keyup(function(e){
if(e.keyCode==13){ // or whatever the e.???==13 was to check for enter
clearRefresh();
/** submit new chat line **/
updateChatWindow();
});
updateChatWindow();
Recap:
1) Have a ajax call that will update the window
2) Have a timer function that will store within it a timeout variable that will trigger a refresh of the content (the ajax call from 1)
3) Have the ability to cancel that request (because users type text, and after they hit enter, you should refresh the chat window no matter what)
4) Have the ability to stop the timeout function somehow to allow 3) to happen.

how can I refresh a webpage using ajax, after database inserts

I have a service running on a pc witch does some inserts in my (MySQL) database. What I want to do is everytime a new record is inserted in database to refresh automatically my webpage (I am using php). I read a relative post about updates
refresh the webpage on database update, but those updates were done "from" the webpage.
I also read another post
https://stackoverflow.com/questions/6460297/automatically-refresh-the-webpage-just-after-a-new-database-entry, didn't figure out how I can do this.
Any suggestions?
This is how you do it
Use JavaScript's settimeout() function to run an ajax request to your server at a set interval in which you send the id of the last record on the page. The use Javascripts window.location.reload() function to reset the page if the last record's id is different.
Why you don't want to refresh the page
This is bad user experience. You don't want the page refreshing out of no where. The best idea is to send the latest id on the current page to the server and check for any new ids. If there are new ideas send the records back via json and append them to the end of your results table.
This scenario is some complex but possible solution of your requirement!
In our scenario we have developed a sms-gateway and defining a trigger when ever any record is inserted we call a function that sends a sms to our gate way that behind that gateway we have developed our page. :)
In other way by defining timing ajax or many other ways where some what how our some resources are used, we have to compromise.
Ideally you want to trigger an update of data on the page via AJAX as opposed to a full page refresh. You can potentially accomplish this using web sockets. A popular server-side implementation is socket.io. Which uses the nodejs environment.
You could potentially write a MySQL UDF which executes in your trigger and signals nodejs to push more data (which may require writing a nodejs package as well). So, not trivial, but definitely doable :)

Can a site block an ajax call referring to another, third party site?

So I have a bookmarklett that seems to not work on some sites.
Here's what happens. The bookmarklett (exists on your bookmark bar) fires a javascript sequence that will construct a div with content on any page you are currently on.
Once the div is constructed, it will send an ajax GET request to a php page on my server (that is, the page the bookmarlett is loaded on is not within my server, this is somewhere else, ajax requests data from my server to be sent to the website the bookmarklett is loaded into).
Apparently, I have not seen this error myself, I was told that the ajax call failed to be received, so no dynamic data was passed into my constructed div.
The order of events is as followed:
Bookmark Clicked -> Creates a modal popup div on the page being viewed -> runs an ajax call to my server, passing a unique ID of the user to retrieve some data -> then populates the dynamic content with this retrieved data.
Apparently on some site the ajax request was never received back.
Can some sites block my bookmarklett from gathering data via ajax from my site?
Is it possible that the site messed up the request being sent to my server for a response?
If so, is there any work around? Or do i need to ditch it all together.
This is how my ajax request works, and I have not seen it fail, but apparently it has.. It may have been an error on the users part (may have touched some of the code supplying the data to send with the GET request, I'm not sure though)
jquery.ajax({
type:"GET",
url:"mysite.com/api/getStuff",
data:"format=jsonp&userid=1234",
success:function(data){
// do stuff with the retrieved data
},
error:function(err, msg){
// response was not received
}
});
XMLHTTPRequest is subject to the same origin policy which is imposed by most browsers. For security reasons, it restricts XHR to the same protocol, domain, and port as the original page request.
Visiting the link I provided will also start you on your way to finding workarounds for this if it's something you want to do.
Crossdomain ajax requests are restricted. Use 'jsonp' or 'script' dataType.
Note that "Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation". More info is available on official jquery documentation
I know from experience that some mod_rewrite rulz messed up my ajax requests, i think you might have some problems with using ajax + mod_rewrite.

Categories