[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

load data to div from a link with ajax

Posted on 2007-11-25
3
Medium Priority
?
1,934 Views
Last Modified: 2011-02-18
Hi,

I have a simple html page with a link and a div at the foot of the page. I need to be able to clear the content of the div, and then render the contents of an external file (text, html or xml is fine) to this div.

Basically, when a user clicks on this link the div will be cleared and then populated with this new text. Is this possible with Ajax, or is there a better way? I need it to be dynamic (ie: no page refreshes).

Any examples of this type of action?

Any help appreciated.

Thanks
0
Comment
Question by:nhay59
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 14

Expert Comment

by:steveberzins
ID: 20348173
probably...

what server side language/technology?

by external, I'm assuming this file is on the web server or can be accessed by the web server?

here is a simple example using a textbox to display the result, you'd just change it to set the innerHTML(or innerText maybe) of your div instead of the inputs .value

http://www.w3schools.com/ajax/ajax_example.asp


0
 
LVL 17

Accepted Solution

by:
gops1 earned 2000 total points
ID: 20349047
This one example demonstrating how it can be done locally at your system. Just create some dummy text file and test this code. You can also use HTML file but not XML file. Here is the code:

<html>
	<head>
		<title>Script Demo Gops</title>
		<style>
			body, table,input, select,span,a{font-family:verdana;font-size:xx-small;}
			body{margin:0px;padding:0px}
			#leftmenu{display:inline;width:19%;float:left:clear:right;margin-right:5px;padding-left:15px;height:500px;margin-top:20px;}
			#container{display:inline;width:80%;float:right:clear:left;margin-top:20px;height:500px;overflow:auto;}
			#leftmenu a{display:block;text-decoration:none;padding:5px 0px 5px 0px;}
			#leftmenu a:hover{text-decoration:underline}
		</style>
		<script language="javascript">
			function ajaxpage(url, containerid){
				var page_request = false
				if (window.XMLHttpRequest) // if Mozilla, Safari etc
					page_request = new XMLHttpRequest()
				else if (window.ActiveXObject){ // if IE
					try {
						page_request = new ActiveXObject("Msxml2.XMLHTTP")
					}catch (e){
						try{
							page_request = new ActiveXObject("Microsoft.XMLHTTP")
						}catch (e){}
					}
				} else return false
 
 
				page_request.onreadystatechange=function(){
					loadpage(page_request, containerid)
				}
 
				page_request.open('GET', url, true)
				page_request.send(null)
			}
 
			function loadpage(page_request, containerid){
				if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
					document.getElementById(containerid).innerHTML=page_request.responseText
			}
 
			window.onload=function(){
				ajaxpage('file1.txt', 'container');
			}
		</script>
	</head>
	<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
		<div id="leftmenu">
			<a href="#" onclick="ajaxpage('file1.txt', 'container');return false;">File 1</a>
			<a href="#" onclick="ajaxpage('file2.txt', 'container');return false;">File 2</a>
			<a href="#" onclick="ajaxpage('file3.txt', 'container');return false;">File 3</a>
		</div>
		<div id="container">
 
		</div>
	</body>
</html>

Open in new window

0
 

Author Closing Comment

by:nhay59
ID: 31410912
Hi,

Thanks for the solution, it works exactly as required.

Enjoy your week.

Thanks
0

Featured Post

Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

These days, all we hear about hacktivists took down so and so websites and retrieved thousands of user’s data. One of the techniques to get unauthorized access to database is by performing SQL injection. This article is quite lengthy which gives bas…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question