Develop Reference

why my code doesn't work in chrome or FF

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.

Calling Ajax multiple times in blackjack

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.

Ajax not working in firefox without alert

function processAjaxStateChangeForRowAdd() {
alert(0);
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
processForRowAdd(req.responseText);
} else {
alert("Problem: " + req.statusText);
}
}
}
This code is working fine for IE, Safari and Firefox, but if I remove the alert, then the code will not work in Firefox, though it still works in IE and Safari.
Can anybody give me suggestion why it not working in Firefox without alert?
EDIT: Code that adds a row:
if (window.XMLHttpRequest && browserVersion.indexOf("Microsoft") == -1 ) {
// code for Firefox, Chrome, Opera, Safari
req = new XMLHttpRequest("");
if (req) {
ajaxProcessed = false;
req.onreadystatechange = processAjaxStateChangeForRowAdd;
req.open("POST", url, true);
req.send();
// alert("1");
}
}

The alert is blocking. What this means is that your script is temporarily suspended (even if it's for a few milliseconds). During this time, your AJAX request completes and your req object is being set. You can add a delay (using setTimeout) to your callback to verify this.
I would suggest you post more of your script so that we can help you set up your callback properly. Alternatively, use a library such as jQuery to set up AJAX calls in a cross-browser manner easily.
EDIT: You need to either declare req as a global variable, or use an anonymous function. The following code demonstrates the first method (using a global variable):
var req;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
if (req) {
req.onreadystatechange = processAjaxStateChangeForRowAdd;
req.open("POST", url, true);
req.send();
}
}
function processAjaxStateChangeForRowAdd() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
processForRowAdd(req.responseText);
} else {
alert("Problem: " + req.statusText);
}
}
}

function getHttp()
{
var xmlhttp;
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
if(typeof XMLHttpRequest != 'undefiend')
{
xmlhttp = new XMLHttpRequest();
}
}
}
return xmlhttp;
}

can you try this:
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;
} else
alert("status: " + request.status);
}

You should also check for the readyState , the following code might help
req.onreadystatechange=function()
{
if (req.readyState==4 && req.status==200)
{
processForRowAdd(req.responseText)
}
}
Read this for the different values of readyState

how can i do jquery's $.get in pure javascript? (without wanting to return anything)

I want the mobile version of my site to be as snappy as possible, however i still want some basic analytics.
I want to ping a php file (hit counter) after the mobile page has loaded to count the amount of hits from javascript enabled browsers.
Jquery's a bit overkill for 1 ajax function so i'm keen to learn how to do the following in pure javascript:
<script type="text/javascript">
Window.onload(function(){
$.get('mvc/assets/ajax/analytics/event_increment.php?id='+id');
})
</script>

Create a utility function that will return to you a browser-specific Ajax object:
function ajax(url, method, callback, params = null) {
var obj;
try {
obj = new XMLHttpRequest();
} catch(e){
try {
obj = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
obj = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
alert("Your browser does not support Ajax.");
return false;
}
}
}
obj.onreadystatechange = function() {
if(obj.readyState == 4) {
callback(obj);
}
}
obj.open(method, url, true);
obj.send(params);
return obj;
}
You could then call that function like this:
var ajax = ajax('someurl', 'get', function(obj) { alert(obj.responseText); })

Just specify your file as the src attribute for the script tag.

Something simplistic:
<div id="hidden"></div>
<script type="text/javascript">
window.onload = function(){
var div = document.getElementById("hidden");
div.innerHTML = "<img src='tracking.php' />";
};
</script>

#Mike is suggesting a great method. If you would like to get into AJAX, though, it's not that difficult.
Code c/o bobince
var xhr= new XMLHttpRequest();
xhr.open('GET', 'x.html', true);
xhr.onreadystatechange= function() {
if (this.readyState!==4) return;
if (this.status!==200) return; // or whatever error handling you want
document.getElementById('y').innerHTML= this.responseText;
};
xhr.send();
// FOR <IE8 Compatibility do this first:
if (!window.XMLHttpRequest && 'ActiveXObject' in window) {
window.XMLHttpRequest= function() {
return new ActiveXObject('MSXML2.XMLHttp');
};
}
replace x.html with your php file

While it is possible to create an image tag with that url as the src if you want to do it via AJAX as jQuery does there you could do this:
<script type="text/javascript">
function report(){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",'mvc/assets/ajax/analytics/event_increment.php?id='+id',true);
}
window.onload = report;
</script>

You can use an img tag and put that in the src, and have your script return a transparent image.
Or as someone else pointed out, have it be the src of a script tag.
EDIT
If you don't want it to load if a bot accesses the page, you could use an img tag still
<img src="transparent.gif" width="1" height="1" />
Then, use javascript to change the src of the image to your php script. Most bots won't execute the javascript and therefor will never access your php script.
You may want to obfuscate the javascript a little though, so they don't see a url in it and try and access it.

<script type="text/javascript">
Window.onload(function(){
var id = "", xmlhttp = null;
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) {
xmlhttp.open("GET","mvc/assets/ajax/analytics/event_increment.php?id=" + id,true);
xmlhttp.send();
}
})
</script>

there existed image preloaders in the early days of webpages, when internet connections were still slow, which created image objects to be used for rollover effects. this should still work and load the image:
<script type="text/javascript">
var img = new Image('http://url.to/your/image/or/script');
</script>

As 2019 you can use ES6 fetch a modern replacement for XMLHttpRequest.
const options = {
method: "POST",
data: {
title: "foo",
body: "bar",
userId: 1
},
credentials: "include",
headers: {}
};
fetch("https://jsonplaceholder.typicode.com/posts", options)
.then(response => {
return response.json();
})
.then(jsonObject => {
console.log(jsonObject);
document.write(`ID ${jsonObject.id} was created!`);
})
.catch(error => {
document.write(error);
});

second external javascript file not loaded

I have these lines in my html head section
<script type="text/javascript" src="../behaviour/location.js"></script>
<script type="text/javascript" src="../behaviour/ajax.js"></script>
When I use either in isolation, the code in the external files executes as expected.
However, when I use both, I find that neither works correctly. What do I need to do to fix this?
location.js
// JavaScript Document
function addLoadEvent (func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function () {
oldonload();
func;
}
}
}
//county changer
function countyUpdate (message) {
var name = message.getAttribute("name");
var check = message.checked;
var countyId = message.getAttribute("id");
var countyId = countyId.split("_")[1];
var innerpost = document.getElementById("innerpost_"+countyId);
var checks = innerpost.getElementsByTagName("input");
for (var i = 0; i< checks.length; i++) {
if (checks[i].checked == true && check == true) {
checks[i].checked = false;
}
}
}
//postcode changer
function postcodeUpdate (message) {
var parent = message.parentNode.parentNode.getAttribute("id").split("_")[1];
var county = "county_"+parent;
var checkbox = document.getElementById(county);
var checked = message.checked;
if (checked == true) {
checkbox.checked = false;
}
}
//get a dynamic list of al postcode checkboxes
function getCounties () {
var county = document.getElementsByTagName("input");
for (var i = 0; i< county.length; i++) {
var check = county[i].getAttribute("type");
if (check == "checkbox") {
var name = county[i].getAttribute("name");
var parent = county[i].parentNode.parentNode.getAttribute("id");
var parent = parent.split("_")[0];
//action for county
if (parent != "innerpost") {
county[i].onclick = function() { countyUpdate(this); };
}//if
//action for postcode
if (parent == "innerpost") {
county[i].onclick = function() { postcodeUpdate (this); };
}//if
}//if
}//for
}//function
addLoadEvent (getCounties);
ajax.js
function loadXMLDoc()
{
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;
}
}
xmlhttp.open("GET","cart.php",true);
xmlhttp.send();
}
And this is the inline code to activate the second file:
<button type="button" onclick="loadXMLDoc()">Change Content</button>
When I try using both files together, I don't seem to be able to use any functions (not even simple alerts wrapped in a function).

This would happen if the scripts conflict with each other.
Please show us the scripts and the error messages.

When I use either in isolation, the
code in the external files executes as
expected.
However, when I use both, I find that
neither works correctly. What do I
need to do to fix this?
It sounds like you have a conflict somewhere in the two files. Like a function that is named the same or a variable etc.
Having not seen the files you could:
1. Track down the naming conflict (if that is what it is) and change one.
2. Encapsulate the code in the files in different objects and access the methods/properties etc. through there.

My bet is that you're getting a mess out of that window.onload= juggling. I suggest you use the standard window.addEventListener() interface (check for its existance and use window.attachEvent() when the standard interface is missing if you want to support IE too). This should also guarantee that the onload functions get executed in the same order as the scripts that set them. Something like:
if (window.addEventListener) {
window.addEventListener('load', somefunc, false);
} else if (window.attachEvent) {
window.attachEvent('onload', somefunc);
} // else, no way to add multiple onload handlers