Im trying to setup a redirect for a chat script. If the chat goes unanswered after x amount of time the page will redirect.
I posted a question here yesterday regarding the same thing, but at the time knowing little in regards to JS I was trying to mix php with js. I have changed tactics.
Here is what I got thus far:
function opCheck()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
opCheck();
// alert('working2');
}
}
opjoined = "newchattimer.php";
xmlhttp.open("GET",opjoined,true);
xmlhttp.send(null);
}
function opResult()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
//alert('state = 4');
var op = xmlhttp.responseText;
}
}
ajaxurl = "ajaxfiles/opAnswer_12.txt";
xmlhttp.open("GET",ajaxurl,true);
xmlhttp.send(null);
}
setTimeout(function() {
opCheck();
opResult();
//alert(op);
if (op == 'n') window.location.replace("chatnoop.php");
}, 3000);
It creates the text file properly but ultimately no redirect. I used the chrome deveolpers tool and no errors. I also tried to alert(op); to see if the result is being grabbed, but I get no alert.
What is wrong with this code?
Thanks.
If you had taken the time to indent your code, you'd see that var op is declared inside the scope of the onreadystatechange function, which is both out of scope and asynchronous.
function opResult() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
var op = xmlhttp.responseText; //declared here
}
}
ajaxurl = "ajaxfiles/opAnswer_12.txt";
xmlhttp.open("GET", ajaxurl, true);
xmlhttp.send(null);
}
setTimeout(function () {
opCheck();
opResult();
// op is out of scope here
if (op == 'n') window.location.replace("chatnoop.php");
}, 3000);
Since timeouts aren't generally the way to handle async functions, and doing ajax request when all you intend to do when it finishes is to redirect anyway is'nt really neccessary, you could just do a regular form submit, which will redirect all by itself, or move the redirecting inside the right scope!
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if(xmlhttp.responseText == 'n') window.location.href = 'chatnoop.php';
}
}
You may find what you want here http://www.tizag.com/javascriptT/javascriptredirect.php but basically i don't think that window.location.replace("chatnoop.php"); is correct. You should consider using JQuery to manage all the Ajax stuff in addition, but it should work like you've done anyway
Related
This is my Ajax script... I want to combined the first and the second ...
1st
<script>
function Ajax()
{
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("myDiv").innerHTML=xmlhttp.responseText;
setTimeout('Ajax()',3000);
}
}
xmlhttp.open("GET","Home.php",true);
xmlhttp.send();
}
window.onload=function(){
setTimeout('Ajax()',3000);
}
</script>
2nd
<script>
function Ajax()
{
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("myDiv2").innerHTML=xmlhttp.responseText;
setTimeout('Ajax()',3000);
}
}
xmlhttp.open("GET","Home2.php",true);
xmlhttp.send();
}
window.onload=function(){
setTimeout('Ajax()',3000);
}
</script>
<body>
<div id="myDiv"></div>
<div id="myDiv2"></div>
</body>
Assuming you want to use jQuery (since you tagged your question with it), this would be your answer:
function jQueryGet1(){
$.get('Home.php', function(data){
$('#myDiv').html(data);
setTimeout(jQueryGet1, 3000);
});
}
function jQueryGet2(){
$.get('Home2.php', function(data){
$('#myDiv2').html(data);
setTimeout(jQueryGet2, 3000);
});
}
$(window).load(function(){
setTimeout(jQueryGet1, 3000);
setTimeout(jQueryGet2, 3000);
});
Note: Since your Ajax calls are to 2 different locations, you can not combine these two functions. Each must be implemented separately.
You need setInterval to refresh them every 3 seconds. function Ajax should be declared only once.
//Create a function to pass URL to call
//and a function which will execute on sucess
function Ajax(url, callback) {
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
callback(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
window.onload = function() {
setInterval(function() {
//Call first url and set response text of div 1
Ajax("Home.php", function(responseText) {
document.getElementById("myDiv").innerHTML = responseText;
})
//Call other url and set response text of div 2
Ajax("Home2.php", function(responseText) {
document.getElementById("myDiv2").innerHTML = responseText;
})
}, 3000);
}
As jquery is tagged, this can be used
$(function() {
setInterval(function() {
$('#myDiv').load('Home.php');
$('#myDiv2').load('Home2.php');
}, 3000);
});
I'm trying to add functionality to a small php/js I've built, but I can't make it work.
In general, i make two GETS of two different URL, and I need to use the reply of this URL in two different boxes.
I'v tried: seperate var port_name; and them just equals / to call $port_name or port_name.
Relevant part of code:
<script type="text/javascript">
function showPortName()
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var oob=document.getElementById("oob_name").value;
var port=document.getElementById("port").value;
var url="oob_get_port_name.php";
var url2="oob_get_location.php";
url=url+"?oob="+oob+"&port="+port;
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.send(null);
var port_name=xmlHttp.responseText.value;
url2=url2+"?oob="+oob+"&port="+port;
xmlHttp.open("GET",url2,true);
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("device_name").value=$port_name;
document.getElementById("device_location").value=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
</script>
I am trying to display two javascript function when page load. But seems one is overwriting another one.
here is javascript code:
function welcome(){
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("welcome").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","php/display_welcome.php", true);
xmlhttp.send();
}
function testimonial(){
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("testimonial").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","php/display_testimonial.php", true);
xmlhttp.send();
}
window.onload = function() {
welcome();
testimonial();
};
I have 2 div id in the html page.
Also I am using IE9, when I run only one function it works fine, when run two it doesnt return the data.
Hope someone could help me.
A lot could have gone wrong:
Non-responsive server
Bad copy-pasted code
Syntax errors
etc.
Anyways, to avoid repepetive code and possible errors even if both code looks the same, I suggest you do this. Since both basically use the same operation, let's factor it out into a single reusable function:
function load(url,callback) {
var xmlhttp;
if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest();
else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
callback(xmlhttp.responseText);
}
}
xmlhttp.open('GET', url);
xmlhttp.send();
}
window.onload = function () {
load('php/display_welcome.php',function(response){
document.getElementById("welcome").innerHTML = response;
});
load('php/display_testimonial.php',function(response){
document.getElementById("testimonial").innerHTML = response;
});
};
You declared xmlhttp without var which gives it global scope, that is why it gets over written when you call the second function. Declare it locally and that will not happen. Use var and declare it locally.
var xmlhttp;
I have these two buttons that a user can click to either approve/deny somebody on a site, and the code works perfect in IE, but when I try and use firefox, nothing at all happens when I click the buttons.
the javascipt/ajax code is:
function ApproveOrDenyStudent(i, action){
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var newStudentEmail = "newStudentEmail" + i;
var emailField = document.getElementById(newStudentEmail);
var email = emailField ? emailField.value : '';
// Approve/deny the user
if (action == 0){
xmlhttp.open("GET","ApproveStudent.php?email="+email,true);
}
else if (action == 1){
xmlhttp.open("GET","DenyStudent.php?email="+email,true);
}
xmlhttp.send();
window.location.reload();
}
any help would be great! Thanks!
You got a race condition!
xmlhttp.send();
window.location.reload();
You are making an asynchronous call. You are making the Ajax request and replacing the page right away! The call to the server is not getting out.
Reload the page when the request is complete.
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4){
window.location.reload(true);
}
};
xmlhttp.send();
I have a simple script im testing which calls a HTML file. In that html file is a div with the id "test2".
I am then trying to add content to its innerHTML but it acts like it don't exist, even though the div shows in the browser.
This is how I have approached the idea:
<script>
function call_file(file,div_id){
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(div_id).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",file,true);
xmlhttp.send();
}
window.onload = function() {
file = 'test.html';
div_id = 'test';
call_file(file,div_id);
document.getElementById('test2').innerHTML = 'Hi';
};
</script>
<div id="test" class="outer""></div>
Content of "test.html":
<div id="test2" class="inner"></div>
Why does it not find id "test2" with this error, even though i see the div with my own eyes:
Cannot set property 'innerHTML' of null
You're making an asynchronous call, so send() will return before the response is received and added into the DOM. Any code that depends on the received data should be in your onreadystatechange function, or somehow triggered by it, so that it won't execute until the response data has been received.
You Cannot set it because it doesn't exist, yet. You need to wait until it's loaded.
You can do that with a callback function.
function call_file(file,div_id, callback){
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(div_id).innerHTML=xmlhttp.responseText;
return callback();
}
}
xmlhttp.open("GET",file,true);
xmlhttp.send();
}
window.onload = function() {
file = 'test.html';
div_id = 'test';
call_file(file,div_id, function () {
document.getElementById('test2').innerHTML = 'Hi';
});
};