Update HTML UI with JSON

Question

I have a custom HTML UI for my Shiny app. The UI relies on some JSON data. I wrote an R script to create the JSON file which seems to work perfectly. I made test.json to help lay out the rest of the UI. When a user clicks a button in the UI, I want to run the script to create a new JSON file, from which the data to be displayed in the app will be created. The script to create the JSON and the HTML/JavaScript/CSS for the UI all work perfectly fine when not in the Shiny app. I've verified the button is registering the click in the Shiny app, but it's not rerunning the script and updating the displayed UI as it should.

This is the app.R file I have:

ui = htmlTemplate(
  "www/index.html",
  styleInfo = includeCSS("www/style.css"),
  button = actionButton("btn", "Click me!"),
  scriptInfo = includeScript("www/index.js")
)

server = function(input, output, session){
  observeEvent(input$btn, {
    message("Clicked\n")
    function_to_change_json_here()
  })
}

Here's the index.html file used in the app's call to htmlTemplate(). It's in the www/ subdirectory of the folder containing app.R.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Page Title</title>
    {{styleInfo}}
</head>
<body>
    <header class="top-banner">
        <div class="top-banner-wrap">
            <p class="intro" id="intro"></p>
            <h1 id="headline">Some Content</h1>
            <p class="year"> 2019 </p>
            <p id="foo">bar</p>
            {{button}}
        </div>
    </header>
    <section>
        <div class="container">
            <ul class="matchup">
                        <li class="team team-top">
                            <span class="seed" id="r1-seed-1-seed"></span>
                            <img class="logo" id="r1-seed-1-logo">
                            <span id="r1-seed-1-name"></span>
                            <span class="score"></span>
                        </li>
                        <li class="team team-bottom">
                            <span class="seed" id="r1-seed-16-seed"></span>
                            <img class="logo" id="r1-seed-16-logo">
                            <span id="r1-seed-16-name"></span>
                            <span class="score"></span>
                        </li>
                    </ul>
        </div>
    </section>
    <script src="index.js"></script>
</body>

Here's www/style.css:

.team{
    color: red;
}

.logo{
    height: 50px;
}

And lastly, www/index.js:

var jsonObj = {
            "r1": [
                {
                    "team_name": "Bulldogs",
                    "team_seed": 1,
                    "logo_link": "https://images-na.ssl-images-amazon.com/images/I/61eSjtcXNVL._SX355_.jpg"
                }
            ],
            "r2": [
                {
                    "team_name": "Wildcats",
                    "team_seed": 16,
                    "logo_link": "https://i0.wp.com/www.stickertalk.com/wp-content/uploads/2015/11/833__68393.1440207109.1280.1280.jpg?fit=1280%2C1000&ssl=1"
                }
      ]
        };

        document.getElementById("r1-seed-1-name").innerHTML = jsonObj.r1[0].team_name;
        document.getElementById("r1-seed-1-logo").src = jsonObj.r1[0].logo_link;
        document.getElementById("r1-seed-1-seed").innerHTML = jsonObj.r1[0].team_seed;

        document.getElementById("r1-seed-16-name").innerHTML = jsonObj.r2[0].team_name;
        document.getElementById("r1-seed-16-logo").src = jsonObj.r2[0].logo_link;
        document.getElementById("r1-seed-16-seed").innerHTML = jsonObj.r2[0].team_seed;

The HTML, CSS, and JavaScript components work perfectly. The function_to_change_json_here() I wrote in R also works perfectly fine on its own, but the changed JSON doesn't display in the UI after the button is clicked or even after using session$reload(). I'm sure the button registers the click as "Clicked" is still messaged in the R console. I've also had function_to_change_json_here() rewrite the entire www/index.js file that then gets called, but nothing in the UI changes.

Could you provide a [minimal and reproducible example](https://stackoverflow.com/questions/5963269)? — Aurèle, Mar 21 '19 at 10:17

Update HTML UI with JSON

0 Answers0