Solved

load data to div from a link with ajax

Posted on 2007-11-25
3
1,907 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
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 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
IFRAME in a ASPX file no longer working 3 24
Issue in webpage 6 33
Transform XML to Excel using XSL 1 23
Apply tab index in forms 6 33
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

943 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now