CODEWITHSUNDEEP
phpjavascripthtmljquery
Marco Heumann
Marco Heumann

Reputation: 121

HTML5 - Ajax - unexpected behavior i don't understand

Edit to better explain what my issue is:

Issue: If Page 1 is loaded first, the button does nothing. If Page 2 is loaded first, the button changes the content to Page 1. AND the button on Page 1 then WORKS (does not if page 1 is loaded before page 2! This is my issue!).

Ive been trying to develop a trainingtool for Math. Actually i am failing right at the very beginning it seems, since i just don't see a reason for the following behavior.

Question: Why does this only work if i load the pages in the wrong order first?

Page here: MathTrainer Page code at the bottom of posting.

What i am trying:

I have a selectionpage loaded into a div, this Div is populated by a php-include. When hitting a button i want the content of the div to change to the actuall training-tool. So "question" - "option1" - "option2"... ect. Along with a button to go back to the selection via the same method.

This change is handled via "onclick" from the submit-button and is calling a function in JS. Namely: 

$("#trainercontent").load('trainerAbfrage.php');

What happens:

Nothing,.. like really nothing but a pagereload due to the submit feature i guess. The div-content is not changing.

What does make this unexpected behavior?

Apart from not working i tried to include the trainingtool first and use the button there to get back to the selection (that should really be shown first obviously). And it DOES work. Also it did work when i had my page encoding as "ISO" and stopped working when i switched to UTF-8. Encoding should not mess up my page like this, right?

What makes this even more unexpected?

If i include the trainerpage first, use the back button to get to the selectionpage and THEN hit the "start" button it does ALSO work! This really got me confused as it is the exact same code, same file loaded! Why does it work if it is not the first page shown?

What i tried to debug:

  1. I deleted the php-include and replaced it by the javafunction on page loaded, to check if php is involved in my issue. Same behavior. If the selection is shown first i can not switch to the trainer, but i can switch back to back if the trainer is shown first.
  2. Switched back to ISO encoding, no luck.
  3. Then i tried to change my file structure (i know, but running out of ideas really), so every file is in the same folder on my server. Same behavior.

Code, Mainpage:

<!doctype html>
<html lang="de">
<head>
        <!-- Titel der Webseite -->
        <title>Mathematik - Definitions-Trainer</title>

        <!-- Metadaten der Webseite -->
        <meta charset="UTF-8">
        <meta name="author" content="Heumann Marco">
        <meta name="keywords" content="Mathe, Mathematik, Lehramt, Gymnasium, Trainer, Übungen, lernen, Axiom, Axiome, Definition, Definitionen">
        <meta name="description" content="Definitions und Axioms-Trainer für das Lehramt der Mathematik an Gymnasien.">

        <!-- Verweis auf die JavaScripte die benutzt werden sollen -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script><!-- weil jQuery sexy ist-->
        <script type="text/javascript" src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script><!-- Matheformeln aufhübschen hiermit -->
        <script type="text/javascript" src="../javascript/ios.js"></script><!-- damits mit Touchscreens auch gut geht -->

        <!-- Eigene Javascripte -->
        <script type="text/javascript" src="javaTrainer.js"></script>

        <!-- Verweis auf die Styledateien die benutzt werden soll -->
        <link rel="stylesheet" type="text/css" href="styleTrainer.css"> 
</head>

<body>
    <div id="trainerheader">
        <h1>Definitions und Axioms - Trainer</h1>
    </div>

    <div id="trainercontent">
        <?php 
            //dynamischer php-Aufbau des Contents
            include 'trainerAuswahl.php';
        ?>
    </div>

    <div id="footer">
        <!-- php include des Footers-->
        <?php include '../includes/footer.php'; ?>
    </div>
</body>

Code, Selectionpage:

<h2>Wähle Deine Abfrageoptionen</h2>
<form>
<fieldset>
<legend>Bereich einschränken</legend>
<p>
  <label>Semester / Kurs</label>
  <select id = "listSemester" name="selectSemester">
    <option value = "0">Alle</option>
    <option value = "1">1. Semester - Analysis einer Variablen</option>
    <option value = "2">2. Semester - Lineare Algebra</option>
  </select>
</p>

<p>
  <label>Kapitel / Thema</label>
  <select id = "listKapitel" name="selectKapitel">
    <option value = "1">Alle</option>
  </select>
</p>
 </fieldset>
 <fieldset>
<legend>Art der Abfrage</legend>
  <p>Unabhängig von der gewählten Option werden alle Relevanten Infos in der        Auflösung angezeigt. Je nach Frage kann es auch weitere Hinweise und Erklärungen geben.</p>
  <br/>       

  <input type = "radio" name = "skill" id = "geringID" value = "gering" checked =   "checked" />
  <label for = "geringID"><font color="green">Leicht</font> für Einsteiger, viel Text.</label><br/> 

  <input type = "radio" name = "skill" id = "gutID" value = "gut" />
  <label for = "gutID"><font color="orange">Medium</font> für Prüfungsvorbereitung, viele Formeln.</label><br/> 

  <input type = "radio" name = "skill" id = "perfektID" value = "perfekt" />
  <label for = "perfektID"><font color="red">Schwer</font> für Freaks, nur Formeln, Zahlen und Griechen!</label><br/>

  <input type = "radio" name = "skill" id = "testID" value = "test" />
  <label for = "perfektID"><font color="blue">Debug</font> für Testzwecke</label><br/>        
</fieldset>     
<p>
  <input type="submit" onclick="abfrage();" value="Starte die Abfrage"/>
</p>

Code, Trainerpage:

<h2>Hier werden sie getestet!</h2>

<h3>Frage...</h3>
<p>Option 1</p>
<p>Option 2</p>
<p>Option 3</p>
<p>Option 4</p>
<p>Option 5</p>

<p><input type="submit" onclick="auswahl();" value="Back zur Auswahl"/></p>

Code, Javascript: 

//wenn jemand auf den Button klickt um die Abfrage zu starten
function abfrage()
{
$("#trainercontent").load('trainerAbfrage.php');
}

//wenn jemand auf den Button klickt um zur Auswahl zurück zu kommen
function auswahl()
{
$("#trainercontent").load("trainerAuswahl.php");
}

Upvotes: 0

Views: 131

Answers (1)

krampstudio
krampstudio

Reputation: 3621

return false;

in your js functions to prevent the submit action to be executed. By example:

function abfrage()
{
$("#trainercontent").load('trainerAbfrage.php');
 return false; 
}

Upvotes: 1

Related Questions