How do I check a value in a php script for change using javascript?
I would like to do something like:
<script type="text/javascript"><!--
var innitialID = get_file_contents(lastPresentID.php); //get_file_contents(lastPresentID.php);
function myTimeout() {
var freshestID = get_file_contents(lastPresentID.php);
if(freshestID != innitialID) {
location.reload();
}
setTimeout(myTimeout, 5000);
}
window.onload = myTimeout;
</script>
the php script generates a single integer which is the last ID of a table.
Thanks!
<script type="text/javascript">
window.onload = doAjax(true);
setInterval(doAjax, 5000);
var initialID = -1, freshestID;
function doAjax(initial) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest(); // code for IE7+, Firefox, Chrome, Opera, Safari
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // code for IE6, IE5
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
if(initial) {
initialID = xmlhttp.responseText;
} else {
freshestID = xmlhttp.responseText;
if (initialID != freshestID)
location.reload();
}
}
}
xmlhttp.open("GET", "lastPresentID.php", true);
xmlhttp.send();
}
</script>
Here we go, updated with ajax calls in there. First sets the initialId variable, then the interval code runs every 5 seconds and update the freshestId variable, and does the comparision.
EDIT: Code is now not duplicated.
The code below on load will assigns oldVal. Then using setInterval will update newVal every 5 secodns and check if newVal != oldVal.
It gets the values from lastPresentID.php using AJAX.
var oldVal = 0;
var newVal = 0;
function loadXMLDoc(old) {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 ) {
if(xmlhttp.status == 200){
if(old)
{
oldVal = xmlhttp.responseText;
}
else
{
newVal = xmlhttp.responseText;
if(newVal != oldVal)
alert("test");
}
}
else if(xmlhttp.status == 400) {
alert('There was an error 400')
}
else {
alert(xmlhttp.status)
}
}
}
xmlhttp.open("GET", "lastPresentID.php", true);
xmlhttp.send();
}
function timeout() {
loadXMLDoc(false);
}
loadXMLDoc(true);
setInterval(timeout, 5000);
Related
Here is my code:
var xmlhttp;
function HttpObject(str)
{
//alert("iam in process request");
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
alert ("xmlhttp");
}
else if(window.ActiveXObject)
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
alert ("ms.xmlhttp");
}
else
{
XmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
alert ("rdystate: " + xmlhttp.readyState);
alert ("status: " + xmlhttp.status);
alert ("Text: " + xmlhttp.statusText);
xmlhttp.onreadystatechange = processRequest();
xmlhttp.open("POST",'/CountryTest.do',true);
xmlhttp.send(null);
}
function processRequest()
{
if (xmlhttp.readyState === 0) {
alert("u r in 0 :: The request is not initialized ");
}
var target = document.getElementById("curlist");
var res = xmlhttp.responseText;
alert(res);
if (xmlhttp.readyState === 4 && xmlhttp.status === 200)
{
alert("in readystate");
}
else
{
alert("error in readystate");
}
}
It always displaying status 0
curlist is id of my country state prog
can any one say me where is problem?
/CountryTest.do is the url pattern of the servlet.
xmlhttp.onreadystatechange = processRequest();
You just called processRequest immediately, and assigned its return value to onreadystatechange.
You want to assign the function itself, without calling it.
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState=='4')
{
alert(xmlhttp.responseText);
}
}
I am doing a http request in js but I cannot access the data I get from outside.
if (window.XMLHttpRequest)
{
search=new XMLHttpRequest();
}
else
{
search=new ActiveXObject("Microsoft.XMLHTTP");
}
search.onreadystatechange=function()
{
if (search.readyState==4 && search.status==200)
{
nr = search.responseText;
alert(nr.length); // here i get the actual length
}
}
search.open("GET","clienti.php",true);
search.send();
alert(nr); // here the value is undefined
I tried to declare variable globally but still doesnt work. Please help!
Thanks!
var nr;
if (window.XMLHttpRequest)
{
search=new XMLHttpRequest();
}
else
{
search=new ActiveXObject("Microsoft.XMLHTTP");
}
search.onreadystatechange=function()
{
if (search.readyState==4 && search.status==200)
{
nr = search.responseText;
alert(nr.length); // here i get the actual length
}
}
search.open("GET","clienti.php",true);
search.send();
alert(nr);
With your code nr is private to onreadystatechange block.
you have scope problem define nr as global variable and than try
var nr=0;
if (window.XMLHttpRequest)
{
search=new XMLHttpRequest();
}
else
{
search=new ActiveXObject("Microsoft.XMLHTTP");
}
search.onreadystatechange=function()
{
if (search.readyState==4 && search.status==200)
{
nr = search.responseText;
alert(nr.length); // here i get the actual length
}
}
search.open("GET","clienti.php",true);
search.send();
alert(nr); /
I have 2 divs.
Once 1 of the 2 divs has been selected, the 'id' of each will change to either divActive, or divInactive so the active one can be highlighted using css.
Is it possible to do this even though i already have an 'onclick' action associated with each div?
Here are my divs:
<div class="statusOption" onclick="loadXMLDoc('indexEveryone')">Everyone, everywhere</div>
<div class="statusOption" onclick="loadXMLDoc('indexFav')">Favourites Only</div>
Here is my current javascript:
<script>
function loadXMLDoc(pageName)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("centreCont").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../home/" + pageName + ".php",true);
xmlhttp.send();
}
</script>
If you don't want to use jQuery you don't have to. Here is a pure javascript version. Notice it toggles an active class, not an ID.
window.onload = function () {
var everyone = document.getElementById('everyone'),
favorites = document.getElementById('favorites');
everyone.onclick = function() {
loadXMLDoc('indexEveryone');
var myClasses = everyone.className,
otherClasses = favorites.className;
if (myClasses.contains("active"))
{
everyone.className = 'statusOption';
}
else if (otherClasses.contains("active")) {
everyone.className = 'statusOption active';
favorites.className = 'statusOption';
}
else {
everyone.className = 'statusOption active';
}
}
favorites.onclick = function() {
loadXMLDoc('indexFav');
var myClasses = favorites.className,
otherClasses = everyone.className;
if (myClasses.contains("active"))
{
favorites.className = 'statusOption';
}
else if (otherClasses.contains("active")) {
favorites.className = 'statusOption active';
everyone.className = 'statusOption';
}
else {
favorites.className = 'statusOption active';
}
}
function loadXMLDoc(event) {
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("centreCont").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../home/" + pageName + ".php",true);
xmlhttp.send();
}
}
Edit to accommodate requests in comments: If you always want one to be active it shortens the code a lot. Here is the updated code. Just make sure you give everyone the active class to start in your HTML
window.onload = function () {
var everyone = document.getElementById('everyone'),
favorites = document.getElementById('favorites');
everyone.onclick = function() {
loadXMLDoc('indexEveryone');
var otherClasses = favorites.className;
if (otherClasses.contains("active")) {
everyone.className = 'statusOption active';
favorites.className = 'statusOption';
}
}
favorites.onclick = function() {
loadXMLDoc('indexFav');
var otherClasses = everyone.className;
if (otherClasses.contains("active")) {
favorites.className = 'statusOption active';
everyone.className = 'statusOption';
}
}
function loadXMLDoc(pageName) {
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("centreCont").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../home/" + pageName + ".php",true);
xmlhttp.send();
}
}
Yes, you can have more that one function call in onclick.
However, you should not change the id of the elements, but add or remove a class instead.
Also, you should really consider using something like jQuery, which would make your code much more concise:
<div id="everyone" class="statusOption" onclick="loadXMLDoc('indexEveryone')">Everyone, everywhere</div>
<div id="favorites" class="statusOption" onclick="loadXMLDoc('indexFav')">Favourites Only</div>
<script>
$(document).ready(function(){
$('#everyone').on('click', loadXMLDoc, 'indexEveryone');
$('#favorites').on('click', loadXMLDoc, 'indexFav');
$('div.statusOption').on('click', function(){
$('div.statusOption').removeClass('active');
$(this).addClass('active');
});
});
function loadXMLDoc(event)
{
$.ajax({
url: "../home/" + event.data + ".php",
type: "GET",
success: function(result){ $("#centreCont").html(result); }
});
</script>
I am using ajax - which works fine - to pass on the value. But when I add the HTTP code, there is no action. Using simple HTTP to show different div values based on http.readystatus. Is this the right format? If not, what is?
if (colorToCheck == gup("Player1")) {
document.getElementById('win').innerHTML = player1 + " wins";
redScore += 1;
//Browser Support Code
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp.readyState == 3 && xmlhttp.status == 200) {
document.getElementById("save").innerHTML = "saving";
} else if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//ajax call
var dataString = 'winner=' + player1 + '&player1=' + player1 + '&player2=' + player2 + '&matchNum=' + matchNum;
$.ajax({
type: "POST",
url: "red.php",
data:dataString,
cache: false,
success: function(response) {
$('.result13').html(response);
}
});
}
}
Any help would be highly appreciated! Thanks in advance.
The structure of a Vanilla JS AJAX call is:
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","path/to/file.php"); // or "POST" if needed
xmlhttp.onreadystatechange = function() {
if( this.readyState == 3) document.getElementById('save').innerHTML = "saving";
if( this.readyState == 4) {
if( this.status != 200) alert("ERROR: Server returned "+this.status+" "+this.statusText);
else {
// do something
alert(this.responseText);
}
}
};
xmlhttp.send(data); // data is whatever POST data you want. Leave out if using GET.
How does I get the response from the server in JavaScript? This is my sample code:
function get_Image(values) {
if (window.XMLHttpRequest) {
var http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
var http_request = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http_request.open("GET", "http://sample_address_for_server", true);
http_request.send();
}
alert(http_request.status);
if (http_request.readyState == 4) {
if (http_request.status == 200) {
xmlDoc = http_request.responseText;
alert(xmlDoc);
}
}
}
Try using this block .. the problem with your code is that you missed the quote while creating the open connetion
function get_Image(values){
var http_request = false;
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest()
} else {
if (window.ActiveXObject) {
try {
http_request = new ActiveXObject("MSXML2.XMLHTTP")
} catch () {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP")
} catch () {}
}
} else {
return false
}
}
http_request.onreadystatechange = function () {
alert(http_request.status);
if ( http_request.readyState == 4 ) {
if ( http_request.status == 200 ) {
xmlDoc = http_request.responseText;
alert(xmlDoc);
}}
};
http_request.open( "GET", "http://sample_address_for_server", true);
http_request.send(null);
}
you have to attach a function to the object's onreadystatechange event. The way you are doing, you are trying to get the response imediately after you sent the request, you don't have any response yet.
function get_Image(values) {
if (window.XMLHttpRequest) {
var http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
var http_request = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http_request.open("GET", "http://sample_address_for_server", true);
http_request.send();
}
alert(http_request.status);
http_request.onreadystatechange = function(){
if (http_request.readyState == 4) {
if (http_request.status == 200) {
xmlDoc = http_request.responseText;
alert(xmlDoc);
}
}
}
}