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);
}
}
Related
I have been trying to use the XMLHttpRequest to read a text file and display the text. The text file I is going to be linked externally. So far I have the following code
<!DOCTYPE html>
<html>
<body>
<h2>Using the XMLHttpRequest object</h2>
<script>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", XMLHttpRequest.txt, true);
</script>
</script>
</body>
</html>
I do not see my text file showing up and I am completely lost. I looked around on stack overflow already for answers and I did not find anything.
You haven't specified where your text file is located.
Here's an example of a working XMLHttpRequest with a remote api (not a real api endpoint, just an example url). You could adapt this to use a text file instead of json. Remember to call your function in the end! findCity( city ) for instance.
function findCity(elem) {
let xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
document.getElementById("city").value = xmlhttp.responseText;
}
else if (xmlhttp.status == 400) {
alert('There was an error 400');
}
else {
alert('something else other than 200 was returned');
}
}
};
xmlhttp.open("GET", "https://api.example.com/api/postcodes.json?pnr=" + elem.value + '&clientUrl=http://localhost', true);
xmlhttp.send();
}
using the code below, by clicking a link in my nav menu, i get an html page in a certain div (InnerHTML), but, i have my menu il css style, and after clicking a link and getting the page to the div , it seems that my nav li css is corrupted and gets the css style of the page i clicket and got within the div... how can i avoid getting the css with the page im requesting please demonstrate me, i cant find something related.
thank you.
<script>
function processAjax(url) {
if (window.XMLHttpRequest) { // Non-IE browsers
req = new XMLHttpRequest();
req.onreadystatechange = targetDiv;
try {
req.open("GET", url, true);
} catch (e) {
alert(e);
}
req.send(null);
} else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = targetDiv;
req.open("GET", url, true);
req.send();
}
}
return false;
}
function targetDiv() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
document.getElementById("containerDiv").innerHTML = req.responseText;
} else {
alert("Problem: " + req.statusText);
}
}
}
</script>
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
I have some ajax code in an html doc that changes the text of a button to text stored in another html doc in the same domain. The text is in the body tag of the second html document.Like this:
<body> Text</body>
So the code makes an ajax request, parses the response to create an xmldoc. When I try to use the
getElementByTagName("body") or even getElementByTagName("html")
I get an emepty HTMLcollection. But when I use the
queryselector("body") I can get to the text. The log to console prints undefined.
Here's the full code:
function gettxt()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "http://localhost/ajax2.html", true);
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState === 4) {
if (xmlhttp.status === 200)
{
allText = xmlhttp.responseText;
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(allText, "application/xml");
var bodyobj=xmlDoc.getElementsByTagName("body");
console.log(bodyobj.lemgth);
document.getElementById("secbtn").value=bodyobj;
}
}
}
xmlhttp.send(null);
}
What am I missing? Thanks.
I know what I was doing wrong. I was setting the button's text to bodyobj instead of bodyobj[0].innerHTML.
The page has a textbox and a submit button. The textbox accepts an item. On adding an item, the list on the page should refresh and display new items using ajax.
The previous items should remain.
the code i've written so far:
1) 123.html:
<html>
<head>
<title>PHP using AJAX</title>
<script type="text/javascript">
var time_variable;
function getXMLObject() //XML OBJECT
{
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") // For Old Microsoft Browsers
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") // For Microsoft IE 6.0+
}
catch (e2) {
xmlHttp = false // No Browser accepts the XMLHTTP Object then false
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest(); //For Mozilla, Opera Browsers
}
return xmlHttp; // Mandatory Statement returning the ajax object created
}
var xmlhttp = new getXMLObject(); //xmlhttp holds the ajax object
function ajaxFunction() {
var getdate = new Date(); //Used to prevent caching during ajax call
if(xmlhttp) {
var txtname = document.getElementById("txtname");
xmlhttp.open("POST","321.php",true); //calling 321.php using POST method
xmlhttp.onreadystatechange = handleServerResponse;
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send("txtname=" + txtname.value); //Posting txtname to PHP File
}
}
function handleServerResponse() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
document.getElementById("message").innerHTML=xmlhttp.responseText; //Update the HTML Form element
}
else {
alert("Error during AJAX call. Please try again");
}
}
}
</script>
<body>
<form name="myForm">
<table>
<tr>
<td>Enter Name</td>
<td><input type="text" name="txtname" id="txtname" /></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Submit" onclick="ajaxFunction();" /></td>
</tr>
</table>
<div id="message" name="message"></div>
</form>
</body>
</head>
</html>
2)321.php
<?php
$a = $_POST["txtname"];
echo ".$a.";
?>
I am able to get output list of items(what i enter in textbox) on the same page without refreshing.
wanted to know how i could add to the list keeping the previous items intact. i.e. update list keeping previous output
thanks.
DO you wish to write us the code ?
You can get some samples here
http://sillythingsthatmatter.com/ajax/ajax3.php