This has got my goat. All I want to do is have a page where the user can select from a dropdown and when they change the dropdown it changes the URL that is embedded in the iframe. It should be simple. Since the script is tiny I just included it in the header, even though I only expect to use it on this one page.
The script is a jquery script that I have stored in the js folder of my theme. It is called selpuz.js The URL is fetchable. Here is the script
jQuery('#puzsel').change(function() {
alert('change');
jQuery('#puzframe').attr('src', 'http://puzzles.twicks.net/puzzle/' + jQuery('#puzsel :selected').val());
});
Note the alert is not firing, so something is wrong and I am just not seeing it.
The code is embedded in the special template that I made just for this page. It is
<select id="puzsel"> <option value="choose" selected="selected">Choose a puzzle</option> <option value="Africa">Africa</option> <option value="Australia">Australia</option> <option value="Brazil">Brazil</option> <option value="Canada">Canada</option> <option value="Europe">Europe</option> <option value="Mexico">Mexico</option> <option value="USA">USA</option> <option value="World">World</option> </select> <iframe id="puzframe" src="http://puzzles.twicks.net/puzzle/USA" width="900" height="700"></iframe>
I syntax checked the jQuery unless something weird is getting in it.
The URL of the page I want the iframe in is:
http://comix.dorkage.net/puzzles
WHY WON'T IT LOAD A DIFFERENT URL?