JSFiddle - React, Tailwind, and code Playground

by williamdaburke

HTML

<body>

  <button id="downloadButt">download</button>
  <button id="myButtonRemove1">toggle 1</button>
  <button id="myButton3">show ItalyObj</button>
  <button id="myButton4">button 4</button>
  <input type="button" id="popItaly" onclick="populateItaly()" value="Populate Italy">
  <br>
  <input type="text" name="address" id="address" value="">
  <input type="button" id="submitButton" value="Submit" onclick="submitButton(address.value)">
  <br>
  <div id='div1'></div>
  <div id='div2'></div>
  <br>
  <div id="editor-iframe"></div>
  <div id="iframe_div">
  </div>
</body>

JavaScript

var datagh
  var datagi
  var italyEditDoc
  var italyObj
	var comuniITbaseURL = "http://www.comuni-italiani.it"
  function submitButton(value) {
   // alert(italyObj[value].name);
   // $("#div1").html(italyObj[value].name);
    $('<div>')
    	.html(italyObj[value].name)
       .appendTo('#iframe_div');
    $('<iframe>') // Creates the element
      .attr('src', italyObj[value].link) // Sets the attribute spry:region="myDs"
      .attr('height', 200)
      .attr('width', 200)
      .attr('id', 'my_page')
      .appendTo('#iframe_div');
  };

  function popIt2(dat) {
    italyObj = {};
    $(dat.contents).find('table.main tr td b a').each(function() {
      italyObj[this.innerText] = {
        name: this.innerText,
        link: comuniITbaseURL + "/" + this.href.split(/display\//)[1]
      };
    });
  }

  jQuery(document).ready(function($) {

    $("#myButton3").click(function() {
 				alert(Object.keys(italyObj)[0] + " --- " + Object.keys(italyObj).length);
    });

    $.getJSON('http://www.whateverorigin.org/get?url=' + encodeURIComponent(comuniITbaseURL) + '&callback=?', function(data) {
      italyEditDoc = data.contents;
      popIt2(data);
    });


    $('#downloadButt').click(function() {
      var filedata = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(italyObj));
      $('<a href="data:' + filedata + '" download="data.json">download JSON</a>').appendTo('#div1');
    });

    $("#myButtonRemove1").click(function() {
      $('#iframe_div').children('iframe').toggle();
    });

  });