skaero Posted July 24, 2008 Share Posted July 24, 2008 I have a Firefox AJAX problem, it works fine in IE, but only IE. I can't fine anything that's not working. I am not good with js so it most likely something simple.Thanks! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><script type="text/javascript" language="javascript"> var http_request = false; function makePOSTRequest(url, parameters) { http_request = false; if (window.XMLHttpRequest) { // Mozilla, Safari,... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { // set type accordingly to anticipated content type //http_request.overrideMimeType('text/xml'); http_request.overrideMimeType('text/html'); } } else if (window.ActiveXObject) { // IE try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { alert('Cannot create XMLHTTP instance'); return false; } http_request.onreadystatechange = alertContents; http_request.open('POST', url, true); http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); http_request.setRequestHeader("Content-length", parameters.length); http_request.setRequestHeader("Connection", "close"); http_request.send(parameters); } function alertContents() { if (http_request.readyState == 4) { if (http_request.status == 200) { //alert(http_request.responseText); result = http_request.responseText; document.getElementById('myspan').innerHTML = result; } else { alert('There was a problem with the request.'); } } }function get(obj) { var poststr = "content=" + encodeURI( document.getElementById("content").value ) + "&site=" + encodeURI( document.getElementById("site").value ) + "&page=" + encodeURI( document.getElementById("page").value ); makePOSTRequest("post.php", poststr);}</script></head><body><form action="java script:get(document.getElementById(myform));" name="myform" id="myform"> <textarea id="content" name="content" class="editer"> Content </textarea> <input type="hidden" id="site" name="site" value="1" /> <input type="hidden" id="page" name="page" value="1" /><input type="submit" name="button" value="Submit" /></form><span name="myspan" id="myspan"></span></body></html> Link to comment Share on other sites More sharing options...
Synook Posted July 24, 2008 Share Posted July 24, 2008 I have a Firefox AJAX problem, it works fine in IE, but only IE. I can't fine anything that's not working.If everything is working... what is the problem? Link to comment Share on other sites More sharing options...
skaero Posted July 24, 2008 Author Share Posted July 24, 2008 Sorry I meant that its not working in Firefox, and I can't find anything wrong with the code. Sorry the bad spelling! Link to comment Share on other sites More sharing options...
Synook Posted July 24, 2008 Share Posted July 24, 2008 Hmm... I don't know about using the action attribute with JS, try using the onsubmit handler <form action="" onsubmit="get(this);" name="myform" id="myform"> Link to comment Share on other sites More sharing options...
skaero Posted July 24, 2008 Author Share Posted July 24, 2008 That didn't work, Firefox said: "There was an problem with the request" It also did work in IE Link to comment Share on other sites More sharing options...
Synook Posted July 24, 2008 Share Posted July 24, 2008 Are you trying to access a remote page? Try alerting alert('There was a problem with the request.\nThe error was'+http_request.status); so we can see what is wrong.Also, try removing the overrideMIMEtype thing. Link to comment Share on other sites More sharing options...
skaero Posted July 24, 2008 Author Share Posted July 24, 2008 Were would I put the alert? Removing the overrideMIMEtype didn't work. I also found out that if you remove <html> at the top it works in Firefox, so would it be some sort of sintact problem? Link to comment Share on other sites More sharing options...
jesh Posted July 24, 2008 Share Posted July 24, 2008 Were would I put the alert?For debugging, you could put alerts in your "alertContents" function:function alertContents(){ if (http_request.readyState == 4) { if (http_request.status == 200) { alert(http_request.responseText); //result = http_request.responseText; //document.getElementById('myspan').innerHTML = result; } else { //alert('There was a problem with the request.'); alert('There was a problem with the request.\nThe error was'+http_request.status); } }} Also, you mention that the problem appears to go away when you remove the <html> tag from the main page. You'll want to make sure, since you're injecting the response that comes back from "post.php" into the body of the page, that that response doesn't, itself, contain "<html>" in it. Link to comment Share on other sites More sharing options...
skaero Posted July 24, 2008 Author Share Posted July 24, 2008 It says that "the error was ()" and <html> is not in the output, right now post.php is: <?phpecho $_POST[content];echo $_POST[site];echo $_POST ;?> Link to comment Share on other sites More sharing options...
jeffman Posted July 24, 2008 Share Posted July 24, 2008 Better to put the debugging alert before this line:if (http_request.status == 200)You want to see everything that comes out, not just the successes. Link to comment Share on other sites More sharing options...
justsomeguy Posted July 24, 2008 Share Posted July 24, 2008 We're 10 posts in and no one has suggested to check for error messages? Install Firebug for Firefox (link in my signature), once installed go to Tools -> Firebug -> Enable, run your page, and check the bottom status bar for a red X.The main problems looks like the form is submitting and refreshing the page. You don't need an entire form for AJAX, just use a button. <body> <textarea id="content" name="content" class="editer"> Content </textarea> <input type="hidden" id="site" name="site" value="1" /> <input type="hidden" id="page" name="page" value="1" /><input type="button" onclick="get();" name="button" value="Submit" /><span name="myspan" id="myspan"></span></body> Link to comment Share on other sites More sharing options...
skaero Posted July 24, 2008 Author Share Posted July 24, 2008 Ok that found the error, it was: java script:get(document.getElementById(myform));. myform didn't have any quotation marks around it, I changed it to: java script:get(this); and now it works! This makes it work for one of the scripts I am making now what I want to do is have it so when the form is changes its automatically sends the data. I changed the document to this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><script type="text/javascript" language="javascript"> var http_request = false; function makePOSTRequest(url, parameters) { http_request = false; if (window.XMLHttpRequest) { // Mozilla, Safari,... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { // set type accordingly to anticipated content type //http_request.overrideMimeType('text/xml'); http_request.overrideMimeType('text/html'); } } else if (window.ActiveXObject) { // IE try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { alert('Cannot create XMLHTTP instance'); return false; } http_request.onreadystatechange = alertContents; http_request.open('POST', url, true); http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); http_request.setRequestHeader("Content-length", parameters.length); http_request.setRequestHeader("Connection", "close"); http_request.send(parameters); } function alertContents() { if (http_request.readyState == 4) { if (http_request.status == 200) { //alert(http_request.responseText); result = http_request.responseText; document.getElementById('myspan').innerHTML = result; } else { alert('There was a problem with the request.'); } } }function get(obj) { var poststr = "base=" + encodeURI( document.getElementById("base").value ) + "&stand=" + encodeURI( document.getElementById("stand").value ) + "&O1=" + encodeURI( document.getElementById("O1").value ) + "&O2=" + encodeURI( document.getElementById("O2").value ) + "&O3=" + encodeURI( document.getElementById("O3").value ) + "&O4=" + encodeURI( document.getElementById("O4").value ) + "&O5=" + encodeURI( document.getElementById("O5").value ) + "&O6=" + encodeURI( document.getElementById("O6").value ) + "&O7=" + encodeURI( document.getElementById("O7").value ) + "&O8=" + encodeURI( document.getElementById("O8").value ); makePOSTRequest("post.php", poststr);}</script></head><body><form onchange="java script:get(this);" name="myform" id="myform"><b>Base</b><br /><input type="radio" id="base" name="base" value="B1"> Base 1<br /><input type="radio" id="base" name="base" value="B2"> Base 2<br /><input type="radio" id="base" name="base" value="B3"> Base 3<br /><input type="radio" id="base" name="base" value="B4"> Base 4<br /><b>Stand</b><br /><input type="radio" id="stand" name="stand" value="S1"> Stand 1<br /><input type="radio" id="stand" name="stand" value="S2"> Stand 2<br /><input type="radio" id="stand" name="stand" value="S3"> Stand 3<br /><input type="radio" id="stand" name="stand" value="S4"> Stand 4<br /><b>Option</b><br /><input type="checkbox" id="O1" name="O1" value="O1"> Option 1<br /><input type="checkbox" id="O2" name="O2" value="O2"> Option 2<br /><input type="checkbox" id="O3" name="O3" value="O3"> Option 3<br /><input type="checkbox" id="O4" name="O4" value="O4"> Option 4<br /><input type="checkbox" id="O5" name="O5" value="O5"> Option 5<br /><input type="checkbox" id="O6" name="O6" value="O6"> Option 6<br /><input type="checkbox" id="O7" name="O7" value="O7"> Option 7<br /><input type="checkbox" id="O8" name="O8" value="O8"> Option 8</form><span name="myspan" id="myspan"></span></body></html> But the only thing it returns is:B1S1O1O2O3O4O5O6O7O8I need it to only show the ones that are selected. Thanks for the help! Link to comment Share on other sites More sharing options...
justsomeguy Posted July 24, 2008 Share Posted July 24, 2008 Using document.getElementById("O1").value always sends the value, regardless of whether or not it is checked. You can use document.getElementById("O1").checked to figure out if it's checked. Link to comment Share on other sites More sharing options...
skaero Posted July 24, 2008 Author Share Posted July 24, 2008 So how would I use a if checked/send value? Link to comment Share on other sites More sharing options...
justsomeguy Posted July 24, 2008 Share Posted July 24, 2008 Use an if statement to check the checked property before adding the value to the list of things going out. Link to comment Share on other sites More sharing options...
skaero Posted July 24, 2008 Author Share Posted July 24, 2008 I think I got that to work I not that good with JS, So how would I get this to work for the radio buttons? Link to comment Share on other sites More sharing options...
justsomeguy Posted July 24, 2008 Share Posted July 24, 2008 Same thing, radio buttons have a checked property. You need to assign each radio button a different ID and check them all to determine which one is checked. Link to comment Share on other sites More sharing options...
skaero Posted July 25, 2008 Author Share Posted July 25, 2008 I have for (var b = 1; j <= 4; j++) { id = "b" + j; box = getElementById (id); if (box.checked == true) { var base = box.value; }} How can I get this into the var poststr? Link to comment Share on other sites More sharing options...
justsomeguy Posted July 25, 2008 Share Posted July 25, 2008 The + or += operators will concatenate 2 strings. e.g.poststr += "&name=" + escape(val) Link to comment Share on other sites More sharing options...
skaero Posted July 25, 2008 Author Share Posted July 25, 2008 I think that's what I have now, can you wright an example for me, sorry for being so thick headed. Link to comment Share on other sites More sharing options...
jeffman Posted July 25, 2008 Share Posted July 25, 2008 base = base + box.value;is commonly abbreviated to:base += box.value;Thus:base = "Hello ";box.value = "world!"base += box.value; // returns "Hello world!"It's very common to concatenate small strings into big strings with lots of += statements. An advantage is that you can embed such statements in loops and if clauses and not be limited to creating one big old string in a single statement. Link to comment Share on other sites More sharing options...
skaero Posted July 25, 2008 Author Share Posted July 25, 2008 Ok I understand that part now but how would I put that into: for (var b = 1; j <= 4; j++) { id = "b" + j; box = getElementById (id); if (box.checked == true) { var base = box.value; }} var poststr = "base=" + encodeURI( base ) + "&stand=" + encodeURI( document.getElementById("stand").value ) + "&O1=" + encodeURI( document.getElementById("O1").checked ) + "&O2=" + encodeURI( document.getElementById("O2").checked ) + "&O3=" + encodeURI( document.getElementById("O3").checked ) + "&O4=" + encodeURI( document.getElementById("O4").checked ) + "&O5=" + encodeURI( document.getElementById("O5").checked ) + "&O6=" + encodeURI( document.getElementById("O6").checked ) + "&O7=" + encodeURI( document.getElementById("O7").checked ) + "&O8=" + encodeURI( document.getElementById("O8").checked ); makePOSTRequest("post.php", poststr);} To make the radio buttons work? Link to comment Share on other sites More sharing options...
jeffman Posted July 25, 2008 Share Posted July 25, 2008 First, do you really mean this:for (var b = 1; j <= 4; j++)or this:for (var j = 1; j <= 4; j++)----EDITEDThe rest is just a repeat of what you're already doing: for (j = 1; j <= 8; j++) { id = "O" + j; box = document.getElementById (id); if (box.checked == true) { base += "&" + id + "=checked"; } } Link to comment Share on other sites More sharing options...
skaero Posted July 25, 2008 Author Share Posted July 25, 2008 That is give me the error: getElementById is not defined - box = getElementById (id); Link to comment Share on other sites More sharing options...
Synook Posted July 25, 2008 Share Posted July 25, 2008 Alert the id variable, see what it says. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.