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.
Related
I am ganging my head against the wall for 3 hours now. I have this code:
function showpctask() {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("pcactivitytask").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","showpctask.php"+,true);
xmlhttp.send();
}
that opens up a php file inside a div (id = pcactivitytask). That php file builds a 'select'
I also have this function right here:
function setpctaskwidth() {
var maxtaskwidth = 0;
$("div .pcactivitytask").each(function(){
c_width = parseInt($(this).width());
if (c_width > maxtaskwidth) {
maxtaskwidth = c_width;
}
});
alert (maxtaskwidth);
}
that will show me the max width of all elements with the the class of "pcactivitytask". Yes, the select created by the previous script has that class. If I call both these function it will NOT include the width of the NEWLY created select..... I need to run it AGAIN 'manuall'. I need my script to "onclick" BOTH build the NEW select AND include it in finding the max width by the second script. Thank you.
XMLhttprequest works asynchronously, meaning it does not happen in order.
that is why you have the xmlhttp.onreadystatechange callback function, that only runs once the request is finished
you do not specify how you call these two functions but I would expect to see the call to setpctaskwidth() inside the onreadystatechange function like this:
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("pcactivitytask").innerHTML = xmlhttp.responseText;
setpctaskwidth();
}
};
be advised that if the response includes images or other external resources (fonts etc) that don't already exist in the page you might get a different size than the actual final size (it will measure the size before the image is loaded)
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 a bunch of divs with weird id and each of them contains a video. They're actually video embed codes but they're not usual to me. Here's one example:
<div id="evp-1fae4e37639894816f03591bc7009c68-wrap" class="evp-video-wrap"></div><script type="text/javascript" src="http://domain.com/evp/framework.php?div_id=evp-1fae4e37639894816f03591bc7009c68&id=cmVsYXRpb25zaGlwLW1hcmtldGluZy0xLmZsdg%3D%3D&v=1278525356"></script><script type="text/javascript">_evpInit('cmVsYXRpb25zaGlwLW1hcmtldGluZy0xLmZsdg==');</script>
What I want to do is create a video playlist. As a part of that, I created list using divs also which use the onclick attribute to trigger my JS function to switch between videos. Here's how it looks:
<div class="vid-list" onclick="switchvideo('http://domain.com/html-vids/headline-vids/second-vid.html', 2)"><p>This a video tutorial for blah blah blah.</p></div>
The problem is, each time I switch to another video the div id of the embed code changes also because otherwise it won't work. So I need to change that before loading the video script inside the div. I tried to achieve that using the following JS function:
function switchvideo(url, vidnumber)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET",url,false);
xmlhttp.send();
}
var div_node = document.getElementByClass('evp-video-wrap');
if ( vidnumber == 2 ) {
div_node.id = 'evp-78c0b7c4f6d3377954825f145734fd5c-wrap';
}
document.getElementById(div_node.id).innerHTML=xmlhttp.responseText;
}
Apparently it's not working. I suspect the problem are the lines in bold above. I tried to get the element by 'class' and its id by using 'div_node.id'. I am assuming that by doing 'document.getElementByClass', I am getting the reference to that element so I could use it to manipulate its other attributes. But I am not sure... Could anyone pls enlighten me??
There is no getElementByClass() method. There is a getElementByClassName() but it's not available in every browser.
Here is one you can use:
// http://www.dustindiaz.com/getelementsbyclass/
function getElementsByClass(searchClass, node, tag) {
var classElements = new Array();
if (node == null) node = document;
if (tag == null) tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if (pattern.test(els[i].className)) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
Then you can call it as
getElementByClass('evp-video-wrap');
Your ajax is a bit tricky, but here is a more general one:
function getXmlHttpObject() {
var xmlHttp;
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");
}
}
if (!xmlHttp) {
alert("Your browser does not support AJAX!");
}
return xmlHttp;
}
function ajax(url, onSuccess, onError) {
var xmlHttp = getXmlHttpObject();
xmlHttp.onreadystatechange = function() {
if (this.readyState === 4) {
// onSuccess
if (this.status === 200 && typeof onSuccess == 'function') {
onSuccess(this.responseText);
}
// onError
else if(typeof onError == 'function') {
onError();
}
}
};
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
return xmlHttp;
}
Finally your code becomes:
function switchvideo(url, vidnumber) {
var div_node = getElementByClass('evp-video-wrap')[0];
// make a call to the url, and execute the
// callback when the response is available
ajax(url, function( responseText ){
if (vidnumber == 2) {
div_node.id = 'evp-78c0b7c4f6d3377954825f145734fd5c-wrap';
}
document.getElementById(div_node.id).innerHTML = responseText;
});
}
You can see the whole code [here]
getElementByClass isn't a standard method. Is it possible for you to use a framework for this? jQuery has a nice mechanism to search for an element by class, as do the other frameworks. It also makes it much easier to do the AJAX bits in a cross-browser supported way.
function switchvideo(url, vidnumber)
{
$.get(url, function(data) {
var div_node = $('.evp-video-wrap');
if (vidnumber == 2) {
div_node.attr('id', 'evp-78c0b7c4f6d3377954825f145734fd5c-wrap');
}
div_node.html( data );
});
}
An alternative would be to write your own getElementByClass or specific code to search for a DIV by class. Note: I assume you're only interested in the first match.
function getDivByClass( klass )
{
var regex = new RegExp( '(^|\\s+)' + klass + '(\\s+|$)' );
for (div in document.getElementsByTagName('div')) {
if (regex.text( div.className)) {
return div;
}
}
return null;
}
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
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