ad

Load External File With jQuery

load

Sometimes we need to show the content from an external file on a web page. If you are thinking to load it from IFRAME, you are going to do it wrong. And what if i ask to load content dynamically based on user input. It should be done with a better way. In this tutorial, i am going to show how you can load external file on a web page dynamically with jQuery. I have added a demo and downloadable script in the post.

Demo Download

We will use load function to load external file. I will add new.html file to the div loaded. 

$(".loaded").load('new.html');

 Code

<!--
created by Deepanker Verma
Website: http://www.webtips.in

--->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.7.1/jquery.min.js"></script>
<title>Load external files with jQuery - Webtips Demo</title>
<style>
body{
width:500px;
margin-left:100px;
}
.loaded
{
border:1px solid;
border-radius:6px;
-moz-border-radius:6px;
padding: 5px 5px 5px 5px;
display:none;
}
</style>
<script type="text/javascript">
$(function() {
$(".button").click(function() {
$(this).hide();
/* Load the external file */
$(".loaded").show();
$(".loaded").load('new.html', function() {
});
});
});

</script>
</head>
<body>
<h2>Click on the button to load external files</h2>
<input type="button" class="button" value="load File" />
<div class="loaded"></div>
<br />
<a href="#">Click to go back to the tutorial</a>
</body>
</html>

Now create a HTML file and put some content on it. Save this file as new.html in the same directory.

Comment below if you have any problem in implementation.

Tags: |
Nord VPN Sale

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.


Similar Articles

0 Comments

Leave a comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 UseThisTip | Developed By Deepanker