Loading a scripted section of one page into another using jQuery .load()

Question

I have a div with content that I generate using jQuery on one page (I'll just refer to it as Page 1) that I want to load onto Page 2:

<div id="latestNews">
  <h4>Latest News</h4>
  <ul>
    <!--Section automatically loaded here and to homepage -->
  </ul>
</div>

This Page 1 div contains a list of links to the 5 most recent articles, made using this code:

var $latestNews = $("#$latestNews ul");
var $titles = $("h3");

$titles.each( function( index, element ){
          var i = index + 1;
          if (i > 5) { return false; }

          var text = "<li> <a href='$url'>" + $(element).text() + "</a> /li>";

          $latestNews.append(text);   
});

On Page 2, which is the home page, I want to load the same div (and only that div) but preserve the script attached to it as well. Otherwise, it loads the div and its content without creating the list items.

$homelines.load("http://.../Page1.php #latestEntries");

If there is any solution in Javascript/jQuery, let me know. Pages 1 and 2 are both in PHP, so if there's a PHP alternative I'm open to it as well.

Of course there's a PHP alternative. Just put that stuff into a function and call it in both places ... — m02ph3u5, Jun 08 '16 at 21:38
Hmm...I'm not quite clear on how that would work. The javascript creates the list based on the Article titles (h3) on Page 1. Page 2 does not have any articles so that same script wouldn't work. — jnguyen0749, Jun 09 '16 at 22:10
I'm not yet getting the question. Please try to be more specific. — m02ph3u5, Jun 10 '16 at 21:20

score 1 · Answer 1 · edited May 23 '17 at 10:28

In fact, you are not adding the new content to the first PHP page -- you are adding it to the DOM. The difference is that the page is stored on the webserver, while the DOM exists in virtual space.

To transfer the data to the second page, you have a few options.

(1) If you use a button to advance to the next page, the button can grab the added content from the DOM, create a <form> construct containing the new data, and post it to page 2. Page 2 can grab the transmitted data and render it as it creates its DOM. Note: this data will not be available to other visitors.

(2) You can store the added content in a MySQL database table. Now it is available for display on page2, for all users and future visitors.

To store (MySQL) the added content, you will either

(a) use a <form> construct as in option (1) with the difference that you will redirect Page 1 to an intermediary page that will write the data to MySQL before again redirecting to page2, or

(b) use AJAX -- which is much simpler than it sounds. Here is a post that contains some simple AJAX examples.

Huh? OP is only asking how to get their script to work when using `load()` which is ajax — charlietfl, Jun 08 '16 at 21:20
Perhaps I have misunderstood the meaning of this phrase: `content that I generate using jQuery`. I took that to mean the content is generated, i.e. not part of the original document. Re-reading, I think you are correct. — cssyphus, Jun 08 '16 at 21:24

Loading a scripted section of one page into another using jQuery .load()

1 Answers1