[Resolved] Using Script in a Loop

[Author]

Posts

[briana-5]

I am trying to:
I'm trying to use the sheetrock.js library ( hidden link ) to retrieve and display data related to certain custom post types. Eventually, I want each post in the loop to display data from the google sheet related to that post, using the post title as a variable that determines which rows in the sheet are displayed. However, the data does not loop. It appears only once.

Here is my code

<h3>[wpv-post-title]</h3>
<ul id="agendaitems" class="mb-3">
  <script id="agenda-template" type="text/x-handlebars-template">
    
      <li>{{cellsArray.[0]}} ({{cellsArray.[2]}}) - {{cellsArray.[1]}}</li> 
        
  </script>
 
</ul>

Link to a page where the issue can be seen:
hidden link

What am I doing wrong....

[Luo Yang]

Hello,

I have tried the credentials you provided above, it is not valid, I get this error message:
ERROR: The username or password you entered is incorrect.

Please check it.

[briana-5]

I believe I have fixed it. If not please, provide a private message so I can send new credentials.

[Luo Yang]

Thanks for the details, I can log into your website, and see the problem.

According to the document you mentioned above:
hidden link
You can apply those custom JS codes to specific HTML ID tags.

I have done below modifications in your website:
1) Edit the post view "Sheetrock View 3":
hidden link

in section "Loop item in Sheetrock View 3", change the codes as below:

<h3>[wpv-post-title]</h3>
<ul id="agendaitems-[wpv-post-id]" class="mb-3">
  <script id="agenda-template-[wpv-post-id]" type="text/x-handlebars-template">
    
      <li>{{cellsArray.[0]}} ({{cellsArray.[2]}}) - {{cellsArray.[1]}}</li> 
        
  </script>
 
</ul>
<script>
jQuery( document ).ready(function($) {
  var myquery = "select C, E, F Where G ='20190812CS61'"; 
  var bTemplate = Handlebars.compile($('#agenda-template-[wpv-post-id]').html());

  var mySpreadsheet = '<em><u>hidden link</u></em>';
  // Load an entire worksheet.
  $('#agendaitems-[wpv-post-id]').sheetrock({
    url: mySpreadsheet,
    query: myquery,
   rowTemplate: bTemplate,
    fetchSize: 20,
   labels: ["bill", "Descrption", "Author",],

    });
});

</script>

As you can see, it needs to add an unique ID attribute in those HTML tags, for example:
agendaitems-[wpv-post-id]
agenda-template-[wpv-post-id]

2) Click JS editor, remove your JS codes, since all JS codes are moved to above content template

For your reference.

[briana-5]

Brilliant. That worked. Why is it necessary to move the the script out of the js window? Are there disadvantages to doing so?

[Luo Yang]

Yes, you are right, it is necessary to move the the script from the js window to the content, since shortcode in JS window can not be parsed.