/    Sign up×
Community /Pin to ProfileBookmark

Add details to same page

I am trying to fetch more detailed data and show this info ad-hoc in the same window. On bigger screens. On smaller screens I want to hide the list and show detailed when double click.

To illustrate my goal, i have done a very simple write to innerHTML.

http://94.237.92.101:6060/newposts (screens above 1800px shows both list and card)

const selected = table.getElementsByClassName(‘selected’)

“`
table.onclick = sel;
function sel(row) {
if (selected[0]) selected[0].className = ”;
row.target.parentNode.className = ‘selected’;
table.className = ”;
add2card(row.target.parentNode.innerHTML)
}

function add2card(text){
document.getElementById(“add2card”).innerHTML = text;
}
“`

I have found three ways to do this.

  • 1. Fetch data via AJAX ( do not know how to parse and format the json )

  • 2. Fetch the normal way and show in an iFrame

  • 3. Store all content in the list (some data hidden) and do basically as above.
  • Are there more ways to achieve this goal. Faster or simpler?

    Any tip or advice welcome!

    TIA!

    to post a comment
    HTMLJavaScript

    11 Comments(s)

    Copy linkTweet thisAlerts:
    @VITSUSAMar 26.2021 — @sibert#1629618 You will have to try all these ways first because it will help you learn different ways to solve this problem. If you are stuck after implementing these ways please let me know.
    Copy linkTweet thisAlerts:
    @tracknutMar 26.2021 — Part of this decision depends on the amount of data you're talking about. I would lean toward option #3 unless you're talking about a large (say over 100KB) amount of data on these detail requests. I would avoid the iFrame, so AJAX would be my alternate in the case of a lot of data.

    Also, if you have all the data at the client side already, you can make a solution that degrades nicely if the client doesn't have JS.
    Copy linkTweet thisAlerts:
    @sibertauthorApr 01.2021 — > @tracknut#1629682 I would avoid the iFrame, so AJAX would be my alternate in the case of a lot of data.

    I have now done som tests.

  • 1. AJAX gives only data - no HTML

  • 2. Storing all contents in the table gives data - no HTML

  • 3. iFrame gives you both data and HTML and you can do a simple database lookup from an id

  • 4. Websockets may be a solution, but it seems to be overkill. Or?


  • http://94.237.92.101:6060/newposts (note that you need a bigger screen 1800px+)

    **HTML**
    ``<i>
    </i>&lt;tr data-id={{.post_id}}&gt;
    &lt;iframe id="subwin" src=""&gt;&lt;/iframe&gt;
    &lt;script&gt;const url = 'c_post?id=';&lt;/script&gt;<i>
    </i>
    `</CODE>

    <STRONG>**Javascript**</STRONG>
    <CODE>
    `<i>
    </i>const selected = table.getElementsByClassName('selected')
    table.onclick = sel;
    function sel(row) {
    if (row.target.parentNode.dataset.id &gt; 0) {
    if (selected[0]) selected[0].className = '';
    row.target.parentNode.className = 'selected';
    const el = document.querySelector('selected');
    document.getElementById('subwin').src = (url + row.target.parentNode.dataset.id);
    }
    }<i>
    </i>
    ``

    Is there really no other ways to populate an area with both HTML and data without using iFrame?
    Copy linkTweet thisAlerts:
    @tracknutApr 01.2021 — @sibert#1629836 Could you post your test of storing these detail items in the table? I must not be understanding your requirement. I imagined a table with a bunch of <tr>'s in it, some of which would be tagged as <tr class=hidden> when they are not being shown, and they can contain html tags as long as those are legal tags within the construct of the table. The table would contain all your data, assuming some maximum size requirement. Adding and removing the "hidden" class would be done by whatever JS logic you chose.
    Copy linkTweet thisAlerts:
    @tracknutApr 01.2021 — @tracknut#1629856 Ah, hang on, I just viewed your sample in a huge display and see the "card" being displayed to the right. So let me amend my answer. Your Card detail is not part of the table, it seems, ()i.e. not another <tr>) but another html object set over to the right rather than inline with the table as I had imagined. No particular change in the implementation though, you could just have something like <aside class=hidden> on this detail, and add/remove the hidden class based on your JS.
    Copy linkTweet thisAlerts:
    @sibertauthorApr 01.2021 — > @tracknut#1629857 but another html object set over to the right rather than inline with the table as I had imagined

    Basically this is the line that populate the iframe

    document.getElementById('subwin').src = (url + row.target.parentNode.dataset.id);

    translated into html:

    document.getElementById('subwin').src = (http://localhost/6060/card?id=5);

    The html template is filled from the database by normal:

    SELECT * FROM posts WHERE id=5

    And the html page with data put into iframe by the Javascript above:

    &lt;iframe id="subwin" src="http://localhost/6060/card?id=5"&gt;&lt;/iframe&gt;

    So, the original question remains. Is there better ways to do this?
    Copy linkTweet thisAlerts:
    @tracknutApr 01.2021 — @sibert#1629860 Gotcha. So the question is which is better: to do an http request for each "details" selection, or to just download all the details on the initial page load. If this page is representative (in terms of load size) of the finished product, I think I still lean toward loading the whole thing once. Others may disagree...
    Copy linkTweet thisAlerts:
    @sibertauthorApr 01.2021 — > @tracknut#1629862 If this page is representative (in terms of load size) of the finished product, I think I still lean toward loading the whole thing once. Others may disagree...

    I do not disagree. It can be useful in some cases. Just curios how to glue the data with the html. I have tried this as well but I do not get the html as it is sort of .shtml. (calculated html). Any clue is appreciated.
    Copy linkTweet thisAlerts:
    @tracknutApr 01.2021 — @sibert#1629865 What code is writing out the main html file that includes the lines in the table like this:
    <i>
    </i>&lt;tr data-id=1&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...&lt;/td&gt;
    &lt;/tr&gt;

    That's not being generated via JS on the browser, correct? So there's some code on the server that can read your database to get these main headings. I would have that same code push out similar "detail" sections into the same html document below the table, in <aside> sections or whatever other tag might be more appropriate, all tagged with "data-id=1" etc, and a class ="hidden" (styled in css to "display:none") on them, positioned over on the right where you want the card. Then locally on the browser you have the JS code such that when the main item is clicked, you grab the data-id of the main entry, hide any currently displayed card (change the class to "hidden"), and show the one (chance the class to "displayed") that corresponds to the data-id requested.
    Copy linkTweet thisAlerts:
    @sibertauthorApr 01.2021 — > @tracknut#1629866 What code is writing out the main html file that includes the lines in the table like this:

    This test site is created by using Go. A non common way to build web sites. It has a light touch of Angular. There is a few steps involved.

  • 1. "components" or sub templates like{{template "filter"}}

  • 2. Pure HTML

  • 3. Data "fields" included data {{.data field}} fetched from Postgresql via an API


  • The main template http://94.237.92.101:6060/newposts looks like this:

    ``<i>
    </i> &lt;body&gt;
    {{template "header"}}
    &lt;main&gt;
    &lt;nav&gt;
    {{template "mainnav"}}
    {{template "subtopics"}}
    &lt;/nav&gt;
    &lt;div class="content"&gt;
    &lt;h1&gt;Posts&lt;/h1&gt;
    &lt;div class="line"&gt;&lt;/div&gt;
    &lt;div class="listcard"&gt;
    &lt;div class="boxtable"&gt;
    {{template "filter"}}
    &lt;table&gt;
    &lt;thead&gt;
    &lt;tr&gt;
    &lt;th&gt;ID&lt;/th&gt;
    &lt;th&gt;Subject&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    {{range.}}
    &lt;tr data-id={{.post_id}}&gt;
    &lt;td&gt;{{.post_id }}&lt;/td&gt;
    &lt;td&gt;{{.post_subject }}&lt;/td&gt;
    &lt;/tr&gt;
    {{ end }}
    &lt;/tbody&gt;
    &lt;tfoot&gt;
    &lt;tr&gt;
    &lt;th&gt;---&lt;/th&gt;
    &lt;th&gt;Table Footer&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/tfoot&gt;
    &lt;/table&gt;
    &lt;/div&gt;
    &lt;div class="boxcard"&gt;
    &lt;iframe id="subwin" src=""&gt;&lt;/iframe&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/main&gt;
    &lt;script&gt;const url = 'c_post?id=';&lt;/script&gt;
    &lt;/body&gt;

    &lt;/html&gt;<i>
    </i>
    ``

    The entire 10 MB "Go engine" that includes web server (like Apache), communicating with the API and rendering the html templates can be found here: http://94.237.92.101:6060/client

    The rest is vanilla CSS, Javascript etc...

    So the templates must (?) be rendered with data inside by the server. Which means that the entire page has to be "included" in some way . I have found no way but open another window in iframe. But I am searching if there are other ways to do this...
    Copy linkTweet thisAlerts:
    @tracknutApr 01.2021 — Ah, ok. There is no similar meta-tag like {.post_details} you could use to make a similar loop as you've done for the table, but down where you have the subwin iframe?
    ×

    Success!

    Help @sibert spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 3.28,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,

    tipper: Anonymous,
    tipped: article
    amount: 10 SATS,
    )...