Need Help Clarifying My Issue:
- I currently have a Div with Page 1 content.
- Page 1 contains a button that transitions the div content to Page 2.
- Page 2 has a button that switches the div content back to Page 1.
The Problem: If Page 1 is loaded first, the button does not function. If Page 2 is loaded first, the button successfully changes the content to Page 1. AND the button on Page 1 starts working too (doesn't work if Page 1 is loaded before Page 2! This is the issue!).
I've been attempting to create a math training tool. However, I seem to be facing an obstacle right at the start as I can't comprehend the following behavior.
Inquiry: Why does it only work when I load the pages in the incorrect order initially?
View Page: MathTrainer Code snippet provided below.
My Objective:
I have a selection page loading into a div using PHP include. When pressing a button, I intend for the div's content to switch to the actual training tool. So "question" - "option1" - "option2"... etc. Along with a button to return to the selection through the same process.
This transition is managed via the "onclick" event triggered by the submit button, which calls a JavaScript function, namely:
$("#trainercontent").load('trainerAbfrage.php');
Current Outcome:
No change occurs, just a page reload due to the submit feature, I assume. The div content remains static.
Possible Cause of Unexpected Behavior:
Despite my attempts, including switching encoding from ISO to UTF-8, it did function when the training tool was included first and then utilized its button to go back to the selection (which should ideally be shown first). Encoding shouldn't disrupt my page like this, right?
Making It More Puzzling:
If I incorporate the trainer page first, use the back button to navigate to the selection page, and THEN press the "start" button, it also works! This left me baffled as it's the same code, the same file being loaded! Why does it only work when not the primary page shown?
Debugging Attempts:
- I replaced the php-include with the JavaScript function upon page load to rule out any involvement of PHP in the issue – same outcome. When the selection page is displayed first, I cannot switch to the trainer, but I can switch back when the trainer is shown first.
- Reverting to ISO encoding didn't resolve the issue.
- I even attempted altering my file structure (I know, desperate times call for desperate measures), such that every file is in the same server folder – still faced the same behavior.
Mainpage Code:
<!doctype html>
<html lang="de">
<head>
<!-- Website Title -->
<title>Mathematics - Definitions Trainer</title>
<!-- Website Metadata -->
<meta charset="UTF-8">
<meta name="author" content="Heumann Marco">
<meta name="keywords" content="Math, Mathematics, Teaching, School, Trainer, Exercises, Learning, Axiom, Axioms, Definition, Definitions">
<meta name="description" content="Definitions and Axioms Trainer for Mathematics teaching profession at high schools.">
<!-- Referring to JavaScript libraries to be used -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script><!-- because jQuery is cool -->
<script type="text/javascript" src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script><!-- Beautify math formulas here -->
<script type="text/javascript" src="../javascript/ios.js"></script><!-- Enhancing touchscreens functionality -->
<!-- Custom JavaScripts -->
<script type="text/javascript" src="javaTrainer.js"></script>
<!-- Referring to the Style sheets to be implemented -->
<link rel="stylesheet" type="text/css" href="styleTrainer.css">
</head>
<body>
<div id="trainerheader">
<h1>Definitions and Axioms - Trainer</h1>
</div>
<div id="trainercontent">
<?php
//dynamic PHP construction of content
include 'trainerAuswahl.php';
?>
</div>
<div id="footer">
<!-- PHP include of footer-->
<?php include '../includes/footer.php'; ?>
</div>
</body>
Selectionpage Code:
<h2>Choose Your Query Options</h2>
<form>
<fieldset>
<legend>Restrict Area</legend>
<p>
<label>Semester / Course</label>
<select id = "listSemester" name="selectSemester">
<option value = "0">All</option>
...
... (truncated for brevity)
...
</fieldset>
<p>
<input type="submit" onclick="query();" value="Begin Query"/>
</p>
Trainerpage Code:
<h2>Here They Are Being Tested!</h2>
<h3>Question...</h3>
<p>Option 1</p>
...
(other options listed similarly)
...
<p><input type="submit" onclick="selection();" value="Back to Selection"/></p>
JavaScript Code:
//when someone clicks the button to start the query
function query()
{
$("#trainercontent").load('trainerAbfrage.php');
}
//when someone clicks the button to go back to the selection
function selection()
{
$("#trainercontent").load("trainerAuswahl.php");
}