i am using the below code from w3schools to load xml data into my html page.BUt its working in mozilla browser only, no other browser is giving any output...Please check the code for the necessary changes to be made
<html>
<head>
<script>
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;
}
function displayResult()
{
xml=loadXMLDoc("cdcatalog.xml");
xsl=loadXMLDoc("cdcatalog.xsl");
// code for IE
if (window.ActiveXObject)
{
ex=xml.transformNode(xsl);
document.getElementById("example").innerHTML=ex;
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
xsltProcessor=new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml,document);
document.getElementById("example").appendChild(resultDocument);
}
}
</script>
</head>
<body onload="displayResult()">
<div id="example" />
</body>
</html>
use this line
xml=new ActiveXObject("Microsoft.XMLDOM");
instead of
xml=new ActiveXObject("Microsoft.XMLHTTP");
it works
Related
i've been using an online tutorial on how to use ajax to create a new element dependent on the users input. At the moment, all it will do is replace an already made div's innerhtml however I would like to create a new div and fill it with the input designated by the user. Here is my current code:
AJAX:
<script>
function showType(str)
{
if (str=="")
{
document.getElementById("Answer").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)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ASPScripts/QuestionDesign.asp?q="+str,true);
xmlhttp.send();
}
</script>
ASP
<%
response.expires=-1
dim q
q=request.querystring("q")
response.write("<input type='" & q & "'/>")
%>
Any ideas on how to do this? I'm aware its probably a very simple answer, i'm just very new to this stuff
basically, what you are asking is how to append a new element to the DOM:
var newDiv = document.createElement("div");
newDiv.innherHtml = xmlhttp.responseText;
document.getElementById("newDivParent").appendChild(newDiv);
EDIT: you can paste this code in console (f12 in chrome) right here on this page to see how it works:
var newDiv = document.createElement("div");
newDiv.setAttribute('style', 'position:fixed; top:0; left:0; right:0; bottom:0; z- index:10000000; background-color:red;' )
document.body.appendChild(newDiv);
I thought that changing accents chars with
$GLOBALS['normalizeChars'] = array(
'Á'=>'Á', 'É'=>'É', 'Í'=>'Í', 'Ó'=>'Ó', 'Ú'=>'Ú', 'Ñ'=>'Ñ',
'á'=>'á', 'é'=>'é', 'í'=>'í', 'ó'=>'ó', 'ú'=>'ú', 'ñ'=>'ñ'
);
and this function ...
function MakeIt($toClean){
return strtr($toClean, $GLOBALS['normalizeChars']);
}
... will help me to replace áéíóúñ to a á etc...
But i'm still in trouble.
mainfile.php calls to a get_data.php that read mySQL content which uses MakeIt(); to replace invalid chars. If I load get_data.php into a browser, chars are replaced correctly but when it's loaded from mainfile.php it returns invalid chars.
mainfile.php
<script>
function ShowData(str)
{
if (str=="")
{
document.getElementById("deal_rcpt").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)
{
document.getElementById("deal_rcpt").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","get_data.php?event="+str,true);
xmlhttp.send();
}
ShowData(1)
</script>
<div id="deal_rcpt"></div>
I think xmlhttp is not compatible with áéíóúñ chars.
This is my code that works fine in firefox however it does not in chrome. When I debug the page, the text area is created but it is out of the chromes screen. I was getting a webkit error while I was using lower version of jquery and with a recommendation I start to use this version. It solves the error message but it does not solve the actual problem.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript">
function loadAddressXML(address) {
var file = "http://maps.googleapis.com/maps/api/geocode/xml?address=" + address + "&sensor=true";
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) {
xml2 = xmlhttp.responseText;
alert(xml);
}
}
xmlhttp.open("GET", file, false);
xmlhttp.send();
}
$(document).ready(function(){
$("#searchButton").click(function(){
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv');
newTextBoxDiv.html('<label>Enter Address: </label> ');
newTextBoxDiv.html('<input type = "text" id="searchBar" size="35" value="dfsfsdfsfsf"/>');
newTextBoxDiv.appendTo("body");
$("#searchButton").remove();
});
});
</script>
</head>
<body>
<input id="searchButton" type="button" value="Search Address"/>
</body>
I want a button on a webpage that, when pressed, does the equivalent of entering this url in the browser and hitting enter.
http://user:pass#www.example.com/example/button_24
The code below gives me the button but it seems that it doesn't want to pass the credentials, firebug says this:
Access to restricted URI denied" code: "1012
if i remove the credentials it says 401 Unauthorized
Thanks in advance!
<html>
<head>
<script type="text/javascript">
function simpleAjax()
{
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("Divku").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://user:pass#www.example.com/example/button_24",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="simpleAjax()">Request data</button>
<div id="Divku"></div>
</body>
</html>
new code
<head> <meta http-equiv="refresh" content="30" > </head>
<img alt="screenshot" src="http://a:a#www.example.com/example/screenshot.jpg">
<head>
<script type="text/javascript">
function simpleAjax()
{
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("Divku").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.setRequestHeader('Authorization','Basic YTph');
xmlhttp.open("GET","http://www.example.com/example/button_24",true);
xmlhttp.send();
}
</script>
</head>
<body>
<br>
<button type="button" onclick="simpleAjax()">Volume Up</button>
<div id="Divku"></div>
</body>
I think you need to setRequestHeader on the AJAX object and supply the Authentication header instead of passing it in the URL. Remember the server is looking for the header
Authorization: Basic abc123==
(or some facsimile).
Maybe check out this link on supplying credentials with AJAX requests?
ALSO, MDN on setRequestHeader method.
I'm a total newbie at web programming but I have to make a home page for college and i'm stuck. I have an html file that loads a .jsp page inside a div using ajax. I have a couple of links that load different files. My problem is that Firefox doesn't respond when I click on the links(No error message nor visible activity). In Internet Explorer on the other hand the first link(About Me) works just fine(loads the .jsp inside the div). My second link however (Photos) should load a .jsp containing javascript and that doesn't work on either browsers. In IE, the .jsp loads but the javascript doesnt`t work.
I would really appreciate some help. Here's my code:
mainPage:
<head>
<title>Titi's HomePage</title>
<link rel="stylesheet" type="text/css" href="homeStyle.css"/>
<script type="text/javascript">
function loadXMLDoc(file, div)
{
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById(div).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", file, true);
xmlhttp.send();
}
</script>
</head>
<body class="body">
<div align="center"><img src="images/header2.jpg" width="1074" height="162" /></div>
<div align="center">
<table width="1075" height="41" border="1" class="mainTable">
<tr>
<th width="215" scope="col">About Me</th>
<th width="227" scope="col">Photos</th>
</tr>
</table>
<table class="displayTable">
<tr>
<td><div id="display"></td>
</tr>
</table>
</div>
</body>
Photos.jsp
<head>
<title>Photos</title>
<SCRIPT language=JavaScript>
theImages = new Array("images/Constanta/c1.jpg", "images/Constanta/c2.jpg", "images/Constanta/c3.jpg","images/Constanta/c4.jpg");
function displayImages() {
for(x in theImages){
document.write('<img SRC="' +theImages[x]+' " width=80, height =80 onmouseover=addSource(\"'+theImages[x]+'\") onmouseout =removeSource()>');
}
}
function addSource(name){
document.getElementById("biggie").src = name;
var newImg = new Image();
newImg.src = name;
document.getElementById("biggie").height = newImg.height;
document.getElementById("biggie").width = newImg.width;
}
function removeSource(){
document.getElementById("biggie").src = "";
document.getElementById("biggie").height = 0;
document.getElementById("biggie").width = 0;
}
</SCRIPT>
</head>
<body>
<SCRIPT language=JavaScript>
displayImages();
</SCRIPT>
<br/>
<center><img src="" id="biggie" width="0" height="0" align="middle"></center>
</body>
if I load directly the Photos.jsp then it works just fine with both IE and FireFox but not through the links of the main page.
What am i doing wrong?? Keep in mind that I'm totally new to this so feel free to tutor me on anything :D
Thanks in advance!
You should try using something like this - but i am shure that is jQuery the best solution
I adjusted the code, so, now you have that what you need (like function which you suggested).
Main problem is callback function, because ajax call is asynchronous (there is option in jQuery where it can be synchronous call) and function returns undefined value before ajax call complete.
Now, in this function 'div' name is passed as function parameter, so you don't need function callback.
This code is tested on my computer in Firefox 3.6.13
function isIE(){return/msie/i.test(navigator.userAgent)&&!/opera/i.test(navigator.userAgent);}
function loadXMLDoc(filename, div)
{
try
{
if (isIE())
{
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
var xmlhttp = false;
}
if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
{
try
{
xmlhttp = new XMLHttpRequest();
}
catch (e)
{
xmlhttp = false;
}
}
if (!xmlhttp && window.createRequest)
{
try
{
xmlhttp = window.createRequest();
}
catch (e)
{
xmlhttp = false;
}
}
xmlhttp.open("GET", filename);
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4)
{
document.getElementById(div).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
catch (e)
{
alert(e);
}
}