IE issue with DOM manipulation - javascript

I have a AJAX form and I use this line on receiving a response:
document.getElementById("output").innerHTML = xmlhttp.responseText;
Output is a div and in IE I'm getting an Unknown JavaScript Error.
Would it be the content that's being passed from the AJAX that's causing this error or is there something syntactically wrong with that line?
EDIT:
if(valid==true){
//AJAX
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("output").innerHTML = xmlhttp.responseText;
id = document.getElementById("parentID").value;
}
}
var parameters = "shedloadofvariables"+shedloadofVariables;
xmlhttp.open("POST", "register.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(parameters);
}
else{
alert("Please Fill in All Fields");
}
Cheers

Output is a div and in IE I'm getting an Unknown JavaScript Error.
"Unknown runtime error" commonly occurs when setting invalid HTML via the innerHTML property. Not all invalid HTML will cause this problem — the common case is trying to stuff a block element into an element that doesn't allow block elements, like a <div> inside a <p>. Only IE spits out this error message, other browsers will do their best to recover from your crappy HTML.
First thing to do is validate the HTML with the W3C validator. For more information, take a look at http://blog.rakeshpai.me/2007/02/ies-unknown-runtime-error-when-using.html.

You could try using jquery $('#output').html(xmlhttp.responseText);

I still don't understand the problem fully (Andy E's answer certainly helps though).
I found a work-around for this issue:
var t = document.createElement('div');
t.innerHTML = xmlhttp.responseText;
document.getElementById("output").appendChild(t);
Flawless.
Don't know why, but I'm not about to question it, because it works!

Related

Php not receiving post from JavaScript

I have implemented the same setup elsewhere in my site and can't figure out why it's not working this time.
When a user clicks the accept button, it calls a JavaScript function acceptOrder(orderID) which passes the orderID onto a php page to update a record in the db.
orderID is assigned ok in the JavaScript but it doesn't reach the php. Var_dump on POST shows nothing, nor does $_POST('orderID'). I've even tried just sending an integer to the php in case there was a problem with the var but it made no difference.
Js
function acceptOrder(orderID) {
var orderID=orderID;
console.log("assigned: "+orderID);
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
// code for IE6, IE5
else
{
xmlhttp=new ActiveXObject("Microsoft. }
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
console.log (xmlhttp.responseText);
}
}
xmlhttp.open("POST","acceptorder.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-rule encoded");
xmlhttp.send(orderID);
console.log(orderID+" sent");
//location.reload();
//console.log("reload");
}
Php
<?php
require_once("config1412/class.shop.php");
session_start();
$shop = new SHOP();
echo var_dump($_POST);
//$orderID = $_POST['orderID'];
//echo "orderId var = ".$orderID."<br/>post ".$_POST['orderID'];
//$shop->acceptOrder($orderID);
?>
Needless to say I've searched about and don't see any solutions elsewhere.
Many thanks
As i can see, you didn't set variable name for orderID, change line of code:
xmlhttp.send(orderID);
to:
xmlhttp.send("orderID="+orderID);
If it's only SQL error of missing orderID, and all other passess okay, it's solution for you. As you said in comments "I just get a sql error because the variable orderID is empty".
You're missing only naming post send data, that's why it's empty.
Please replace this line
xmlhttp=new ActiveXObject("Microsoft. }
with following this line
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
You should write this in your js
function acceptOrder(orderID) {
var orderID=orderID;
console.log("assigned: "+orderID);
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
// code for IE6, IE5
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
console.log (xmlhttp.responseText);
}
}
xmlhttp.open("POST","acceptorder.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-rule encoded");
xmlhttp.send(orderID);
console.log(orderID+" sent");
//location.reload();
//console.log("reload");
}
I would recommend you to use jQuery for ajax calls. It's much easier to setup and straightforward. Especially, and specialy because it is very easy setup for a beginner. And for people who want to install ajax the easy way. I use it every single time I want to do ajax in my code. Here is a link:
http://api.jquery.com/jquery.ajax/
Just put the tag to include jQuery and then one javascript command to call the ajax.

AJAX xmlhttp.responseText

I've been racking my brain for a few hours and can't figure out why a string comparison won't work. In the following code, I do a xmlhttp call and get a response text. The PHP file that I get a call IS returning the proper response string "NOAD", and NOAD is being displayed when appropriate in my testing. However, when the call is returned NOAD I want to identify it, however for some reason within the call below xmlhttp.responseText == comparisonText its NOT properly comparing the two. Why does xmlhttp.responseText printout NOAD but I can't use it within the comparator?
function loadXMLAdImage1Doc(currentScenarioTime)
{
var returnText = "Not Here";
var comparisonText = "NOAD";
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)
{
if (xmlhttp.responseText == comparisonText)
{
document.getElementById("AJAXTEST").innerHTML =returnText;
} else {
document.getElementById("AJAXTEST").innerHTML =xmlhttp.responseText;
}
}
}
Okay, thanks Luth for pointing me in the right direction. I solved my problem, but I'm not sure what the problem is within xmlhttp.responseText or user error that caused it.
The return text from my PHP file was placing an unseen character BEFORE the returned string (in testing, I would have figured it was an invisible character after prior to the results but go figure). Theoretically, this shouldn't be happening...my PHP is returning a straightforward string:
..do some MYSQL queries..
$AdLink = mysql_result($result, 0);
if ($AdLink == "") {
echo "NOAD";
} else
{
echo $AdLink;
}
So the PHP file SHOULD be sending a 4 character return screen to the xmlhttp.responseText call named "NOAD". But what was found in measuring the string length was that it was sending a 5 character string back with some invisible character BEFORE "NOAD" that wasn't showing up on the screen - therefore screwing up the comparator. I used the following code to remove the character and it worked perfectly...
returnText = xmlhttp.responseText;
var returnlength = returnText.length;
returnText = returnText.substring(1, returnlength);
I have no idea WHAT the character is, whether its a problem with my PHP code or the xmlhttp.responseText call, but something to be aware of if you're dealing with the call.

Javascript - Reading a text file line by line. Does it matter what browser is being used?

I have just started getting into Javascript and mobile web programming. One thing that I am uncertain of is how I can write proper code that runs on any browser without having the end user have any extra requirements on their end (what browser to use).
I am coding this in google chrome and more recently in c9.io.
I thought this would work:
function readTextFile(file)
{
var client = new XMLHttpRequest();
client.open('GET', file);
client.send();
client.onreadystatechange = function() {
alert(client.responseText);
}
}
But i get the error that XMLHTTpRequest is not defined. I have been trying to figure out why this is and I keep coming to different browsers not supporting this. I had figured simple file io would not be that difficult but its causing me more trouble than I had hoped.
What is the best way to input a text file? It is 1 text file that is not having anything being written to it. Just read only. The end user isn't choosing this text file it should be the only option.
The order in your code is wrong, send method should be the last one; otherwise, your code is fine and it should work fine in all modern browsers. The mentioned order issue, or maybe was something else (before) causing that error. The snippet below will also split received text in an array of text lines
var xhr, i, text, lines;
if(window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
}else{
// IE5, IE6 - next line supports these dinosaurs
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
text = xhr.responseText;
lines = text.split("\n");
for(i = 0; i < lines.length; i++){
console.log(lines[i]);
}
}
}
xhr.open('GET', 'http://domain/file.txt', true);
xhr.send();
XMLHTTpRequest is not supported by the older browsers. Try doing this to support the older browsers as well:
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");
}

AJAX - Not getting a simple php response(returns "undefined")

I don't know why xmlhttp.response is returning undefined after contacting the php file.
index.php
<script language="Javascript">
var countdown;
countdown = setInterval(function(){
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){
alert(xmlhttp.responsetext);
}
}
xmlhttp.open("GET","updateindex.php?id=8",true);
xmlhttp.send();
},3000);
</script>
updateindex.php
<?php
echo "hi";
?>
It should alert "hi" every 3 seconds, but it alerts "undefined" every 3 seconds.
Note the capital T in responseText. So it should be xmlhttp.responseText.
In javascript, "undefined" means the variable you tried to access is not defined, i.e., it doesn't exist. When you see that, you should check right away for typos. In this case,
xmlhttp.responsetext should be xmlhttp.responseText. The lowercase property you selected does not exist.
In WebKit browsers like Chrome and Safari (and I'm sure in others, but those are the ones I use) you can also check your variable names in the console. Google how to use the developer tools in your browser. When you're having trouble referencing a property on an object like you are now, it's often helpful to type/log the object name into the console, which will then show you a list of all its properties. For instance, if you add console.log(xmlhttp) to your script, it will show the object and all its properties in the console, and you can see that the property you want is responseText, not responsetext.

Show Save-As window from JSP

I need to write a String in a file on the client side, however as the Internet protocol does not allow that for Security concerns, this is the workaround I did: I have an AJAX request which invokes a JSP that queries a Database to get a String. I need to show the users a "Save-As" dialog and write this String to the local path they specify.
My JavaScript function:
function openReport(id)
{
var url = "../reports/reportsHandler.jsp?id=" + id;
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)
{
//alert(xmlhttp.responseText);
alert("result obtained");
}
}
xmlhttp.open("POST", url, true);
xmlhttp.send();
}
In the JSP, I have something like this:
response.setHeader("Content-Disposition", "attachment;filename=report.xml");
out.println(stringObtainedFromDatabase);
I do not see a Save As dialog while I get the alert saying result obtained. This is the first time I am doing this, could you please tell me if I am doing something wrong?
But, is there a way in JavaScript to show users a Save-As dialog and write the content of "div" tag in a file on the Client system?
Use a regular HTTP request, not an AJAX (XMLHttpRequest) one.
function openReport(id)
{
var url = "../reports/reportsHandler.jsp?id=" + id;
window.location = url;
}
This will send an HTTP GET, not a POST, though it looks like GET is the correct HTTP method to use here anyway, since you're retrieving data and not actually altering anything on the server.

Categories

Resources