Question

109

Get content from another page with JavaScript

rated 0 times [ 116] [ 7] / answers: 1 / hits: 24789 / 8 Years ago, mon, july 18, 2016, 12:00:00

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>

<a href=#> get content</a>

</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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

elvisissacg

Add To Favorites

Follow

Total Points: 410

Total Questions: 108

Total Answers: 121

Location: Monaco

Member since Tue, Jun 16, 2020

4 Years ago

answered 8 Years ago zaynerogerb · Accepted Answer

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.