JavaScript - Xmlhttprequest To Php - Debugging
This question hovers between PHP and JavaScript, but I think it fits here a little better.
I've got a web app that does a lot of asynchronous calls to various PHP pages. I'm familiar with using an iFrame or div to hold a controller, then making forms post to that controller so you can see the output. However, I'm not doing a lot of submitting forms. Typically, I utilize the onclick event of various elements to initiate an XmlHttpRequest that jumps over to a PHP page and back. I'm looking for a way to easily debug my PHP code. Right now I'm using Firebug (on Firefox) to look at the HTTP requests. I can see the post data and response and all that, which is good. However, it requires a good amount of clicking and time to get to that data. Is there an easier way to do this? Ideally I'd love to include some sort of debug window that displays all of the PHP controller errors and things that I echo out. Similar TutorialsI'm used to PHP, where I can use var_dump to find out about a variable wherever I call it. Or, having the script crash entirely and give me an idea of what mistake I made, when I made a mistake. With JS, neither of those appear to be true. I was told I can use console.log or console.dir to get something similar to var_dump, but as you can see: it's giving me no output. I need a way to help me find the mistakes I make. How can I get console.dir to work? See the image below: Large image: http://i.imgur.com/4cw89OO.png I've been messing with this for hours and I can't seem to find where I've gone wrong with it, I think I need a fresh pair of eyes to give it a look over. Anyways here's my entire piece of code. I know it's a lot to look at but if anyone can help me get this working that would be great, it's starting to give me a headache just to look at it. Anyways from what I can tell the problem is somewhere in the wDesQuote() function but I can't seem to pin it down. Code: //Start Ajax Code var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } function getData(dataSource, divID){ if(XMLHttpRequestObject){ var obj = document.getElementById(divID); XMLHttpRequestObject.open("GET", dataSource); XMLHttpRequestObject.onreadystatechange = function(){ if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200){ obj.innerHTML = XMLHttpRequestObject.responseText; } } XMLHttpRequestObject.send(null); } } //End Ajax Code //Start Div Updater function textUpdate(text, divID){ if(XMLHttpRequestObject){ var obj = document.getElementById(divID); obj.innerHTML = text; XMLHttpRequestObject.send(null); } } //End Div Updater //Money Formater function roundNumber(num, dec) { var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec); return result; } //End Money Formater function wDesQuote() { var eBizCard = document.getElementById('eBizCard').checked; var basic = document.getElementById('basic').checked; var mobile = document.getElementById('mobile').checked; var pages = document.getElementById('pages').value * 20; var host = document.getElementById('hostY').checked; var cTemp = document.getElementById('cTemp').checked; var anime = document.getElementById('anime').checked; var addMobile = document.getElementById('addMobile').checked; var eComP = document.getElementById('eComP').checked; var eComI = document.getElementById('eComI').value; var eComQ = 0; var forum = document.getElementById('forum').checked; var blog = document.getElementById('blog').checked; var wUpd = document.getElementById('wUpd').checked; var bUpd = document.getElementById('bUpd').checked; var mUpd = document.getElementById('mUpd').checked; var nUpd = document.getElementById('nUpd').checked; var logo = document.getElementById('logo').checked; var bCard = document.getElementById('bCard').checked; var pCard = document.getElementById('pCard').checked; var brochure = document.getElementById('brochure').checked; var mTotal = 0; var uTotal = 0; if(eBizCard == true && host == true){ uTotal = 149.95; mTotal = 9.95; }else if(eBizCard == true && host == false){ uTotal = 149.95; mTotal = 0; }else if(mobile == true && host == true){ uTotal = 299.95; mTotal = 9.95; }else if(mobile == true && host == false){ uTotal = 299.95; mTotal = 0; }else{ eBizCard = 0; mobile = 0; basic = 499.95; if(host == true){ host = 9.95; } else{ host = 0; } if(cTemp == true){ cTemp = 100; }else{ cTemp = 0; } if(anime == true){ anime = 150; }else{ anime = 0; } if(addMobile == true){ addMobile = 275; }else{ addMobile = 0; } if(eComP == true){ eComP = 200; eComQ = roundNumber(eComI * 0.59,2).toFixed(2); if(eComQ == "NaN"){ alert("Please enter numbers only into the item quantity box"); break; } }else{ eComP = 0; eComI = 0; } if(forum == true){ forum = 50; }else{ forum = 0; } if(blog == true){ blog = 50; }else{ blog = 0; } if(wUpd == true){ wUpd = 175; }else{ wUpd = 0; } if(bUpd == true){ bUpd = 100; }else{ bUpd = 0; } if(mUpd == true){ mUpd = 60; }else{ mUpd = 0; } if(nUpd == true){ nUpd = 0; }else{ nUpd = 0; } if(logo == true){ logo = 75; }else{ logo = 0; } if(bCard == true){ bCard = 90; }else{ bCard = 0; } if(pCard == true){ pCard = 140; }else{ pCard = 0; } if(brochure == true){ brochure = 280; }else{ brochure = 0; } } var uTotal = pages + cTemp + anime + addMobile + eComP + eCompQ + forum + blog + wUpd + bUpd + mUpd + nUpd + logo + bCard + pCard + brochure; var mTotal = host + mUpd + bUpd + wUpd + nUpd; if(mTotal == 0){ document.getElementById('totalDisplay').innerHTML = "Your total is $" + uTotal; }else{ document.getElementById('totalDisplay').innerHTML = "Your total is $" + uTotal + " a monthly fee of $" + mTotal; } } I've been working on that for days, and can't find the problem. Could one of you help? I wrote a low-level digit-shift cipher, but the script doesn't work. Code: <head> <script type="text/javascript"> function ciphertext() { var t = document.getElementById.('t') t = t.toUpperCase() var n = 0 var o = "" if(n=0) { o=o+t n=n+1 } if(n=1) { if(t=="A") o=o+"B" if(t=="B") o=o+"C" if(t=="C") o=o+"D" if(t=="D") o=o+"E" if(t=="F") o=o+"G" if(t=="G") o=o+"H" if(t=="H") o=o+"I" if(t=="I") o=o+"J" if(t=="J") o=o+"K" if(t=="K") o=o+"L" if(t=="L") o=o+"M" if(t=="M") o=o+"N" if(t=="N") o=o+"O" if(t=="O") o=o+"P" if(t=="P") o=o+"Q" if(t=="Q") o=o+"R" if(t=="R") o=o+"S" if(t=="S") o=o+"T" if(t=="T") o=o+"U" if(t=="U") o=o+"V" if(t=="V") o=o+"W" if(t=="W") o=o+"X" if(t=="X") o=o+"Y" if(t=="Y") o=o+"Z" if(t=="Z") o=o+"A" else o=o+t n=n-1 } document.getElementById('op').innerHTML = o.value } </script> </head> <body> <b id="op">This is your result</b> <input type="text" id='t' /> <button onclick="ciphertext()">Submit</button> </body> I've been working on that for days, and can't find the problem. Could one of you help? (Pardon me if I am being blunt, but why doesn't this work?) I tried posting this same thread under AJAX and I didn't get a single response. I am wondering if it may be in the wrong section so I decided to try here. If this is bad posting etiquette, I apologize. Hello. I am trying to use a form to submit values to MySQL and then have a Google map returned that has certain parameters. I have modeled this code after an example I found on w3schools. I believe that this is strictly a javascript coding problem. This is the code that I am using: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@ Page Language="C#" %> <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #filter { height: 5%; width: 73%; margin-top: 5px; margin-left: 2%; border: 3px solid black; padding: 1%; overflow: auto } #txtHint { height: 20%; width: 73%; margin-top: 5px; margin-left: 2%; border: 3px solid black; padding: 1%; overflow: auto } #maplist { height: 60%; width: 75%; margin-top: 5px; margin-left: 2%; border: 3px solid black } </style> <script type="text/javascript"> function showTrail(str) { if (str=="") { document.getElementById("maplist").innerHTML=""; return; } 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) { alert(xmlhttp.responseText); } } xmlhttp.open("GET","traillist2.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <div id="filter"> <form name="filterform"> <select id="scenery" onchange=""> <option value="">Select Scenery Rating:</option> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> <option value="d">D</option> <option value="f">F</option> </select> <select id="length" onchange=""> <option value="">Select Trail Length</option> <option value="g">Less than 1</option> <option value="h">1-2.9</option> <option value="i">3-4.9</option> <option value="j">5-6.9</option> <option value="k">7-8.9</option> <option value="l">More than 9</option> </select> <select id="difficulty" onchange=""> <option value="">Select Trail Difficulty</option> <option value="m">Easy</option> <option value="n">Moderate</option> <option value="o">Strenuous</option> </select> <input id="combined" type="button" value=" Find Trail! "onclick="showTrail(this.form['scenery'].value + this.form['length'].value + this.form['difficulty'].value)"/> </form> </div> <div id="maplist"></div> </body> </html> The code is designed to drop the map into the "maplist" div. In the code above, you see that I have the line "alert(xmlhttp.responseText);" which was originally: document.getElementById("txtHint").innerHTML=xmlhttp.responseText;" I wrote the php page so it would return code as shown below. This is the actual responseText received from the alert. Code: script type="text/javascript"> var map; function initialize() { var latlng = new google.maps.LatLng(34.65, -83.9); var options = { zoom: 9, center: latlng, mapTypeId: google.maps.MapTypeId.TERRAIN }; var infoWindow = new google.maps.InfoWindow; var html; var map = new google.maps.Map(document.getElementById('map_canvas'), options); var point = new google.maps.LatLng( parseFloat(34.558350), parseFloat(-84.250122)); var marker = new google.maps.Marker({ position : point, map : map, icon : 'http://labs.google.com/ridefinder/images/mm_20_red.png' }); var html = '<div><br><b>Amicalola Falls State Park - Creek Trail</ b><br><br><b>Trail Length: </b>0.5 miles<br><b>Scenery Rating: </b>C<br><b>Difficulty Rating: </ b>Easy<br><b>Trail Features: </b>Stream<br><br><font size:large><font face="Tahoma, Geneva, sans-serif" size="1" color="#000071"><strong><a href="http://www.digitaltrailguide.com/ amicalolafallsstateparkcreekmountainlaurelspringtrails.aspx">View This Trail</a></strong></font></div>'; bindInfoWindow(marker, map, infoWindow, html); function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } } function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://maps.google.com/maps/api/js? sensor=false&callback=initialize"; document.body.appendChild(script); } window.onload = loadScript; </script>I thought that this code would be dropped into the div and Hi there, Im looking for a general function which would work for most browsers when using the xmlhttprequest() I am just trying to send input data to the server store it and send back a response. I have one that works for both ie and ff, however when using ff the function does not return the text from the request to the server, but does with ie no problems. Any help would be much appreciated. Thanks Code: /* get response http request */ function getData(cURL) { var xmlHttp = null; xmlHttp = new XMLHttpRequest(); /* branch logic for ff or ie */ if (navigator.appName=='Netscape') lSynch = true; else lSynch = false; xmlHttp.open( "POST", cURL, lSynch ); xmlHttp.send( null ); var info = xmlHttp.responseText; return info; } I'm starting to learn javascript and trying to get the below code to work with newer browsers. I'm not sure how to implement the below to make it work with XMLHttpRequest. There is a small form that uses this function to allow you to select an xml file to load. Your help is much appreciated. Thanks. Code: function importXML() { if (document.implementation && document.implementation.createDocument) { xmlDoc = document.implementation.createDocument("", "", null); xmlDoc.onload = createQuiz; } else if (window.ActiveXObject) { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.onreadystatechange = function () { if (xmlDoc.readyState == 4) createQuiz() }; } else { alert('Your browser cannot handle this script'); return; } xmlDoc.load(document.getElementById('file').value); } Ok, so I have built a website using galleryCMS, a pre-built CMS for images, which outputs XML via php to an address of: http://www.granitesupermarket.ca/login.php/view/xml Firefox and Chrome can pull the XML from the webpage using my code, however IE does nothing with it at all. I have found that if I use a page with a proper xml extension then the code works fine (ie test.xml); however, without the .xml it seems like IE does nothing?? I am not the most advanced user, so tampering with the CMS is not the best option for me... is there any workaround that I might be able to employ? Maybe a way I could take the xml I get from "login.php/view/xml" and save it to gallery.xml on the same server? Any help or ideas would be helpful. Code: <html> <head> <title></title> <head> <body> <script type="text/javascript"> // Get XML function function loadXMLDoc(dname) { if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest(); } else { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.open("GET",dname,false); xhttp.send(); return xhttp.responseXML; } // XML source xmlDoc=loadXMLDoc("login.php/view/xml") t=xmlDoc.getElementsByTagName("thumbnail"); // TEST THAT XML IS WORKING document.write(""+ t[0].childNodes[0].nodeValue + ""); </script> </body> </html> what is wrong with this Code: function addfavorites(classid,userid) { // alert("here"); var urltoajax = "addfavorites.php?j=1&classid="+ classid + "&userid="+ userid; urltoajax = urltoajax + '&rnd=' + Math.round(Math.random() * 10000) alert(urltoajax); $.ajax({ url: urltoajax, cache: false, success: function(html) { $("#message").html(html); } }); //alert('here 2'); } i get an error Object doesn't support this property or method In short, what's wrong with this? I'm sure you'll test it, but it just posts the JS inside the Bold tag instead of the grade. This includes the innerHTML script. Code: <html> <head> <script type="text/javascript"> function grade() { var tot = 1; var g = 0; var qId0 = document.getElementById('0').value; if (qId0 == "t") { g = g + 1; } g = g / tot; g = g * 100; document.getElementById("grade").innerHTML = grade; } </script> </head> <body> <b id="grade">Your Grade Here</b> <ol> <li><select id="0"> <option value="d">Test Question</option> <option value="f">false</option> <option value="t">true</option> <option value="f">false</option> </select> <button onclick="grade()">Submit</button> </body> </html> When I hit "submit" with the right answer, I get: function grade() { var tot = 1; var g = 0; var qId0 = document.getElementById('0').value; if (qId0 == "t") { g = g + 1; } g = g / tot; g = g * 100; document.getElementById("grade").innerHTML = grade; } When I hit "submit" with the wrong answer, I get the same. Can someone explain this to me and tell me how to fix it? (Also, I would appreciate it if you could point out any unrelated bugs you come across ) I'm trying to create a script that will call a flickr rest method and output its XML. I have written the following code, but it seems to not work. I am stumped, and was wondering what I am doing wrong. I have uploaded my code to http://www.sfu.ca/~jca41/stuph/blahh/example.html Code: function foo() { //var url = "http://flickr.com/services/rest/?method=flickr.photos.geo.getLocation&api_key=aa9b622e629e51d3fcda1f967c429237&photo_id=6174355034"; alert(loadXMLDoc(url)); } function loadXMLDoc(dname) { if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest(); } else { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.open("GET",dname,false); xhttp.send(""); return xhttp.responseText; } </script> hello all, I am trying to see if the w3schools example works on my site with a collapsible panel. here is what I have: Code: <script type="text/javascript"> function getXMLcontent() { if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } document.getElementById('CollapsiblePanel1').style.visibility = 'visible'; document.getElementById("CollapsiblePanelContent").innerHTML=xmlhttp.responseText; xmlhttp.open("GET","showfunction.php?fname=" + document.getElementById('functions').value, true); xmlhttp.send(); alert("showfunction.php?fname=" + document.getElementById('functions').value); } </script> the panel shows up as a thin grey line because no text is being thrown into it from the 'responsetext' property. I don't really know anything about what I'm doing. Just trying to copy and paste what the website example is. is there anything else I should know about what I'm doing, that would at least tell me why I'm not getting the data back out of the server like I should be? the 'functions' element on the page is a dropdown box, but it is not inside of a form tag. does that make a difference since I am using 'GET'?? thanks! Hi, because i need to get rid off Code: <iframe src="my.php"> in my html page, i have decided to replace it with javascript function which will get data from the server and will insert it into div section.But i dont know how can i obtain html page from my.php script... I know there is function XMLHttpRequest, but does it use current session from the browser ( my.php is protected - it does check the $_SESSION variable ) ? And does work this function in Mozilla ? Hi, I am trying to create a script that would output two variables - X Controllers and Y Pilots. Basically, I would need to capture the contents of the following webpage and extract those two numbers from the second line of text. http://66.109.25.244/ I think this may involve XMLHttpRequest but I am not sure. If anyone can help me do this, I would greatly appreciate it. Thanks in advance! I've been working for some time trying to get XMLHTTPRequests to work. Nothing doing. The code seems simple enough, but I can't duplicate it on my own. I have two pages on the same PC. Code to follow. Please help me see the problem: Page One - Originator <code> <html> <head> <title>Origination</title> <script type='text/javascript'> function ajaxRequest(){ var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]; //activeX versions to check for in IE if (window.ActiveXObject){ //Test for support for ActiveXObject in IE //first (as XMLHttpRequest in IE7 is broken) for (var i=0; i<activexmodes.length; i++){ try{ return new ActiveXObject(activexmodes[i]); } catch(e){ //suppress error } } } else if (window.XMLHttpRequest) // if Mozilla, Safari etc return new XMLHttpRequest(); else return false; } //Usage: //new ajaxRequest() function getStuff() { var getdata = new ajaxRequest(); if (getdata.readyState==4){ if (getdata.status==200){ var htmldata=getdata.responseText var txtfields = htmldata.getElementsByTagName('input'); alert(txtfields); } else{ alert('An error has occured making the request'); } } getdata.open('POST', 'test.html', true); getdata.send(null); } </script> </head> <body> <h5>Origination</h5> <form <form action="file:///test.html" method="post" enctype="text/plain"> <input type='text' name='homepage' value=''/> <input type='button' name='getit' value='GetSome' onclick='getStuff()'/> </form> </body> </html> </code> Page Two - The Target Page: <code> <html> <head><title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"/> <script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"/> <style type="text/css"> html {font-family: arial; font-size: 0.8em; } </style> </head> <body> <div id="wrapper"> <form action="file:///eyec.html" method="post" enctype="text/plain"> <input type='text' name='first' value='First Field'/> <input type='text' name='second' value='Second Field'/> <input type='text' name='third' value='Thrird Field'/> <input type='text' name='fourth value='Fourth Field'/> </form> </div> <!-- wrapper --> </body> </html> </code> I'd deeply appreciate correction. Thanks. I am trying to debug this with FireBug Code: function chapter12_nodeOne() { //create an element var element = document.createElement('input'); //set some attributes element.setAttribute('type', 'button'); element.setAttribute('value', 'submit'); //appendd the element into a DIV document.getElementById('myDiv').appendChild(element); //uses EventUtil to attach an event listener (1) EventUtil.addHandler(element, 'click', function() { alert('added event handler') }); } var EventUtil = { (2)addHandler: function(element, type, handler) { //check if the element and the browser support DOM Level 2 event attachment //if the user is not browsing with IE if (element.addEventListener) { element.addEventListener(type, handler, false); } //if user is browsing with IE else if (element.attachEvent) { element.attachEvent("on" + type, handler); } //if user is using a browser that only supports DOM Level 0 event attachment else { element["on" + type] = handler; } }, removeHandler: function(element, type, handler) { //check if the element and the browser support DOM Level 2 event attachment //if the user is not browsing with IE if (element.removeEventListener) { element.removeEventListener(type, handler, false); } //if user is browsing with IE else if (element.detachEvent) { element.detachEvent("on" + type, handler); } //if user is using a browser that only supports DOM Level 0 event attachment else { element["on" + type] = null; } }, preventDefault: function(event) { if(event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } } }; I put a breakpoint on the line marked with (1), I am trying to go to line (2) with all the available options FireBug gives, but unfortunately I get the end of chapter12_nodeOne function. Any ideas why? first of all, hello all i found this forum while running out of ideas and being extremely desperate to fixing a probably small javascript error in a script. the script is supposed to open a small form window that allows the user to input an email address and update it to proceed. the form item is initially unchecked, but as the user clicks it and enter his email address, it updates the value of the email address and the box becomes "checkable". the problem is that with both IE and firefox, the box doesn't close again, doesn't get checkable and basically doesn't work. in the firefox debugging console, I found the following error: Quote: Error: document.getElementById(input_array[i]) is null Source File: sell_item.php Line: 1106 does anyone have an idea what could be wrong? the part responsible in the javascript for this section is: Code: <script language="javascript"> function pg_popup_open(id) { if (document.getElementById(id).style.display == 'block') { document.getElementById(id).style.display = 'none'; } else { document.getElementById(id).style.display = 'block'; } return false; } function pg_update_settings(id, input_array) { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Browser does not support HTTP Request"); return; } var url = '' + 'ajax_files/direct_payment_box.php'; var action = url + '?id=' + id + '&user_id=' + 100001; var chk_disabled = false; for ( var i in input_array ) { action += '&' + input_array[i] + '=' + document.getElementById(input_array[i]).value; if (document.getElementById(input_array[i]).value == '') { chk_disabled = true; } } xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4) { var response = xmlHttp.responseText; } }; xmlHttp.open("GET", action, true); xmlHttp.send(null); document.getElementById('checkbox_' + id).disabled = chk_disabled; if (chk_disabled == true) { document.getElementById('checkbox_' + id).checked = false; } document.getElementById(id).style.display = 'none'; return false; } </script> and the html code that is supposed to pop up the box is: Code: <input type="checkbox" name="payment_gateway[]" id="checkbox_pg_paypal" value="1" disabled> <span class="contentfont"><a href="javascript:;" onclick="pg_popup_open('pg_paypal');">PayPal</a></span> <script language="javascript"> var array_pg_paypal = new Array(); array_pg_paypal[0] = 'pg_paypal_email';</script> <div class="smallfont"><b>PayPal Email Address</b><br> <input type="text" name="pg_paypal_email" id="pg_paypal_email" value="" /></div> <div align="right"><input type="button" value="Proceed" onclick="pg_update_settings('pg_paypal', array_pg_paypal);" /></div> i understand this is asking a lot, but if someone has a spare second that is a javascript guru, i promise i will name my first born after you!! lol Hi everybody. I've been trying to figure out how to fix the following error I get in the latest Internet Explorer for marinebio.org: Message: 'this.submenus[...].getElementsByTagName(...).0' is null or not an object Line: 547 Char: 3 Code: 0 URI: http://marinebio.org/_n/s/main.js The code at line 547 in main.js is: Code: this.submenus[i].getElementsByTagName("span")[0].onclick = function() { in the function: Code: SDMenu.prototype.init = function() { var mainInstance = this; for (var i = 0; i < this.submenus.length; i++) this.submenus[i].getElementsByTagName("span")[0].onclick = function() { mainInstance.toggleMenu(this.parentNode); }; if (this.markCurrent) { var links = this.menu.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) if (links[i].href == document.location.href) { links[i].className = "current"; break; } } if (this.remember) { var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)"); var match = regex.exec(document.cookie); if (match) { var states = match[1].split(""); for (var i = 0; i < states.length; i++) this.submenus[i].className = (states[i] == 0 ? "collapsed" : ""); } } }; I've been using the Dynamic Drive's Slashdot sliding menu script for at least a year without any problems. All pages validated before the ads were added. I've pulled nearly all other scripts but it still errors out. Works fine in FF and Chrome. Going to strip the home page to nothing and start building it back but if anyone has any ideas, I'd really appreciate it. Maybe it's time to upgrade the vertical sliding menu script entirely, if anyone can recommend a better one, that would be great too. I know just enough javascript to be dangerous apparently.... I'm very new to this so don't laugh at me But anyways what did I do wrong? Code: function XMLHttpRequest() { var request = false; if(window.XMLHttpRequest) { if(typeof XMLHttpRequest != 'undefined') try { request = new XMLHttpRequest(); } catch(e) { request = false; } } else if (window.ActiveXObject) { try { request = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { request = false; } } return request; } XMLHttpRequest.onreadystatechange = function requestWindow(url) { windowOpen(); if(xmlhttp.readyState==4) { document.getElementById('action1').innerHTML=XMLHttpRquest.responseText; } } XMLHttpRequest.open("GET",url,false); XMLHttpRequest.send(null); when I click my button to use requestWindow it says requestWindow is not defined... ok I got it to try to load a page with this... but the problem was that the server does not find so and so page now =S and I know that page exists and its directing to the correct directory. Code: function requestWindow(url) { windowOpen() if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET",url,false); xmlhttp.send(null); document.getElementById('action1').innerHTML=xmlhttp.responseText; } and now im even more confused... if I run it on localhost my page at least loads... run it on server and my scripts crash page does not load... GAH!!! http://opentech.durhamcollege.ca/~in...rittains/labs/ ok here is the entire crappy thing Code: var browser=navigator.appName; var frameWidth = ""; var frameHeight = ""; var bgImage = ""; var desktop = ""; var menuBar = ""; var menuBarButton = ""; var menuBarContainer = ""; var menuBarClock = ""; var action1 = ""; var action2 = ""; var action3 = ""; var d = new Date(); var year = d.getFullYear(); var date = ""; var menuCheck = false; var si = ""; var io = ""; function requestWindow(url) { windowOpen() if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET",url,false); xmlhttp.send(null); document.getElementById('action1').innerHTML=xmlhttp.responseText; } /* function XMLHttpRequest() { var request = false; if(window.XMLHttpRequest) { if(typeof XMLHttpRequest != 'undefined') try { request = new XMLHttpRequest(); } catch(e) { request = false; } } else if (window.ActiveXObject) { try { request = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { request = false; } } return request; } XMLHttpRequest.onreadystatechange = function requestWindow() { windowOpen(); if(xmlhttp.readyState==4) { document.getElementById('action1').innerHTML=XMLHttpRquest.responseText; } } XMLHttpRequest.open("GET",url,false); XMLHttpRequest.send(null); */ function reset() { if (self.innerWidth) { frameWidth = self.innerWidth; frameHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { frameWidth = document.documentElement.clientWidth; frameHeight = document.documentElement.clientHeight; } else if (document.body) { frameWidth = document.body.clientWidth; frameHeight = document.body.clientHeight; } bgImage = document.getElementById("bgImage"); desktop = document.getElementById("desktop"); menuBar = document.getElementById("menuBar"); menuBarButton = document.getElementById("menuBarButtonSpan"); menuBarContainer = document.getElementById("menuBarContainer"); menuBarClock = document.getElementById("menuBarClock"); action1 = document.getElementById("action1"); action2 = document.getElementById("action2"); action3 = document.getElementById("action3"); if(browser!="Netscape") { bgImage.style.top = 8 + "px"; bgImage.style.left = 8 + "px"; desktop.style.top = 8 + "px"; desktop.style.left = 8 + "px"; menuBar.style.top = (frameHeight - 45) + "px"; menuBar.style.left = 8 + "px"; } bgImage.style.width = (frameWidth - 21) + "px"; bgImage.style.height = (frameHeight - 51) + "px"; desktop.style.width = (frameWidth - 20) + "px"; desktop.style.height = (frameHeight - 50) + "px"; menuBar.style.width = (frameWidth - 20) + "px"; menuBar.style.top = (frameHeight - 40) + "px"; menuBarClock.style.left = (frameWidth - 100) + "px"; t=setTimeout('reset()',500); } function menuSize() { action3.style.backgroundColor = "black"; action3.style.color = "#C0C0FF"; action3.style.border = "1px solid #C0C0FF"; action3.style.width = "250px"; action3.style.height = "400px"; action3.style.padding = "5px"; if(browser!="Netscape") { action3.style.top = (frameHeight - 452) + "px"; var winCheck = frameWidth - 1651; if(winCheck<=0) { action3.style.left = 8 + "px"; } else { action3.style.left = (frameWidth - 1672) + "px"; } } else { action3.style.top = (frameHeight - 452) + "px"; var winCheck = frameWidth - 1672; if(winCheck<=0) { action3.style.left = 8 + "px"; } else { action3.style.left = (frameWidth - 1672) + "px"; } } //menuT=setTimeout('menuSize()',500); } function menu() { if(menuCheck==false) { var lab1 = "'../lab1.html'"; menuSize(); action3.innerHTML = '<input type="button" class="menuButtons" id="menuButton1" value="Lab1" onclick="requestWindow(' + lab1 + ')" /><input type="button" class="menuButtons" id="menuButton2" value="Lab2" onclick="lab2()" /><input type="button" class="menuButtons" id="menuButton3" value="Lab3" onclick="lab3()" /><input type="button" class="menuButtons" id="menuButton4" value="Lab4" onclick="lab4()" /><input type="button" class="menuButtons" id="menuButton5" value="Lab5" onclick="lab5()" /><input type="button" class="menuButtons" id="menuButton5" value="Lab6 - comming soon" onclick="lab6()" />'; menuCheck=true; } else if(menuCheck==true) { action3.style.backgroundColor = "transparent"; action3.style.border = "0px solid #C0C0FF"; action3.style.width = "0px"; action3.style.height = "0px"; action3.style.padding = "0px"; action3.style.top = "0px"; action3.style.left = "0px"; action3.innerHTML = ""; window.clearTimeout(menuT); menuCheck=false; } } function clearMenu() { action3.style.backgroundColor = "transparent"; action3.style.border = "0px solid #C0C0FF"; action3.style.width = "0px"; action3.style.height = "0px"; action3.style.padding = "0px"; action3.style.top = "0px"; action3.style.left = "0px"; action3.innerHTML = ""; menuCheck=false; //menuT=setTimeout('clearMenu()',500); } function windowSize () { action1.style.backgroundColor = "black"; action1.style.color = "#C0C0FF"; action1.style.border = "1px solid #C0C0FF"; action1.style.width = (frameWidth - 375) + "px"; action1.style.height = (frameHeight - 200) + "px"; action1.style.left = (frameWidth - 1500) + "px"; var winCheck1 = (frameWidth - 1500); if(winCheck1<=0) { action1.style.left = (frameWidth - 850) + "px"; } action1.style.top = (frameHeight - 750) + "px"; var winCheck2 = (frameHeight - 750); if(winCheck2<=0) { action1.style.top = (frameHeight - 500) + "px"; } t=setTimeout('windowSize()',500); } function windowOpen() { windowSize() document.getElementById("action1").innerHTML = ''; action1.style.filter = "alpha(opacity=" + (0*100) + ")"; action1.style.opacity = 0; var si = setInterval(function() { io+=0.05; action1.style.filter = "alpha(opacity=" + (io*100) + ")"; action1.style.opacity = io; }, 100); io = 0; if(io==1) { window.clearInterval(si); } clearMenu(); } function lab1() { windowOpen(); <?php $page = file_get_contents("../lab1.html"); $page = str_replace("\r", "", $page); //remove carriage returns $page = str_replace("\n", "", $page); //remove carriage returns ?> document.getElementById("action1").innerHTML = '<?php echo $page; ?>'; } function lab1b() { windowOpen(); <?php $page = file_get_contents("../lab1b.html"); $page = str_replace("\r", "", $page); //remove carriage returns $page = str_replace("\n", "", $page); //remove carriage returns ?> document.getElementById("action1").innerHTML = '<?php echo $page; ?>'; } function lab2() { windowOpen(); <?php $page = file_get_contents("../lab2.html"); $page = str_replace("\r", "", $page); //remove carriage returns $page = str_replace("\n", "", $page); //remove carriage returns ?> document.getElementById("action1").innerHTML = '<?php echo $page; ?>'; } function lab3() { windowOpen(); <?php $page = file_get_contents("../lab3.html"); $page = str_replace("\r", "", $page); //remove carriage returns $page = str_replace("\n", "", $page); //remove carriage returns ?> document.getElementById("action1").innerHTML = '<?php echo $page; ?>'; } function lab4() { windowOpen(); <?php $page = file_get_contents("../lab4.html"); $page = str_replace("\r", "", $page); //remove carriage returns $page = str_replace("\n", "", $page); //remove carriage returns ?> document.getElementById("action1").innerHTML = '<?php echo $page; ?>'; } function lab5() { windowOpen(); <?php //$page = file_get_contents("../lab5.php"); //$page = str_replace("\r", "", $page); //remove carriage returns //$page = str_replace("\n", "", $page); //remove carriage returns ?> document.getElementById("action1").innerHTML = '<?php /*echo $page;*/ /*str_replace("\r", "", include "../lab5.html");*/ include "../lab5b.php"; ?>'; } function lab6() { windowOpen(); document.getElementById("action1").innerHTML = '<?php include "../lab62.php"; ?>'; } On my music site, I want to keep track of the number of times each song has been played. The code below uses a clicked button to send the request. But I need to be able to send the request as each song begins to play. Or when a user clicks another song in the list. Mr Oldies online radio station I am using the audio.js script for the html5 audio player. That code is listed below as well. This code creates a division with the ID of "playing" for the active song. It is in here somewhere, where I would need to include the request to send the data to a php page which then does the work of accessing and updating a databse. I just do not know enough of Javascript to do this. Can someone show me where exactly to put the required code to do this? Thanks. Code: <!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { 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; } } xmlhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford",true); xmlhttp.send(); } </script> </head> <body> <h2>AJAX</h2> <button type="button" onclick="loadXMLDoc()">Request data</button> <div id="myDiv"></div> </body> </html> audio.js code the other part of the audio.js script can be found here http://mroldies.net/test/audio.js Code: <script> var loadedobjects="" var rootdomain="http://"+window.location.hostname function ajaxpage(url, containerid){ var page_request = false if (window.XMLHttpRequest) // if Mozilla, Safari etc page_request = new XMLHttpRequest() else if (window.ActiveXObject){ // if IE try { page_request = new ActiveXObject("Msxml2.XMLHTTP") } catch (e){ try{ page_request = new ActiveXObject("Microsoft.XMLHTTP") } catch (e){} } } else return false page_request.onreadystatechange=function(){ loadpage(page_request, containerid) } page_request.open('GET', url, true) page_request.send(null) } function loadpage(page_request, containerid){ if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) document.getElementById(containerid).innerHTML=page_request.responseText } function loadobjs(){ if (!document.getElementById) return for (i=0; i<arguments.length; i++){ var file=arguments[i] var fileref="" if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding if (file.indexOf(".js")!=-1){ //If object is a js file fileref=document.createElement('script') fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src", file); } else if (file.indexOf(".css")!=-1){ //If object is a css file fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", file); } } if (fileref!=""){ document.getElementsByTagName("head").item(0).appendChild(fileref) loadedobjects+=file+" " //Remember this object as being already added to page } } } </script> This is my class doucmnet :: PHP Code: XMLXHttpRequest = function(name){ this._handle = new XMLHttpRequest(); this._method = ''; this._url = ''; this.readyState = 0; this.responseBody = ''; this.responseText = ''; this.responseXML = ''; this.status = 0; this.statusText = ''; this.className = name; this.onreadystatechange = function(){} this.ontimeout = function(){} this.abort = function(){ this._handle.abort(); } this.getAllResponceHeaders = function(){ return this._handle.getAllResponceHaders; } this.getResponceHeader = function(bstrHeader){ return this._handle.getResponceHeader(bstrHeader); } this._readyStateUpdate = function(){ if(typeof(name) !== "undefined"){ name = this.className; } eval(""+name+".onreadystatechange();"); eval(""+name+".readyState = "+name+"._handle.readyState;"); eval(""+name+".status = "+name+"._handle.status;"); eval(""+name+".statusText = "+name+"._handle.statusText;"); eval(""+name+".responseText = "+name+"._handle.responseText;"); eval(""+name+".responseBody = "+name+"._handle.responseBody;"); eval(""+name+".responseXML = "+name+"._handle.responseXML;"); } this.open = function(sMethod, sUrl){ this._readyStateUpdate(); this._handle.onreadystatechange = this._readyStateUpdate; this._handle.ontimeout = this.ontimeout(); this._url = sUrl; this._method = sMethod; } this.send = function(data){ this._handle.open("GET", "xml.php?url="+ this._url + "&method=" + this._method + "&data=" + urlencode(data)); this._handle.send(null); } this.setRequstHeader = function(sName, sValue){ return this._handle.setRequestHeader(sName, sValue); } } What this is supposed to do :: This is a class that is supposed to allow CrossDomain AJAX(XMLXHttpRequest) in the exact same way the XMLHttpRequest dose all the same handlers other then it uses a php file to get all the data now the PHP File works perfectly post and GET - Without cURL. Now most of the class works it can send the data("POST" or "GET") cross domain the only problem seems to be firing the onreadystatechange PHP Code: this.open = function(sMethod, sUrl){ this._readyStateUpdate(); this._handle.onreadystatechange = this._readyStateUpdate; this._handle.ontimeout = this.ontimeout(); this._url = sUrl; this._method = sMethod; } As you can see i have its set to fire the _readyStateUpdate on the onreadystatechange so why is it not fireing, This is tested in FireFox 3.5, ComitBird(Firefox 3.2 Core), Google Chrome and IE and it dose not work in all of them as i know there is a bug with FireFox 3.5 and Firebug wich im a developer i have got it but thats why im testing in GG and IE Any help would be greatly appreciated |