Dynamic Pages With Two Selectboxes, Iframe And JQuery (without PHP)
I'm trying to create a dynamic page with JavaScript. I use jQuery for it. The idea is to avoid PHP or other server-side language. I use selectboxes and iframe, but can't understand, why doesn't it work. The "main.html" is showed at the snippet. Here is no errors but nothing changes at the webpage. The target path is www/materials/dev1/zad.html (option 1 is chosen at "1", option 2 is chosen at "zad". And so on. It makes the page dynamic.) The file main.html is located in www/main.html. Where have I done a mistake?
I tried to get the <select>
from different classes and even from the tagName but I couldn't do better. I think it is possible to be another function, not click(). Could you advice me something useful?
$(document).ready(function() {
var aside_val = $('#aside_menu').val();
//get the value of the first selection
var header_val = $('#header_menu').val();
//get the value of the second selection
var folder = 'dev' + aside_val;
//get the value of the folder
$('.selection').click(function() {
$('iframe#content').attr('src', "materials/" + folder + "/" + header_val + ".html");
//change the src attribute of the iframe in order to get the proper page
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select name="aside_menu" id="aside_menu" tabindex="1" style="top: 20px;" class="selection">
<optgroup label="choose opt">
<option class="opt" value="1">option 1</option>
<option class="opt" value="2">option 2</option>
<option class="opt" value="3">option 3</option>
</optgroup>
</select>
<select name="header_menu" id="header_menu" tabindex="1" class="selection">
<optgroup label="choose opt2">
<option class="opt" value="zad">zad</option>
<option class="opt" value="ooa">ООА</option>
<option class="opt" value="scenario">scenario</option>
<option class="opt" value="hipo">HIPO</option>
<option class="opt" value="functions">functions</option>
</optgroup>
</select>
<iframe src="materials/dev1/zad.html" width="986" height="600" align="center" id="content">no iframe</iframe>
Answer
The problem is that you are initializing the variables outside the scope of the click function, only during page load. This would set the values of the variable only once. You need to declare them inside the click handler.Also, since the iframe already has an id, you don't need $('iframe#content')
. Simply $('#content')
would be sufficient.
$(document).ready(function() {
//get the value of the folder
$('.selection').click(function() {
var aside_val = $('#aside_menu').val();
//get the value of the first selection
var header_val = $('#header_menu').val();
//get the value of the second selection
var folder = 'dev' + aside_val;
$('#content').attr('src', "materials/" + folder + "/" + header_val + ".html");
});
});
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM