I have a website built across a series of pages and scripts, and I'm trying to link them together using Ajax. I was told the easiest way to send back to the server was using jQuery, so I'm trying that out but I can't seem to get it to work. My three files are as follows, with the methods in question being the lines containing \[code\]onclick()\[/code\] and the MySQL query in file 3.Here's the page itself:\[code\]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Penelope, Upgraded</title> <script type="text/javascript" src="http://stackoverflow.com/questions/3585745/jLaser.js"/> <script type="text/javascript" src="http://stackoverflow.com/questions/3585745/jquery.js"/> <?php require_once 'mysqlSheep.php'; require_once 'background.php'; $hour = date("G"); $hour = mysql_real_escape_string($hour); mysql_query("INSERT INTO time( hour ) VALUES (".$hour.") ON DUPLICATE KEY UPDATE hits = hits+1") or die ("MySQL Error: ".mysql_error()); ?></head><body id="<?php echo day() == 1 ? 'day' : 'night'; ?>"> <button type="button" onclick="laser(); $.post('sheepDB.php', { vic: victim, num: numVics });"> Activate Her Powers! </button> <div id="lasertext"></div> <p>Want to see how many things Queen Penelope <a href="http://www.queenofsheep.com/Sheep/victimlist.php">has decimated?</a></p></body></html>\[/code\]Here's the .js script containing my the series of functions called first by \[code\]onclick()\[/code\]:\[code\]/* * Initialize laserState to 0 * i.e. the laser is off. */var laserState = 0;var numVics;/* * Function: laser * Called from button on jSheep.php * * If the laser is on, i.e. laserState = 0, * it calls laserOn(). Otherwise, it calls laserOff(). * * @call laserOff() if laserState == 1 * @call laserOn() if laserState == 0 */function laser(){ laserState ? laserOff() : laserOn();}/* * Function: laserOff * Called from function laser() * * Turns off the laser. * Sets laserState to 0, * prints a message about the laser being off, * and switches the image to the sheep minus the laser. */function laserOff(){ laserState = 0; if ( document.getElementById("vartext") ) { var textdiv = document.getElementById("lasertext"); var para = document.getElementById("vartext"); textdiv.removeChild(para); } if ( document.getElementById("nightlaser") ) { var body = document.getElementById("nightlaser"); body.setAttribute('id', 'night'); } if ( document.getElementById("daylaser") ) { body = document.getElementById("daylaser"); body.setAttribute('id', 'day'); } textdiv = document.getElementById("lasertext"); para = document.createElement("p"); var text = document.createTextNode("Queen Penelope has deactivated her lasers."); para.setAttribute("id", "vartext"); para.appendChild(text); textdiv.appendChild(para);}/* * Function: laserOn * Called from function laser() * * Turns on the laser * Sets laserState to 1, * removes the text about the laser being off, * calls function selectVictim * and uses the returned value to call function zapVictim. * * @call selectVictim() * @call zapVictims() */function laserOn(){ laserState = 1; if ( document.getElementById("vartext") ) { var textdiv = document.getElementById("lasertext"); var para = document.getElementById("vartext"); textdiv.removeChild(para); } if ( document.getElementById("night") ) { var body = document.getElementById("night"); body.setAttribute('id', 'nightlaser'); } if ( document.getElementById("day") ) { body = document.getElementById("day"); body.setAttribute('id', 'daylaser'); } return selectVictim( function( victim ) {zapVictims(victim);} );}/* * Function: selectVictim * Called from function laserOn() * * Selects a random victim from a list of victims * * @return String: victim */function selectVictim(callback){ var vicString; var vicArray; var vicID; var params = "url=queenofsheep.com/Sheep/victims.php"; var request = new ajaxRequest(); request.open("POST", "victims.php", true); request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); request.setRequestHeader("Content-Length", params.length); request.setRequestHeader("Connection", "close"); request.send(params); request.onreadystatechange = function () { if (this.readyState == 4) { if (this.status == 200) { if (this.responseText != null ) { vicString = this.responseText; vicArray = JSON.parse(vicString); vicID = Math.floor(Math.random() * (vicArray.length - 1)); if(callback) { callback(vicArray[vicID]); } } else alert("Ajax error: No data received"); } else alert("Ajax Error: " + this.statusText); } }}/* * Function: zapVictims * Called from function laserOn() * * @Arg String: victim * * Given the identifier of a victim, * generates a pseudorandom number of victims * to be zapped with the laser. * Then, it passes this number and the victim string * to a PHP script that updates the database values. */function zapVictims( victim ){ numVics = Math.floor(Math.random() * 100) + 1; var textdiv = document.getElementById("lasertext"); var para = document.createElement("p"); var text = document.createTextNode("Queen Penelope has dissolved " + numVics + " " + victim + "!"); para.setAttribute("id", "vartext"); para.appendChild(text); textdiv.appendChild(para);}/* * Function: ajaxRequest * Called whenever external data is needed * * Tried to create a new XMLHttpRequest object * If it can't, attempts to correct for IE. * Finally, if it still can't, returns false. * Otherwise, it returns the created object. * * @return Boolean false * @return Object XMLHttpRequest * @return Object ActiveXObject */function ajaxRequest() { try { var request = new XMLHttpRequest(); } catch(e1) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e2) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e3) { return false; } } } return request; }\[/code\]And finally, the script that should be receiving the POST data:\[code\]<?phprequire_once 'mysqlSheep.php';$numVics = mysql_real_escape_string($_POST["numVics"]);$vic = mysql_real_escape_string($_POST["vic"]);mysql_query(" UPDATE victims SET amount=amount+".$numVIcs." WHERE victim='".$vic."'" );\[/code\]?>Where am I going wrong? Are the variables from the Javascript file (which is included in the page) not available to \[code\]onclick\[/code\]? Everything works as it should except for the MySQL \[code\]update\[/code\] in the third file.
Correct Usage of $.post in jQuery
- Thread starter yhicerkac
- Start date