my parent jsp contains two div..
<html>
<script src="a.js"/>
<body>
<div id="child1"></div>
<div id="child2"></div>
</body>
</html>
my child page is
<html>
<body>
child_1
</body>
</html>
using ajax call i am loading child page into my parent div and want to use the same js file in child page loaded by parent page by referring it using any method and not by manually including it on child page,So please anyone help me with this i am in big trouble because of this.
In ajax call:
$.get('/home',
{script:'resolvedJSLink'},
function(){$('#child1').html(data);}
);
And in child1.jsp:
<html>
<script src='<%= request.getParameter("script") %>'/>
<body>
child_1
</body>
</html>
Maybe another solution for this case is load script dynamically: http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
Related
Let's say there is page A, that has an iframe that contains page B and page B includes another iframe containing page C.
Can an event be fired from page C in a way that it traverses upwards and is received by both pages A and B?
Basically, is there a solution other than going to parent windows one by one and calling contentWindow.postMessage on each one? Is there a more concise way?
Try something like this so both page will be a part of single DOM
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#B').load("B.html");
$('#C').load("C.html");
});
</script>
</head>
<body>
<div class='parent'>
<div id="A"></div>
<div id="B"></div>
</div>
</body>
</html>
How to load divs from page 2 into page 1 with JavaScript.
Page2.html
<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content2"> this is content2</div>
<div id="content3"> this is content3</div>
</div>
</body>
</html>
I want to get and use the id content2 from page2 to create a div into page1 with the content of that div, after link was clicked and deleted, and do the same with content3, content4 and successively.
Page1.html
<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content1"> this is content1</div>
get content
</div>
</body>
</html>
And then would be like that.
<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content1"> this is content1</div>
<div>this is content2</div>
<div>this is content3</div>
</div>
</body>
</html>
I'm new in JavaScript and i have no ideia how to do that. If someone can help. Thanks.
Edited: I wanted a way to do it only with javascript and without jquery if that's really possible. I want my project working offline and I can't do that with jquery, because it doesn't work. I've downloaded jquery plugin and pasted it in my directory, but, didn't work, too.
You can use a combination of JavaScript, jQuery, and AJAX to accomplish this.
First, include the jQuery library:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
Then write a JavaScript function similar to this one which will replace your div element's html content with the Page2.html file:
var loadNewContent = function {
$.ajax("Page2.html", {
success: function(response) {
$("#content2").html(response);
}
});
};
And then you would need some 'trigger' to run this function such as this:
$("#content2").on('click', loadNewContent);
Hope this helps.
I wrote a small library called ViaJS using javascript & jquery. It basically lets you load content (like a div) from a source to the page. Check it out.
Via is a small library that allows you to load content on to a page dynamically
In my index.html file I have:
<button onclick="myFunction()">Click me</button>
myFunction is located in index.js
how can I call this function when the button is clicked?
You need to add the index.js file at the bottom of your HTML, right before the </body> tag:
<script src="path/to/index.js"></script>
Add to header:
<script type="text/javascript" src="index.js"></script>
Add the js file reference in your html page so its functions can be called from html page.
<script src="yourfile.js"></script>
Also give your button type="button" otherwise this button will submit the page and your function will not be called.
<button type="button" onclick="myFunction()">Click me</button>
I'm guessing you're new to this all, so I'm going to try and explain it a little bit more than the answers above.
When you got your HTML:
<html>
<head>
<title>This is the title of my page</title>
<script src='js/script.js' type='text/javascript'></script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
</html>
When you see this. The <script> tag says to the browser: "Okay, there is coming up some javascript (or jQuery)" so it will look in the src attribute, to see where the javascript is found that should be loaded. When it finds it, it will load it into the html document and you will have the functions in the file ready to be used in your html document. The type attribute just says: "Okay, this script is filled with javascript". You also have type='text/css' for example when you're including a CSS script to style the HTML elements of the page.
Hope it makes sence, and I wish you luck, learning html/css/javascript. If you have any questions, reply to this answer.
I have two html file
a.html
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="content">
hello every one
</div>
</body>
</html>
and another page
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="result">
</div>
<iframe id="ifr" src="http://example.com/a.html">
</iframe>
<script type="text/javascript">
divv = $('#ifr').contents().find('div#content').clone();
$('#result').html(divv.html());
</script>
</body>
</html>
In second one I try to get first html and get contet div in it.after that I put this value to result div .
but It's not work. How can I do that.
You do not need to use an iframe; you can use ajax to do that. It's very straight forward.
$(function() {
$('#result').load('a.html #content',function()
$(this).html( $('#content').html() );
});
});
EDIT
As evident from comments below, scope of question has changed. The two pages are on different domains without CORS. Therefore the above answer would not work.
In order to use ajax, you may want to create a server-side script to act as a proxy. Then you'll call that script on your server and it will fetch the a.html page for you.
I guess that could be the right way.
var ifr = document.querySelector('#ifr');
var html = ifr.contentDocument.querySelector('div#content').innerHTML;
$('#result').html(html);
page1.html
<!DOCTYPE html>
<html>
<head>
<script src="common_script.js"></script>
</head>
<body onload="init()">
<h1>My First Page</h1>
<p id="demo">This is a paragraph.</p>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<script src="common_script.js"></script>
</head>
<body>
<h1>My second Page</h1>
<div id="nextpageId">I want to access my div</div>
</body>
</html>
common_script.js
function init() {
alert($("#nextpageId").text());
}
In the following code I have two pages i.e. page1.html & page2.html and these contain the common JavaScript file.
My problem is to access page2.html div#id when page1.html is loading.
use this in your javascript
$('body').attr('unique_id')
and give unique id for your page in body tag
<body id='unique_id'>
or you can also pass in url
or use this code
function init() {
alert( $('div').attr('id') == "nextpageId" )
}
You don't explicitly state that you are using jQuery Mobile but you have tagged your question as such and are using PhoneGap so I will assume so...
Your pages don't conform to a standard jQuery Mobile layout. They are missing the required data-roles. Specifically data-role="page" along with child data-role="content" declarations.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html
Your second page will be loaded via Ajax and the <script> tag on the second page will be ignored. In fact, only the contents of the nested <div data-role="page"> section will be loaded.
To pull that markup, you can simply access the <div> given its ID and that ID should be unique. You can use the pageinit or pageshow events to control your timing on the Ajax load.
http://jquerymobile.com/demos/1.2.0/docs/api/events.html