0

I have a page called feed.html containing the following:

<html><body>
<div id="Post01"><p>From: User1<br>
Posting: Hello!<br>
<a href="./listcomments.html?Post01">Comments</a>
</p></div>

<div id="Post02"><p>From: User1<br>
Posting: Have a great day!<br>
<a href="./listcomments.html?Post02">Comments</a>
</p></div>

<div id="Post03"><p>From: User2<br>
Posting: Don't worry, be happy!<br>
<a href="./listcomments.html?Post03">Comments</a>
</p></div>
</body></html>

I have another page called commentsfeed.html:

<html><body>
<div id="Comment01"><p>From: User2<br>
@Post01: Hi, how are you?<br>
</p></div>

<div id="Comment02"><p>From: User1<br>
@Post01: Spectacular!<br>
</p></div>

<div id="Comment03"><p>From: User2<br>
@Post02: You too!<br>
</p></div>
</body></html>

I have a third page called 'listcomments.html.' When someone clicks 'Comments' on a post in feed.html I want the div id passed to the listcomments.html page, I then want the listcomments.html page to embed the entry with the matching div id from feed.html and all the comments containing the matching div id in the commentsfeed.html file.

Here is what I have so far for the listcomments.html file:

<html><body>
<---receive PostID through URL---->
<p>Posting: 
<br> <----embed post from feed.html that matches PostID---->
</p>

<p>Comments:
<br> <-----embed comments from commentsfeed.html containing the matching PostID---->
<p>

</body></html>

I've googled around and looked at a bunch of different methods but can't seem to find something to do exactly what I'm trying to do. Willing to employ javascript or php if needed. Whatever the simplest way to do it is.

Any help anyone can provide to get this working is much appreciated. If there's anything that I've described that is unclear let me know. Thank you.

Here would be an example of working output from listcomments.html?Post01:

Posting:
From: User1
Posting: Hello!

Comments:
From: User2
Hi, how are you!

From: User1
Spectacular!

MateoXRP
  • 5
  • 3

1 Answers1

0

Using jQuery is probably the easiest solution here. It allows you to fetch data into a div just with a single line of code.

Assuming that you have a page at http://www.yoursite.com/123456

You can get the ID of the page with this code (taken from here)

var url = window.location.pathname;
var id = url.substring(url.lastIndexOf('/') + 1);

Then you can use it to fetch data into any div in your page. For example, if you have a div for the post feed like this:

You can use this jquery code to load certain content from a source. You can pass the id from the code above into the load method

$("#postdiv").load("http://www.anydomain.com/post?id=" + id);
Ozgur Sar
  • 2,067
  • 2
  • 11
  • 23
  • Thank you! Ok I am now able to capture the ID when clicking the link. No matter what I do though I can't seem to get jquery to load ANY data when I try to use the load method. I've tried numerous ways and just can't seem to get it to load any data. Not sure what I'm missing. Here is the code I have so far: – MateoXRP Feb 08 '21 at 06:07
  • @MateoXRP if you are trying to load data from another domain, you could be getting denied due to CORS policy. You can read about CORS here https://stackoverflow.com/questions/25845203/understanding-cors – Ozgur Sar Feb 08 '21 at 06:29
  • It's working perfectly now! Didn't realize it can't be used for files on the local filesystem. – MateoXRP Feb 08 '21 at 06:52
  • @MateoXRP I'm happy to help. Please consider accepting this or any other answer that works for you. – Ozgur Sar Feb 08 '21 at 06:53