Load html page content(require jquery scripting support) into a div using ajax/jquery
Question
I am a new user here, I want to inform you all that i had thoroughly searched regarding my problem but the solution i found doesn't work perfectly.
Here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>R A</title>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css"
/>
<script type="text/javascript" src="script/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="script/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="script/accord.js"></script>
<script type="text/javascript" src="script/jquery.nivo.slider.js"></script>
<script>
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random',
directionNavHide: false,
pauseOnHover: true,
captionOpacity: 1,
prevText: '<',
nextText: '>'
});
});
</script>
<script type="text/javascript" src="script/loadcontent.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<img class="headright" src="images/leaf-Rt.gif" width="48" height="50" alt="#">
<img class="headright" src="images/pine-cone-Rt.gif" width="58"
height="50" alt="#">
<img class="headleft" src="images/leaf-Lt.gif" width="48" height="50" alt="#">
<img class="headleft" src="images/pine-cone-Lt.gif" width="58" height="50" alt="#">
<h1><i>R F I</i></h1>
<h2><i>XYZ</i></h2>
</div>
<ul id="menu">
<li><a id="link1" href"#">Home</a></li>
<li>
<a href="#">Products</a>
<ul>
<li>
<a href="#">Agarbatti</a>
<ul>
<li><a href='#'>Raw</a></li>
<li><a href='#'>Scented</a></li>
<li><a href='#'>Flora</a></li>
</ul>
</li>
<li>
<a href="#">Dhoop</a>
<ul>
<li><a href='#'>Soft / Wet</a></li>
<li><a href='#'>Sticks</a></li>
<li><a href='#'>Cone</a></li>
<li><a href='#'>Sambrani</a></li>
</ul>
</li>
<li>
<a href='#'>Loban</a>
<ul>
<li><a href='#'>Powder</a></li>
<li><a href='#'>Hard</a></li>
</ul>
</li>
<li><a href='#'>Candles</a>
<ul>
<li><a href='#'>Rose Candles</a></li>
<li><a href='#'>Decorative Candles</a></li>
<li><a href='#'>Royal Candles</a></li>
<li><a href='#'>Heart Candles</a></li>
<li><a href='#'>Orchid Candles</a></li>
<li><a href='#'>Floating Candles</a></li>
<li><a href='#'>Ball Candles</a></li>
<li><a href='#'>Christmas Candles</a></li>
<li><a href='#'>Pillar Candles</a></li>
<li><a href='#'>Gourmet Candles</a></li>
</ul>
</li>
<li ><a href='#'>Stands</a>
<ul>
<li><a href='#'>Agarbatti / Incense</a></li>
<li><a href='#'>Loban Stands</a></li>
<li><a href='#'>Dhoops Stands</a></li>
<li><a href='#'>Candle Stands</a></li>
</ul>
</li>
<li ><a href='#'>Puja Items</a>
<ul>
<li><a href='#'>Camphor</a></li>
<li><a href='#'>Cow's Ghee</a></li>
<li><a href='#'>Rumal/Chundari</a></li>
<li><a href='#'>Mukut</a></li>
<li><a href='#'>Mala</a></li>
<li><a href='#'>Hawan Samagri</a></li>
<li><a href='#'>Cotton</a></li>
<li><a href='#'>Janva</a></li>
<li><a href='#'>Gau Mutr</a></li>
</ul>
</li>
<li ><a href='#'>Mehndi</a></li>
<li ><a href='#'>Napthelene Balls</a></li>
<li ><a href='#'>Perfumes & Attars</a></li>
</ul>
</li>
<li><a href="#">Testimonials</a></li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">Trade Enquiry</a>
</li>
</ul>
<div id="outer">
<div class="inner">
<div id="main" align="center">
</div><!--end main-->
<div id="left">
<div id='cssmenu' style="top:2px">
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Incense Sticks</span></a>
<ul>
<li><a href='#'><span>Raw</span></a></li>
<li><a href='#'><span>Scented</span></a></li>
<li class='last'><a href='#'><span>Flora</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Dhoop</span></a>
<ul>
<li><a href='#'><span>Soft / Wet</span></a></li>
<li><a href='#'><span>Sticks</span></a></li>
<li><a href='#'><span>Cone</span></a></li>
<li class='last'><a href='#'><span>Sambrani</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Loban</span></a>
<ul>
<li><a href='#'><span>Powder</span></a></li>
<li class='last'><a href='#'><span>Hard</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Candles</span></a>
<ul>
<li><a href='#'><span>Rose Candles</span></a></li>
<li><a href='#'><span>Decorative Candles</span></a></li>
<li><a href='#'><span>Royal Candles</span></a></li>
<li><a href='#'><span>Heart Candles</span></a></li>
<li><a href='#'><span>Orchid Candles</span></a></li>
<li><a href='#'><span>Floating Candles</span></a></li>
<li><a href='#'><span>Ball Candles</span></a></li>
<li><a href='#'><span>Christmas Candles</span></a></li>
<li><a href='#'><span>Pillar Candles</span></a></li>
<li class='last'><a href='#'><span>Gourmet Candles</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Stands</span></a>
<ul>
<li><a href='#'><span>Agarbatti / Incense</span></a></li>
<li><a href='#'><span>Loban Stands</span></a></li>
<li><a href='#'><span>Dhoops Stands</span></a></li>
<li class='last'><a href='#'><span>Candle Stands</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Puja Items</span></a>
<ul>
<li><a href='#'><span>Camphor</span></a></li>
<li><a href='#'><span>Cow's Ghee</span></a></li>
<li><a href='#'><span>Rumal/Chundari</span></a></li>
<li><a href='#'><span>Mukut</span></a></li>
<li><a href='#'><span>Mala</span></a></li>
<li><a href='#'><span>Hawan Samagri</span></a></li>
<li><a href='#'><span>Cotton</span></a></li>
<li><a href='#'><span>Janva</span></a></li>
<li class='last'><a href='#'><span>Gau Mutr</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>Mehndi</span></a></li>
<li class='last'><a href='#'><span>Napthelene Balls</span></a></li>
<li class='last'><a href='#'><span>Air Freshner</span></a></li>
<li class='last'><a href='#'><span>Perfumes & Attars</span></a></li>
</ul>
</div>
</div><!--end left-->
<div class="clearer"></div>
</div><!--end inner-->
<div class="clearer"></div>
</div><!--end outer-->
<div id="footer" >
<!-- <div class="iconleft">
<a href="http://validator.w3.org/check?uri=referer"><img src="images/html-
blue.png" alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
</div>
<div class="iconright">
<a href="http://jigsaw.w3.org/css-validator/"><img src="images/css-blue.png"
alt="Valid CSS!" height="31" width="88"></a>
</div>-->
<p style="text-align:center;color:#FFF"> Copyright ©2013</p>
</div><!--end footer-->
</div><!--end wrapper-->
<div id="bodyfooter"></div>
</div>
</body>
</html>
Now what I want to do here is that when i click my menu for home with id "#link1" the div of my main page ie "#main" should load with en external html file home.html
home.html
<br /><br />
<div class="slider-wrapper futurico-theme" >
<div id="slider" class="nivoSlider">
<img src="image/slideshow/cycleall.jpg" alt="">
<img src="image/slideshow/All-in-1.jpg" alt="">
<img src="image/slideshow/ECO.jpg" alt="">
<img src="image/slideshow/Fairy-Tale.jpg" alt="">
<img src="image/slideshow/Heritage.jpg" alt="" />
<img src="image/slideshow/honey.jpg" />
<img src="image/slideshow/incense.jpg" />
<img src="image/slideshow/Moods.jpg" />
<img src="image/slideshow/Morning.jpg" />
<img src="image/slideshow/Natya.jpg" />
<img src="image/slideshow/Prestige.jpg" />
<img src="image/slideshow/Sandalum.jpg" />
<img src="image/slideshow/Three.jpg" />
<img src="image/slideshow/wood.jpg" />
</div>
<div id="caption1" class="nivo-html-caption">
<strong>New Project</strong> <span></span> <em>Some description
here</em>.
</div>
<div id="caption3" class="nivo-html-caption">
<strong>Image 3</strong> <span></span> <em>Some description
here</em>.
</div>
</div>
<br /><br />
<script type="text/javascript" src="script/jquery.nivo.slider.js"></script>
<script>
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random',
directionNavHide: false,
pauseOnHover: true,
captionOpacity: 1,
prevText: '<',
nextText: '>'
});
});
</script>
I had used following code but it takes me to new page instead of loading the page in the "#main" div.
jQuery(document).ready(function(){
$('#link1').on('click', 'a', function(e){ //step 1
e.preventDefault(); //prevent default action, step2
var url = url("content/home.html"); //get the url, step 2
$.ajax({ //step 3
type: 'GET',
url: url,
//your other options
success: function(data){ //on success
$('#main').html(data); //update your div, step 4
}
});
});
});
Previously I had tried following code, which works but the Jquery script doesn't work with it
$(document).ready(function () {
$(document).on('click', '#link1', function (e) {
$('#main').load("content/home.html");
e.preventDefault();
});
});
Here is what I am getting
http://i40.tinypic.com/2nsncs4.jpg
Here is what I Want
http://i42.tinypic.com/tapoaa.jpg
Please help me out i am struck ed. Thank you.
2 answers
solution1
0 2014-01-19 17:11:24
Things where you are wrong:
- The way you are Binding event on
#link1, this should be$(container).on(event, target, function) - url should be string, I don't understand what is
url("url.html")
Try this:
$(document).ready(function () {
$(document).on('click', '#link1', function (e) {
var url = "content/home.html";
e.preventDefault();
$.ajax({
type : 'GET',
url : url,
//your other options
success : function (data) {
$('#main').html(data);
}
});
});
});
Or instead on $.ajax() , you can simply do $.load() like:
$(document).ready(function () {
$(document).on('click', '#link1', function (e) {
$('#main').load("content/home.html");
e.preventDefault();
});
});
solution2
0 2014-01-19 17:22:30
You don't need the whole $.ajax request stuff you can use straight the .load method from query
$( "#main" ).load( "our external url" );
However if you have a complete html page in your external url, the whole page will be loaded inside your #main element. This means duplicate html, body and etc. tags. I guess this is not the result you expect.
If you like to load only a particular part of the remote / external page, use a content selector inside the .load method
$( "#main" ).load( "ajax/test.html #container" );
So you will load only the content of the element with container id from the external page into your #main element.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I load html page content inside of an HTML div using jQuery/AJAX?
Using jQuery to load a page that require javascript in a div
jQuery/Ajax Load external page into content div
How to load html page in div using AJAX and JQuery
Load content into div of external html page with JQuery
call external page & load dynamic content into DIV with AJAX/Jquery
load DIV content from other domain using JQuery load/ajax
jQuery ajax load content of a div on another page does not work
Load content from another div on same page with on select from dropdown using jQuery/Ajax
Use JQuery Ajax to load static html page to a div tag
Related Tags