Blog

Signals Blog

How to Display ChemWriter Components after Page Load

It's sometimes necessary for an application to display new page content, for example in response to a user interaction. To enable this use case, ChemWriter can dynamically display both Images and Editors after a page has loaded.

Consider a page that offers the ability to draw a chemical stucture, but only as a rarely-used option. Rather than display a complete editor immediately and lose valuable screen space, it would be better to only display the editor if requested by the user. The event triggering the display could come from any user interface element - for example a button.

Button Click Loads a ChemWriter Editor
<!DOCTYPE html>
<html>
  <head>
    <title>Button Click Loads ChemWriter Editor</title>
    <script src="https://chemwriter.com/sdk/chemwriter.js"></script>
    <link rel="stylesheet" href="https://chemwriter.com/sdk/chemwriter.css">
  </head>
  <body>
    <h1>Button Click Loads ChemWriter Editor</h1>
    <button>Draw Structure</button>
    <div class="target" style="margin-top: 1em"></div>
    <script>
      var button = document.querySelector('button');

      button.onclick = function(event) {
        var editor = document.createElement('div');

        editor.setAttribute('data-chemwriter-ui', 'editor');
        editor.setAttribute('data-chemwriter-width', '500');
        editor.setAttribute('data-chemwriter-height', '350');
        editor.setAttribute('data-chemwriter-src', 'http://chemwriter.com/data/structure-1.mol');

        document.querySelector('.target').appendChild(editor);

        chemwriter.refresh();
      };
    </script>
  </body>
</html>

Both the display of the Editor and the loading of the chemical structure are handled automatically by the ChemWriter refresh function. This flexibility makes it possible to build responsive web applications with relatively little effort.