Weatherwidget.io - Not reloading iframe on button click-CodePudding

I have a dynamic table where the weather of locations selected from the options need to display everytime the button 'Submit' is clicked. I am using the script 'weatherwidget.io' for showing the weather details.

$("#btnSubmit").click(function() {
jQuery('#divResult table tbody tr td').each(function ($) {
    if (jQuery(this).text() == 'Weather') jQuery(this).nextAll("td").each(function ($) {
        jQuery(this).html('<a  href="https://forecast7.com/en/'   jQuery(this).text()   '/" data-label_2="WEATHER" data-days="3" data-theme="original" >WEATHER</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=\'https://weatherwidget.io/js/widget.min.js\';fjs.parentNode.insertBefore(js,fjs);}}(document,\'script\',\'weatherwidget-io-js\');<\/script>');
    });
});
});

The 'iframe' in the link loads only for the first time the places are selected and 'submit' is clicked. The second time it only shows the 'WEATHER' href link without the iframe.

I tried the below code to reload the 'iframe' everytime 'submit' is clicked, but it doesnt work.

$("#btnSubmit").click(function() {
        jQuery.each($("iframe"), function() {
            $(this).attr({
                src: $(this).attr("src")
            });
        });
        return false;
});

How do I get it to load the iframe for the weather widget everytime the 'submit' button is clicked?

Find below code:

Show code snippet

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

  var StatJSON = {
    "Option1": {
      "ColHeading": "New York",
      "Weather": "40d71n74d01/new-york",
    },
    "Option2": {
      "ColHeading": "San Francisco",
      "Weather": "37d77n122d42/san-francisco",
    },
    "Option3": {
      "ColHeading": "Chicago",
      "Weather": "41d88n87d63/chicago",
    },
    "Option4": {
      "ColHeading": "Los Angeles",
      "Weather": "34d05n118d24/los-angeles",
    },
    "Option5": {
      "ColHeading": "Boston",
      "Weather": "42d36n71d06/boston",
    },
    "Option6": {
      "ColHeading": "Washington",
      "Weather": "38d91n77d04/washington",
    },
  };

  jQuery('#btnSubmit').click(function() {
    var data = [];
    jQuery("#selection").find(':selected').each(function(e) {
      var this_input = jQuery(this);
      if (this_input.is(':selected')) {
        data.push(this_input.val());
      }
    });

    $('#divResult').empty().append(PrintTable(data));

    jQuery('#divResult table tbody tr td').each(function($) {
      if (jQuery(this).text() == 'Weather') jQuery(this).nextAll("td").each(function($) {
        jQuery(this).html('<a  href="https://forecast7.com/en/'   jQuery(this).text()   '/" data-label_2="WEATHER" data-days="3" data-theme="original" >WEATHER</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=\'https://weatherwidget.io/js/widget.min.js\';fjs.parentNode.insertBefore(js,fjs);}}(document,\'script\',\'weatherwidget-io-js\');<\/script>');
      });
    });

    function PrintTable(data) {
      var html = '<table ><thead><tr><th>';
      if (data && data.length) {
        html  = '</th>';
        jQuery.each(data, function(i) {
          //getting heading at that key
          html  = '<th>'   StatJSON[data[i]].ColHeading   '</th>';
        });
        html  = '</tr>';
        html  = '<tbody>';
        jQuery.each(StatJSON[data[0]], function(k, v) {
          html  = '<tr>';
          if (k != "ColHeading") {
            html  = '<td>'   k   '</td>';
          }
          jQuery.each(data, function(k2, v2) {
            if (k != "ColHeading") {
              html  = '<td>'   StatJSON[data[k2]][k]   '</td>';
            }
          });
          html  = '</tr>';
        });
      } else {
        html  = 'No results found</td></tr>';
      }
      html  = '</tbody></table>';
      return html;
    }

  });

  $("#btnSubmit").click(function() {
    jQuery.each($("iframe"), function() {
      $(this).attr({
        src: $(this).attr("src")
      });
    });
    return false;
  });

});

body {
  font-family: montserratbold, montserratregular, sans-serif;
}

.compTable {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  margin: 10px;
  border: 1px solid #222;
  text-align: center;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<select id="selection" multiple="multiple">
  <option value="Option1">New York</option>
  <option value="Option2">San Francisco</option>
  <option value="Option3">Chicago</option>
  <option value="Option3">Los Angeles</option>
  <option value="Option3">Boston</option>
  <option value="Option3">Washington</option>
  <br />
  <input id="btnSubmit" class="button" type="submit" value="submit" />
</select>
<br /><br />
<div id="divResult" class="divResult"></div>

Jsfiddle: https://jsfiddle.net/s469xb0n/

CodePudding user response：

Instead of including weather api script every time when submit button is clicked you can include that just once in your page and use init method to render your weather api on the htmls which are generated dynamically .

So just include this :

<script id="weatherwidget-io-js" src="https://weatherwidget.io/js/widget.min.js"></script>

and then use :

__weatherwidget_init();

Working Code :

https://jsfiddle.net/Swati_911/juc7Lhgf/1/