I've been messing around with bootstrap, jquery, javascript and html for some time now and I still find it rather difficult considering the way that pages, navigation and etc works. One thing in particular that I've had some trouble finding answers for is the best way/practice to build a page..?
I've tried the following for my page, but I always find something that doesn't quite work as I expect it to.
- Creating an "empty" (containing empty divs) index page and using javascript to load external pages (Problem: I can't seem to use the id's or classes of the elements in the external page anymore with this approach)
- Creating a single index.html page containing all my divs and hiding/showing whatever I need to (Problem: Quickly becomes very hard to find around in which are showing/hiding and adding stuff can become quite tricky
- Creating a single html file for all the "pages" I need (Problem: I can't seem to transfer my javascript vars from one page to another. The vars become empty on loading a new page using href)
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Course Suggestion Tool</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/functions.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/custom_style.css" rel="stylesheet">
</head>
<body class="ui-mobile-viewport ui-overlay-c">
<div class="container" id="first">
<div id="study_area">
<fieldset>
<legend>Study</legend>
<div class="dropdown" id="study_dropdown">
<button id="study" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Study
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" class="dme" data-value="action-1" id="dme">Digital Media Engineering</a>
</li>
</ul>
</div>
<div>
<h4 id="study_choice">Study choice</h4>
</div>
</fieldset>
</div>
<div id="focus_area">
<fieldset>
<legend>Focus Area</legend>
<div class="dropdown" id="focus_dropdown">
<button id="study" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Focus
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" id="smaa">Social media and apps</a></li>
<li><a href="#" id="uxue">UX User experience</a></li>
<li><a href="#" id="ds">Data science</a></li>
<li><a href="#" id="cga">Computer games</a></li>
<li><a href="#" id="cgr">Computer graphics</a></li>
</ul>
</div>
<h4 id="focus_choice">Focus Choice</h4>
</fieldset>
</div>
<button id="next_page" type="button" class="btn btn-primary">Something exciting</button>
</div>
<div class="container" id="second">
</div>
</body>
</html>
NB
The content consists of two dropdowns. On the page load I only want to show the first one. Then once the user selects something from that dropdown I want to show which he selected in a heading and show the second dropdown as well. Once the second one has been selected too I want to display the selection in a heading and show a button that "navigates the user to a new page". However what's really import is that I want to "save" the name of the dropdowns that the user selected to use as some sort of feedback.´
Functions.js
var selection = {};
$(document).ready(function(){
$("#focus_area").addClass("collapse");
$("#study_choice").hide();
$("#focus_choice").hide();
$("#next_page").hide();
$(".dme").click(function() {
$("#study_dropdown").hide()
var choiceText = $("#dme").text()
selection.study = choiceText;
$("#study_choice").text(choiceText)
$("#study_choice").show()
$("#focus_area").slideDown();
});
$("#smaa").click(function() {
$("#focus_dropdown").hide();
var choiceText = $("#smaa").text();
selection.focus = choiceText;
$("#focus_choice").text(choiceText);
$("#focus_choice").show();
$("#next_page").slideDown();
});
$("#uxue").click(function(){
$("#focus_dropdown").hide();
var choiceText = $("#uxue").text();
selection.focus = choiceText;
$("#focus_choice").text(choiceText);
$("#focus_choice").show();
$("#next_page").slideDown();
});
$("#ds").click(function(){
$("#focus_dropdown").hide();
var choiceText = $("#ds").text();
selection.focus = choiceText;
$("#focus_choice").text(choiceText);
$("#focus_choice").show();
$("#next_page").slideDown();
});
$("#cga").click(function(){
$("#focus_dropdown").hide();
var choiceText = $("#cga").text();
selection.focus = choiceText;
$("#focus_choice").text(choiceText);
$("#focus_choice").show();
$("#next_page").slideDown();
});
$("#cgr").click(function(){
$("#focus_dropdown").hide();
var choiceText = $("#cgr").text();
selection.focus = choiceText;
console.log(selection);
$("#focus_choice").text(choiceText);
$("#focus_choice").show();
$("#next_page").slideDown();
});
$("#next_page").click(function() {
$("#first").load();
$("#second").load("planner.html") //External html page (currently empty)
});
});
