my concept is to load html file from one to another one. The image below could explain better.For example, I have no1.html, no2.html,no3.html, no4.html ... and they share one JavaScript file, all html files have its own contents.
first HTML file no1.html loads no2.html, my javascript is for no1.html like, $('#element').load('no2.html #content'); then no2.html js is like $('#element').load('no3.html #content');
if all files just share one javascript file is unable to load html pages continuously, is there a way to make html loads another html continuously ?
I guess what you would like to do is something like this:
my.js
$(function() {
// delegate click event to ajax content
$("body").on("click",".load_button",function() {
$(this).hide(); // hide this button
var area_name = $(this).data("area");
var next_file = $(this).data("next");
$("#"+area_name).load(next_file);
});
});
no1.html
<script src="my.js"></script>
This is No.1
.....
<div id="area_2">no2 will be here</div>
<div class="load_button" data-area="area_2" data-next="no2.html">Click</div>
no2.html
This is No.2
.....
<div id="area_3">no3 will be here</div>
<div class="load_button" data-area="area_3" data-next="no3.html">Click</div>
no3.html
This is No.3
.....
<div id="area_4">no4 will be here</div>
<div class="load_button" data-area="area_4" data-next="no4.html">Click</div>
In this example, my.js is included only once in no1.html.
Hope this helps.
1.You are trying to load the content of the html file in single element.
You might want to use a callback function
$('#element').load('no3.html #content' ,function(){
// Loading done.. what next?
})
Related
i know that this question is asked many times here and i have read those answers but my question is bit longer than this. suppose there are two files: a.html and b.html, now:
a.html contains all the scripts and styles that are common throughout
the project and <div> tag for content.
b.html contains only the codes required to load in the div tag of
a.html file.
there are some other scripts and styles required only for
b.html.
so, how do i load that page specific js and css with the page's content into the div of a.html??? and how to remove them when i call another c.html file's content with its own js and css files??
Any suggestions or hints would be appreciated. Thanks.
use Jquery Ajax to load page 2 into the div ( follow below example)
page 1(HTML)
<div id="loadepage2here" ></div>
<div id="loadepage3here" ></div>
page 1(js)
$(document).ready(function()
{
$.get('/locationOfPage2.html',function(data){
$("#loadepage3here").empty();
$("#loadepage2here").html(data);
});
$.get('/locationOfPage3.html',function(data){
$("#loadepage2here").empty();
$("#loadepage3here").html(data);
});
});
Edit: as asked how to use only div for multiple page
page 1(HTML)
<div id="loadepagehere" ></div>
<button onClick="loadPage('page1.html')" >Page 1</button >
<button onClick="loadPage('page2.html')" >Page 2</button >
page 1(js)
loadPage(location)
{
$.get(location,function(data){
$("#loadepagehere").empty();
$("#loadepagehere").html(data);
});
}
You can use angular.js to achieve this. Below is the code snippet to achieve this.
var dynamicHTML = $('#divLoadHTML');
dynamicHTML.load('/Pages/Common/b.html')
$compile(dynamicHTML.contents())($scope);
divHTML is a div on a.html page.
In a html web page, i load in my main section the content of another html page. I have a js script section at the botton of my charged page. I use jquery.
<div id="main">
</div>
Other page
<div>
...
<div id="roomCheckoutResult" class="hide">
...
</div>
</div>
<script>
$('#dateRoomCheckout').datetimepicker({
format: 'DD/MM/YYYY'
});
$("roomCheckoutResult").show();
</script>
Line with function show don't work. If i use directly
document.getElementById("roomCheckoutResult").className="";
that work.
So why my line with show don't work.
You need to change this:
$("roomCheckoutResult").show();
to this:
$("#roomCheckoutResult").show();
You target an id value by using a # at the start of the selector.
And, it goes without saying that you have to make sure that jQuery is loaded before using it.
I have a web page, I need part of the content separated to an individual page, but not use iframe. Just like to know if it is possible use div instead of iframe and works as it in the same page(With js base code or php code is cool).
I'd need the whole content of <div class="row-fluid">..</div> to be an individual html, but not use iframe, I will need a div instead of iframe, and make it works like just as in one page.
With PHP you can include a page inside your code inside a specific division.
for example inside index.php:
<div>
<?php include('page2.php'); ?>
</div>
and inside page2.php you have:
<span>Hello World</span>
The result would be:
<div>
<span>Hello World</span>
</div>
If what you want to achieve needs to be in the front-end as the user navigates through your site; that is after a click is made to an element and you don't want to change to another page, then AJAX is your option. this example is with Jquery:
$('.clickme').click(function(){
$.ajax({
url:'page2.php'
success:function(msg){
$('#insert_div').html(msg)
}
});
});
HTML:
<span class="clickme">Get Page 2</span>
<div id="insert_div">
<!-- Page 2 will be inserted here -->
</div>
Another solution is Jquery load() as many have posted:
$('.clickme').click(function(){
$('#insert_div').load("page2.php");
});
You can use the jQuery load() method to load the content when the corresponding link is clicked. you can also use this without event clicked with animation.
I'm creating a resource database that has a scrolling container on the side. Essentially, when you click a thumbnail within the container, it will load the contents of a div which will fade in and display content for that category. Each div tag looks something like this:
<div>
<h2>Category1</h2>
<p><a style="float:right" class="a_demo_four" href="/Resources/file1.pdf" target="_blank">
Download
</a>File Desc</p>
<hr/>
</div>
And will load as such:
Essentially, I want to be able to display the same exact content when I open another category on this page. I have several different categories, and want to be able to pull the code from say Category1, Category2, and so on and so forth so I can display all of them in a "View All" tab. I've attempted to use jQuery's load function as seen below:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
<h1>This is why I rule</h1>
</body>
</html>
to load the content from the original div into the view all category, but nothing shows up. Unfortunately, I have very limited knowledge with Javascript/jQuery so I'm having difficulty being able to use the same content in a different div without just copying and pasting the code over. This would also pose problems in the future when I am adding files and have to edit the code twice if I did so.
Thank you in advance!
You can keep your content in a variable like this:
var content = '';
$(document).ready(function(){
//load first in a div
$('#includedContent').load('b.html', function(result){
content = result;
//from here on, you know you have b.html data in the variable content
//and you can use it elsewhere like this
$('#anotherDivId').html(content);
});
});
If you call your code within document ready function will work.
Try,
$(document).ready(function(){
$("#includedContent").load("b.html");
});
However you will probably need to keep it somewhere as visualex suggested in order to add the content in multiple places as you require.
This is a working jsfiddle,
http://jsfiddle.net/c5SAH/show/
it loads content from
http://jsfiddle.net/gfgE8/show/
I have this code :
HTML
Show Agency
<div id="invisibleDiv">
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/CompanyProfile" data-id="1035" data-format="inline" data-related="false"></script>
</div>
jQuery
$("#showDiv").click(function () {
$("#invisibleDiv").show();
});
CSS
#invisibleDiv
{
display:none;
}
When I load the page, I see the scripts loaded from external source, also if the div is hidden. The scripts call with some API and generate HTML/Javascript.
Well, what I'm looking for is to force the script to be unloaded if the parent is hidden; than, when I'll show it (through the link), load the script inside the div.
How can I do it? I'll avoid AJAX.
UPDATED:
DEMO: http://jsfiddle.net/HqeD2/
Show Agency
<div id="invisibleDiv">
<script type="IN/CompanyProfile" data-id="1035" data-format="inline" data-related="false"></script>
</div>
$(function() {
$("#showDiv").click(function() {
$.getScript("http://platform.linkedin.com/in.js");
});
});
If I understand it correctly, you just want to delay the running of arbitrary scripts that are provided by the third party? Would something like this work?
<div id="invisibleDiv" style="display:none">Please wait while we load some stuff from Facebook...</div>
$("#showDiv").click(function(){
$("#invisibleDiv").show().load("http://facebook.com/whatever/andStuff");
});
Has the downside that you can't pre-fetch the HTML content, but I don't see any other way.
EDIT: ok, it looks like you edited the question whle I was typing this up... so YOU control the content of invisibleDiv, but you want to delay the loading of in.js? try this...
$("#showDiv").click(function(){
$("#pleaseWaitDiv").show();
$.getScript("http://platform.linkedin.com/in.js", function(){
$("#pleaseWaitDiv").hide();
$("#invisibleDiv").show();
});
});
Again, you have to make the user wait while the script downloads, hence my addition of pleaseWaitDiv
More edit:
New up a script node and append it.
var scriptNode = $("<script></script>")
.attr("type","IN/CompanyProfile")
.attr("data-id","1035")
.attr("data-format","inline")
.attr("data-related","false");
$("#invisibleDiv").append(scriptNode);
$.getScript("http://platform.linkedin.com/in.js", function(){
$("#pleaseWaitDiv").hide();
$("#invisibleDiv").show();
});
You can bind it to your showDiv click function, inline scripts are processed right away...the only other thing I can think of is to have the script be loaded via ajax which you don't want.
Try this :
http://jsfiddle.net/sXJa6/6/