AJAX document.getElementById().innerHTML problem with IE? - javascript

Before someone said that I did not read I may say that I read almost everything linked with my question. But I couldn't find my answer.
So, I have a simple AJAX script that loads my external file inside predefined div. This is the code of those script:
function loadTwitter()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your Browser Don't Support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.getElementById("column_twitter").innerHTML=xmlHttp.responseText;
}
}
xmlHttp.open("GET","../includes/home/twitter.php",true);
xmlHttp.send(null);
}
It works just fine in everyone browser that I test (FF, Opera, Chrome, Safari), but inside IE7 don't want to inject my external php file into predefined div. It always stays the default text that I wright inside div...
And I think that the problem is in this row:
document.getElementById("column_twitter").innerHTML=xmlHttp.responseText;
So, any suggestions how to fix this for IE (7 and above)?

I think you'd be better off using a javascript framework such as jQuery that allows you to concentrate on getting your features implemented rather than browser compatibility and low level network interaction. Using jQuery you could simply do:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
$.get( '../includes/home/twitter.php', function(data) {
$('#column_twitter').html( data );
});
</script>

I know that this is an old question, but I ran into a similar thing today and I wanted to post it out for others in case you experience this issue. This is likely being caused by your "column_twitter" tag being embedded in multiple DIV statements or in a table. IE7 doesn't like this for some reason.
Good Luck!

Related

$_REQUEST array empty on IE11 (windows 8 version 11.0.9600.17937) from xmlHttpRequest, works on Firefox and Chrome

I have looked thoroughly on google and stack overflow's history but nothing has fixed my issue.
I have a login feature to my website application which works on Firefox and Chrome with no problem. It also works on IE for every version but one specific version: 11.0.9600.17937 which is for windows 8. My customers are the one who have notified me of this because I have windows 7 and there is no problem on my version of IE11 so I cannot test against the actual issue without asking them to try.
From what I have debugged it appears that my variables are not being passed to the login page via xmlhttprequest because it is not passing my validations to test if the variables are passed in. Once again the validations pass in Firefox and Chrome.
Here is my xmlhttprequest in Javascript:
function sendUser(form)
{
var busloginID=document.forms[0].busloginID.value;
var buspassword=document.forms[0].buspassword.value;
var userData = [busloginID, buspassword, 'BUS'];
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("login").innerHTML=xmlhttp.responseText;
if(document.getElementById("loginSuccess"))
{
form.submit();
}
}
}
xmlhttp.open("GET","login.php?userData="+userData,true);
xmlhttp.send();
}
And here is the code receiving the xmlhttprequest on login.php:
$data = $_REQUEST['userData'];
$userDataArray = explode(",", $data);
$loginID=$userDataArray[0];
$password=$userDataArray[1];
$originFlag=$userDataArray[2];
These variables are not getting passed on this version of IE11, only this specific version.
Any suggestions are appreciated, I feel like I have tried everything.
Thanks
Jake
I substituted $_GET for $_REQUEST when requesting the variables on login.php and the user having the problem stopped experiencing issues. Not sure why that would fix it so it was either the substitution or user error by the client.

Can't get xmlhttp.responseText value

I am trying to get the xmlhttp.responseText value, but I have no response from the xmlhttp. I was wondering if there is something wrong with my code:
SCRIPT
var xmlhttp;
function show(){
loadXMLDoc("includes/edit.php",function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);
}
});
}
function loadXMLDoc(url,cfunc){
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=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
HTML
< a href="#" style="text-align: right; font-size: 10px;" onclick="show()">SHOW</a>
EDIT.PHP
print "1";
I don't see anything wrong with your code per se, but there are a lot of interactions that are opaque from this code snippet.
I can offer some troubleshooting tips, however:
Add a console log in your callback function (the one that you are running alert() in). Just "console.log('function is running');" on the first line. Then see if you get that far. I would put one in the opening line of show() as well -- maybe your click event isn't doing what you think it is.
Have your PHP server-side file write something to a log so you can be sure that the request is being received where you think it is.
Open your browser developer console and watch the network panel. You should be able to see the entire XHR transaction there. Is it being sent at all? If so, is it returning the content you expect?
If all this doesn't help, setup a test in jsfiddle and post the link here. We'll be able to help in a lot more detail that way.
Good luck.

What should be the ideal fallback method?

I am using Ajax to call for a special file if JavaScript is enabled and if it is disabled then it loads the regular file.
My Code is like this:
window.onload = function() {
document
.getElementById("wrapper")
.innerHTML = "<img src='cdn/img/demo/loading.gif'>";
var x = null;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
var x = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// code for IE6, IE5
var x = new ActiveXObject('MSXML2.XMLHTTP.3.0');
} else {
// #TODO - Fallback
// My Question : What should be an ideal Fallback method here?
}
x.open("GET", "js_enabled.php", true);
x.send("");
x.onreadystatechange = function() {
if (x.readyState == 4) {
if (x.status == 200)
document.getElementById("wrapper").innerHTML = x.responseText;
else
document.getElementById("wrapper").innerHTML = "Error loading document";
}
}
}
What should be an ideal Fallback method in the first block?
UPDATE:
The fallback is for the browsers. As you see that those commands are for IE and normal browsers. I want to know if god forbid some browser does not understand ant of those 2 commands then what?
AJAX is extremely likely to be available if JS is available, so it's not something you'll have to deal with often, but if you're looking for a fallback when AJAX isn't available (which I'm guessing you are from your code example), then the only real way of doing that is making sure that your page works fine without it.
Links should point to appropriate pages (or just to reloading the current page) and then be overwritten with the JS to use AJAX (but only if AJAX is available). That way you'll have a functioning site even if JS isn't available, let alone if AJAX isn't.
To give you some idea of how small the problem is when it comes to lack of AJAX support, according to this site browsers that include AJAX support include the following:
Internet Explorer 5.0 and up
Opera 7.6 and up
Netscape 7.1 and up
Firefox 1.0 and up
Safari 1.2
As you can see, that's some pretty old stuff.
you are confused if javascript is disabled then there will be no fallback method. Assuming that you mean anabling/disabling of javascript.
Then what you do is fill up the area with default text and hide it using js. so if JS isnt enabled the default text will be shown to the user.
and if js is enabled the default text will be hidden almost as soon as it is rendered and then your ajax thing will take over

Javascript is working on Safari, but fails on others

There is some problem that I can't find out why the code worked on Safari, but failed on other browsers.
There is the html part
and the main javascript part.
The main problem that I find is:
While executing the function downloadurl(url, function), cannot find the XML tags "Info", and the markers array length is 0 on many browsers. However, it's ok on Safari. The part of javascript code is like:
downloadUrl("http://travel-taoyuan.tycg.gov.tw/content/travel/xmlcontentlist1.aspx", function(doc) {
var xml = xmlParse(doc);
var markers = xml.documentElement.getElementsByTagName("Info");
......
To alert markers, it will return "0".
And actually it should be "174"(Safari's result).
Thanks for answering my question.
hmmm, seems to be a syntax error. Different browsers will use a different syntax, and so it won't execute (or at best, not properly if your lucky).
Try something along the lines of....
<script type="text/javascript">
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","http://travel-taoyuan.tycg.gov.tw/content/travel/xmlcontentlist1.aspx",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("theMainTagName"); //TODO: this is the main tag ^(see note)
for (i=0;i<x.length;i++)
{
//TODO: code to handle each xml element
//this is the code to get the value from a particular tag: x[i].getElementsByTagName("theTagName")[0].childNodes[0].nodeValue
}
</script>
NOTE: ^the 'main' tag is, for example, in the case of this xml document, the 'main' tag is 'CATALOG'
Hope this helps. Sorry if it's not very clear, been a while since I worked with xml/javascript. Comment if you want further explanation

Porting Issue - Internet Explorer to Everything Else

I have some code which was developed on a Windows 7 computer and runs any Windows 7 compeer without any hiccups. I tried running it on my Mac and the program just stays on the loading page.
The program displays the bing maps view and loads a few things in order to get the location of a particular satellite. Now all the maths and stuff works but I think the problem lies here:
function getOrbitalElements()
{
TLE_Line1="";
TLE_Line2="";
pgTXT = "";
xmlhttp = null;
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange = stateChange;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
}
So is there any way that this can be changed to run on any browser? Thanks
P.S. If you need to see the entire code I'll add it
There are no ActiveX objects on Mac. The following line won't work:
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
You could use XMLHttpRequest:
var xmlhttp = null;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp != null) {
...
}
But if you are seeking best cross browser support I would recommend you using a javascript framework such as jQuery to perform your AJAX requests.
Replace
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
with
xmlhttp = window.ActiveXObject?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest();
EDIT
As others have said, you might find benefit in using something like jQuery (which is very good) but you may not need to take the effort to adjust your existing code just yet. If you have written good (standards) javascript, you will find the browser cross-compatibility issues should be minimal.
In the future, be sure to test in other browsers early and often to avoid this kind of problem.
The best way to port a particular web app from a Browser specific version to a browser agnostic one is to use a javascript framework like jQuery. It's designed to smooth out the rough edges that come up between different browsers into a friendly + unified API. For example the above code could be done across multiple browsers with a jQuery ajax request
$.ajax({
url: url,
success: function () {
// Called when the query completes
statechange();
}});

Categories

Resources