I have the following black of code which is working perfectly fine on Chrome & Firefox but fails everytime on IE, it returns "undefined" in the console tab.
<html>
<head>
<script type="text/javascript" charset="utf-8" src="/js/jquery-latest.js"></script>
<script>
$(document).ready(function()
{
test();
});
function test()
{
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","/xml/products.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var list = xmlDoc.getElementsByTagName("product");
console.log(list[0].childNodes[1].innerHTML);
}
</script>
</head>
</html>
The XML i'm using is the following :
Thanks for your time.
EDIT: jQuery ajax version not working either:
var xmlDoc;
$.ajax({
type: "GET",
url: "/xml/products.xml",
dataType: "xml",
success: function (xml) {
xmlDoc = xml;
var list=xmlDoc.getElementsByTagName("product");
console.log(list[1].childNodes[1].innerHTML );
}
});
No idea why this works in Chrome and FF, it shouldn't actually1.
You are loading an XML document, and are successfully selecting an XML element node. Those don't have innerHTML properties2. You should use an XMLSerializer if you really need to get the markup of your xml document (maybe you're just looking for the .textContent?).
var el = list[0].childNodes[1];
console.log(new XMLSerializer().serializeToString(el));
However, oldIE doesn't even know that, you'll need to use el.xml for them3.
1: At least not in older versions. See also does innerHTML work with XML Elements?.
2: Apparently, the DOM Parsing spec now includes a generic innerHTML attribute on all DOM elements
3: see JavaScript: Replacement for XMLSerializer.serializeToString()?
Related
I have a webservice that I can trigger to do various stuff by typing in the URL in a browser with some defined parameters:
Example:
http://hsserver/HomeSeer_REST_API.aspx?function=setdevicebyname¶m1=bedroomlight¶m2=on
I am building a web front end in plain HTML but cannot find a way to do this trigger without opening a new page in the broswer.
It would be preferable if it was a function like:
UPDATE: Got it to work with this code, but cant get the parameters to work (func,param1,param2) when I call it with
<button type="button" onclick="processnew('setdevicebyname','bedroom desktop light','off')">processnew</button>
function processnew(func,param1,param2)
{
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","HomeSeer_REST_API.aspx?function=setdevicebyname¶m1=bedroom%20desktop%20light¶m2=off",true);
xmlhttp.send();
I have no clue where to look for this - hoping for some help
XHR baby.
http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
or jquery's abstraction [ajax generic, or post/get for shortcuts]
http://api.jquery.com/jquery.ajax/
well... that would be a simple HTTP GET request.
if you use jQuery, check this out: http://api.jquery.com/jquery.get/
if you want to stick to plain javascript (I wouldn't recommend that though due to some incompatibilities across browsers): http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
Try jQuery
$.ajax({
url: 'http://hsserver/HomeSeer_REST_API.aspx?function=setdevicebyname¶m1=bedroomlight¶m2=on',
method: 'GET' // HTTP request method
}).done(function(data) {
console.log('Response from server: ' + data);
});
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
I've run into an issue with a simple javascript code, which is pretty much just a copy of the code here: http://www.w3schools.com/xml/xml_to_html.asp
<html>
<head>
<script type="text/javascript">
function displayMain()
{
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","catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("VAR");
i=0;
variable1=(x[i].getElementsByTagName("VARIABLE")[0].childNodes[0].nodeValue);
name1=(x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue);
value1=(x[i].getElementsByTagName("VALUE")[0].childNodes[0].nodeValue);
txt="Variable: " + variable1 + "<br />Name: " + name1 + "<br />Value: "+ value1;
document.getElementById("mainDiv").innerHTML=txt;
}
</script>
</head>
<body onload="displayMain(); setInterval('displayMain()', 1000)">
<div id='mainDiv'></div>
</body>
</html>
All I want to do is change the xml file and thus have the new value updated on the page. So for instance I change the value in the xml file it will reflect in the html page. It works great on Firefox and Chrome, but not on IExplorer. IE just keeps my old value in there, even when I refresh the page. The only way I can get it to update is by deleting the temp. files and history. Does anyone know a way around this? It dosn't seem very practical for a user to have to all that.
GET requests are cached. Set no cache headers on the server.
or
Append a random query string parameter
xmlhttp.open("GET","catalog.xml?qs=" + new Date().getTime(),false);
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!
I have one js file with a ajax call which is working fine in IE6, but not in IE7 or FF. Can somebody help?
window.onload = function() {
var xmlhttp;
var url = "myurl";
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
debugger;
alert("Hello");
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
alert(xmlhttp.responseText);
}
}
}
In IE7 I am getting access denied error. Please help.
EDIT:
I am now trying it using jQuery,
Code:
$(function() {
$.ajax(
{
type: "GET",
url: "myurl",
datatype: "html",
success: function(xhtml) {
$("#con").html(xhtml);
},
error: function() {
displayMessage(......);
}
});
});
Still its working in IE6 but not in Others.If its a cross domain issue, then how to solve this?
It might be some security issues. See if it works by adding all url's you use here to the trusted sites list.
IE6 has known bugs/issues when it comes to Javascript and cross-domain policy. This is why (amongst other reasons) that IE6 is no longer being supported in terms of cross-browser compatibility by many large organizations (why encourage something that has such a vulnerability?)
My guess, then, is that your var url = "myurl" is pointing to something on another domain or subdomain. But we need more details to be sure.