I have and an AJAX script in a page that works just fine with no bugs in firefoex, but IE6 loads the page with an ugly error icon on the status bar. What is the best way i can go about fixing/debugging this?
Here is the error report:
I have checked line 323 many times Here is the function:
function checkAvailability(){
var card_select = document.getElementById('card_select').value;
var price_select = document.getElementById('price_select').value;
var num_of_cards = document.getElementById('num_of_cards').value;
var url = 'checkAvailability.php?cardName=' + card_select + '&value=' + price_select + '&amount=' + num_of_cards;
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 && xmlhttp.responseText) /**** line 323 ****/
{
document.getElementById('submit_button').className = 'hidden';
document.getElementById('div_error_massage').className = 'anounce_div';
document.getElementById('error_massage').innerHTML = xmlhttp.responseText;
document.getElementById('num_of_cards').className = 'red_inputs';
}
else if(isNaN(num_of_cards))
{
document.getElementById('submit_button').className = 'hidden';
document.getElementById('num_of_cards').className = 'red_inputs';
document.getElementById('div_error_massage').className = 'hidden';
}
else if(num_of_cards != "" && !xmlhttp.responseText)
{
document.getElementById('submit_button').className = '';
document.getElementById('error_massage').innerHTML = 'Total: $' + document.getElementById('price_select').value * document.getElementById('num_of_cards').value + '.00';
document.getElementById('div_error_massage').className = 'anounce_div';
}
else
{
document.getElementById('submit_button').className = 'hidden';
document.getElementById('num_of_cards').className = 'red_inputs';
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
In IE, you can try the old script debugger or Visual Web Developer Express. When the error throws, enter the debugger and examine xmlhttp.
In addition to outis' answer, if you want to control where you jump in with the debugger, use Javascript's debugger keyword, which acts like a breakpoint. When the line with debugger; is hit, in IE you will get a prompt (if debugging is enabled in IE, check your Internet Options) to launch the debugger, starting at that line. In Firefox, the debugger; statement is picked up by Firebug as a breakpoint.
You are trying to read !xmlhttp.responseText when the readyState is not 4
Try removing that line and see if IE runs.
A great Javascript debugger for IE comes with MS Office.
A quick google shows this as a howto: http://www.jonathanboutelle.com/mt/archives/2006/01/howto_debug_jav.html
Related
This is my first php project. I have imlemented partial ajax postback by refering to this article: PHP AJAX SQL reference article
Now, I am trying to show a loading gif when the partial loading starts and hide it when the partial loading completes. Here is the code that I am using in Javascript:
function showUser1(str)
{
if (str == "")
{
document.getElementById("mems").innerHTML = "I caanot fetch: " + str;
return;
}
else
{
document.getElementById("loadgif").style.visibility= "visible";
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("outerpicwrapper").innerHTML = "";
document.getElementById("mems").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","getmembers.php?q2="+str,true);
xmlhttp.send();
document.getElementById("loadgif").style.visibility= "hidden";
}
}
In the first line of body, I have written:
<img id="loadgif" src="img/loading.gif" class="loadinggif" />
In the CSS file, i have written:
.loadinggif
{
position: absolute;
z-index: 200;
visibility: hidden;
}
The code is working fine and shows the data but, loading gif is not shown.
I have even tried display:none and display:block in place of visibility.
Kindly help.
The problem is AJAX is asynchronous. Thus your code doesn't wait for the data to be fetched and
document.getElementById("loadgif").style.visibility= "visible";
document.getElementById("loadgif").style.visibility= "hidden";
These lines are executed simultaneously.
To prevent this from happening you can put
document.getElementById("loadgif").style.visibility= "hidden";
inside the callback as well
function showUser1(str)
{
if (str == "")
{
document.getElementById("mems").innerHTML = "I caanot fetch: " + str;
return;
}
else
{
document.getElementById("loadgif").style.visibility= "visible"; // This line displays the loading gif
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("outerpicwrapper").innerHTML = "";
document.getElementById("mems").innerHTML = xmlhttp.responseText;
document.getElementById("loadgif").style.visibility= "hidden"; // This line hides the loading gif
}
};
xmlhttp.open("GET","getmembers.php?q2="+str,true);
xmlhttp.send();
}
}
Finally, I made my issue work out using JQuery.
I just made display:none in CSS and called the show() function of jquery on the loading gif div. This show function was written inside the javascript code.
I have some bit of code from the internet that updates my webpage when I type in a text input.
My code is below
function validate(field, query) {
var xmlhttp;
if (window.XMLHttpRequest) { // for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState != 4 && xmlhttp.status == 200) {
document.getElementById(field).innerHTML = "Validating..";
} else if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(field).innerHTML = xmlhttp.responseText;
} else {
document.getElementById(field).innerHTML = "Error Occurred. <a href='index.php'>Reload Or Try Again</a> the page.";
}
}
xmlhttp.open("GET", "validation.php?field=" + field + "&query=" + query, false);
xmlhttp.send();
}
After debugging I found out that the code is run twice (afaik). The first time xmlhttp.readyState is 1, meaning that the request is being set up. The second time it's 4 meaning it's complete. So this is working like intended.
The problem is that it always returns the Error Occurred bit in the field. The reason why is that xmlhttp.status keeps the status number 404, meaning that it is not found. I have no clue why it returns 404. If the browser I'm using is important, I'm using the latest version of Safari. I also checked the latest version of Chrome and got the same problem.
Make sure that your code is actually requesting the correct URL. You can do this with most modern browser's developer tools, including the Network tab of Chrome's.
these 2 functions seems to be working only on IE. this is the code:
function onGridMembers(id,xml) {
if (xml != "<Members/>" && ToHelpOrNotToHelp) {
var domDoc = new ActiveXObject("Microsoft.XMLDOM");
domDoc.loadXML(xml);
var helpHtml2 = "";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "Dictionary.xml", true);
xmlDictionary = xmlhttp.responseXML;
xmlhttp.send();
helpHtml2 += xmlDictionary.selectSingleNode("Terms/Term[Key='" + domDoc.selectSingleNode("Members/Member/#UName").text + "']/Desc").text;
alert(helpHtml2);
}
}
function onCommandClicked(nectoId, commandId, commnadCaption, xml) {
if (commandId == "ID223") { // this one doesn't work in chrome
window.open('file://server/Guide.docx');
} else if (commandId == "ID225") { // This one works in chrome
window.open('http://server/Reports/Pages/Folder.aspx');
} else if (commandId == "ID227") { // this one doesn't work in chrome
getComponentById("vvv","ww").setMenuItemState("ID227", "Hidden");
getComponentById("vvv","ww").setMenuItemState("ID226", "Enable");
ToHelpOrNotToHelp = false;
} else if (commandId == "ID226") { // this one doesn't work in chrome
getComponentById("vvv","ww").setMenuItemState("ID226", "Hidden");
getComponentById("vvv","ww").setMenuItemState("ID227", "Enable");
ToHelpOrNotToHelp = true;
}
}
Can you please help?
I'm not sure about the second code, but the first cannot work in other browsers than IE because you're using ActiveX, which is MS-Only.
The Firefox Error-Console usually gives useful information on why JS is not working.
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 am creating a blackjack game using html, js, ajax and php. When the Player first loads the game, a prompt appears on the page asking for the name, and this goes to a name.php which checks to see if the user name is in the database. If not, it adds it. In either case, it will place the player's name and bank total on the screen. This part of my code was working fine until I added the next part of the code.
When the user clicks on the "hit" button, hit.php is called, which for now should just be pulling 1 card from the deck table (will fully implement hit later on) and placing it within the "player" div on the screen. However, now that I have 2 ajax calls, nothing whatsoever is happening, including the original prompt for the player name.
Is the 2nd call somehow interfering with the 1st call?
Any suggestions as to how I should treat the ajax calls would be greatly appreciated.
var username;
var playerName = "";
var playerBank = 0;
var playerCard;
var playerHandValue = 0;
var dealerHandValue = 0;
var randomCardNumber;
function checkName() {
username = prompt("Welcome to Blackjack.\n Please enter your username");
if(document.getElementById('playerName').value == null) {
ajaxName();
}
click();
}
function printName() {
return playerName;
}
function printBank() {
return playerBank;
}
function ajaxName() {
var uName = username;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttpN=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttpN=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttpN.onreadystatechange=function() {
if (xmlhttpN.readyState==4 && xmlhttpN.status==200) {
var elements = xmlhttpN.responseText.split("|");
playerName = elements[0];
playerBank = elements[1];
document.getElementById('playerName').innerHTML = printName();
alert(playerName);
document.getElementById('playerBank').innerHTML = printBank();
}
}
xmlhttpN.open("POST","name.php",true);
xmlhttpN.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttpN.send("player="+username);
}
function click() {
document.getElementById('hit').onclick = function(){ ajaxButton(this);};
document.getElementById('stand').onclick = function(){ ajaxButton(this);};
document.getElementById('raiseBet').onclick = function(){ ajaxButton(this);};
document.getElementById('newGame').onclick = function(){ ajaxButton(this);};
}
function ajaxButton(buttonClicked) {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttpB=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttpB=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttpB.readyState==4 && xmlhttpB.status==200) {
var elements = xmlhttpB.responseText;
if(buttonClicked.innerHTML == "HIT") {
randomCardNumber = randNumber(1,52);
playerCard = elements[0];
document.getElementById('player').innerHTML = displayCard();
xmlhttpB.open("POST","hit.php",true);
xmlhttpB.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttpB.send("card_id="+randomCardNumber);
}
}
if(buttonClicked.innerHTML == "STAND") {
alert("stand");
}
if(buttonClicked.innerHTML == "RAISE BET") {
alert("raise bet");
}
if(buttonClicked.innerHTML == "NEW GAME") {
alert("new game");
}
}
No JavaScript errors reported in your browser, and the prompt isn't coming up at all, and nothing happens when you click hit? It sounds as though perhaps you aren't calling the checkName() or click() functions at all. Have you refactored those into methods recently when they weren't previously?
It seems to me that checkName should occur as soon as the page loads, so if it doesn't already, try putting a call to it in a script block at the bottom of the page.