Forum Discussion

maxwelldhsu's avatar
maxwelldhsu
Guide
8 years ago

Load Blog Article Within Page, Within Componenet

Hi everyone! 

2 questions:

  1. Is this function below actually possible in a lithium component? (this works on a pure HTML custom category page on lithium) 
  2. Is there a better way to load articles within the same page? (so users don't need to click back, and read a board of articles) 

Context:

I'm trying to load blog articles within a page, within a component. The article nav bar (vertical) would be on the left, and article page on the right. Trying to create an FAQ list (left Nav bar), that loads FAQ articles (right, page content) 

 

My Nav bar is this, where I do a REST api call for article titles, <#assign blog = rest("boards/id/videos/topics").node_message_context />

<ul>
<#list blog.message as article>
<li class="articlelinks">
<button id="${article.@view_href}">${article.subject}</button></li>

</#list>
</ul>

The script that I have in the component is this, when I click a button, it loads the blog content to "div1". Using ".load"

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
$(document).ready(function(){
    $('button').click(function(){       
        var blogurl = $(this).attr('id')
        $("#div1").load(blogurl +" .lia-component-body");
       
    });
});

But it doesn't load the blog content. You can see the ".load(blogurl +" .lia-component-body", I am trying to grab only the article content part (not the title, or the Kudos, or comment section) 

 

To recap: 

  1. Is this function actually possible in a lithium component? (this works on a pure HTML custom category page on lithium) 
  2. Is there a better way to load articles within the same page? (so users don't need to click back, and read a board of articles) 

Really appreciate any input! 

  • TariqHussain's avatar
    TariqHussain
    Boss
    8 years ago

    maxwelldhsu -

    1. Since lithium pages are a fully dynamic page,s jQuery load function works on pure HTML pages. 

    2. The better approach to is to create an endpoint for this and make a call to the endpoint to get it details. 

     

    Updated code for your navbar.

    <ul>
<#list blog.message as article>
<li class="articlelinks">
<button id="${article.id}">${article.subject}</button></li>
</#list>
</ul>

     

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
$(document).ready(function(){
    $('button').click(function(){       
        var blogid = $(this).attr('id')
             $.get("enpointurl",{id:blogid}, function(data, status){
               alert("Data: " + data + "\nStatus: " + status);
            });
});

    In your endpoint use below the call to get the article.

    <#assign articleID = http.request.parameters.name.get("id","") />
    SELECT body FROM messages WHERE id '${articleID}'