Weatherwidget.io - Not reloading iframe on button click

[mithunuchil]

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 class="weatherwidget-io" 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 working code in jsfiddle: https://jsfiddle.net/s469xb0n/

[DaveMaxwell]

It’s failing out because the if statement is failing after the first time because it no longer contains just Weather.

Add an else to that if statement to display jQuery(this).text() and you’ll see what I mean…

[mithunuchil]

Hi DaveMaxwell. Thanks for your quick reply, much appreciated insight. My only concern is that the <a class=“weatherwidget-io” href="https://forecast7.com/en/' is applying to the “Weather” in the ‘td’ making it a href link to the correct corresponding destination. So I believe that the if-statement seems to be working, but the second time the iframe in the link isn’t launching. (Please check the jsfiddle). Many Thanks again, awaiting your reply.

[DaveMaxwell]

Quick note, you’ve got a bug in your html in your values in the select box. Doesn’t affect your problem but was confusing at first. The option value is wrong after Chicago.

<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>

But back to your problem…I don’t see anything blatantly obvious, even though the output is glaringly different the second time around. My gut tells me it’s gotta be something in this script added for the widget, but I don’t see anything glaring in it.

		<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>

Either that or there’s a bug in the weatherwidget-io-js which is only firing the first time but not the next.