Add and execute xml tag into html file

I am using XML tag into my HTML file in order to show some block. By block, I meant that I want to use blocky features. But unfortunately, I am unable to show those block into my view. I am using the Django framework. I have tried and wasted more than 2 days regarding this issue. It will be helpful if someone can suggest something to work with XML and blockly into HTML.

I am adding my code in the following.

<html>
 <head>
 <meta charset="utf-8">
 <title></title>

 </head>
 <body>

<p>
  <button onclick="showCode()">Show Python</button>
  <button onclick="runCode()" id="runcode">Run Python</button>
  <button onclick="save()" id="save">Save Combination</button>
  <button onclick="restore()" id="restore">Restore</button>
</p>
<div id="blocklyDiv"></div>
<xml id="toolbox">

  <category name="Logic" >
    <block type="controls_if"></block>
    <block type="logic_compare"></block>
    <block type="logic_operation"></block>
    <block type="logic_negate"></block>
    <block type="logic_boolean"></block>
    <block type="do_it"></block>
  </category>

  <category name="Loops" >
    <block type="controls_repeat_ext">
      <value name="TIMES">
        <block type="math_number">
          <field name="NUM">10</field>
        </block>
      </value>
    </block>
    <block type="controls_whileUntil"></block>
  </category>

  <category name="Math" >
    <block type="math_number">
      <field name="NUM">123</field>
    </block>
    <block type="math_arithmetic"></block>
    <block type="math_single"></block>
  </category>

  <category name="Text" >
    <block type="text"></block>
    <block type="text_length"></block>
    <block type="text_print"></block>
  </category>


</xml>

Solution

Give a width and height to the blocklyDiv element and add script to inject blockly into the blocklyDiv element. Don't forget to include the blockly source files.

These are mentioned in the guide here.

Working code -

<html>
  <head>
    <meta charset="utf-8" />
    <title></title>

    <script src="../google/blockly/blockly_compressed.js"></script>
    <script src="../google/blockly/blocks_compressed.js"></script>
    <script src="../google/blockly/msg/js/en.js"></script>
  </head>
  <body>
    <p>
      <button onclick="showCode()">Show Python</button>
      <button onclick="runCode()" id="runcode">Run Python</button>
      <button onclick="save()" id="save">Save Combination</button>
      <button onclick="restore()" id="restore">Restore</button>
    </p>
    <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
    <xml id="toolbox" style="display: none">
      <category name="Logic">
        <block type="controls_if"></block>
        <block type="logic_compare"></block>
        <block type="logic_operation"></block>
        <block type="logic_negate"></block>
        <block type="logic_boolean"></block>
        <block type="do_it"></block>
      </category>

      <category name="Loops">
        <block type="controls_repeat_ext">
          <value name="TIMES">
            <block type="math_number">
              <field name="NUM">10</field>
            </block>
          </value>
        </block>
        <block type="controls_whileUntil"></block>
      </category>

      <category name="Math">
        <block type="math_number">
          <field name="NUM">123</field>
        </block>
        <block type="math_arithmetic"></block>
        <block type="math_single"></block>
      </category>

      <category name="Text">
        <block type="text"></block>
        <block type="text_length"></block>
        <block type="text_print"></block>
      </category>
    </xml>

    <script>
      var workspace = Blockly.inject('blocklyDiv', {
        toolbox: document.getElementById('toolbox')
      });
    </script>
  </body>
</html>