php - HTML5 - Ajax - unexpected behavior i don't understand -
edit better explain issue is:
- i have div page 1 content.
- page 1 has button changes content of div page 2.
- page 2 has button changes content of div page 1.
issue: if page 1 loaded first, button nothing. if page 2 loaded first, button changes content page 1. , button on page 1 works (does not if page 1 loaded before page 2! issue!).
ive been trying develop trainingtool math. failing right @ beginning seems, since don't see reason following behavior.
question: why work if load pages in wrong order first?
page here: mathtrainer page code @ bottom of posting.
what trying:
i have selectionpage loaded div, div populated php-include. when hitting button want content of div change actuall training-tool. "question" - "option1" - "option2"... ect. along button go selection via same method.
this change handled via "onclick" submit-button , calling function in js. namely:
$("#trainercontent").load('trainerabfrage.php'); what happens:
nothing,.. nothing pagereload due submit feature guess. div-content not changing.
what make unexpected behavior?
apart not working tried include trainingtool first , use button there selection (that should shown first obviously). , work. did work when had page encoding "iso" , stopped working when switched utf-8. encoding should not mess page this, right?
what makes more unexpected?
if include trainerpage first, use button selectionpage , hit "start" button work! got me confused exact same code, same file loaded! why work if not first page shown?
what tried debug:
- i deleted php-include , replaced javafunction on page loaded, check if php involved in issue. same behavior. if selection shown first can not switch trainer, can switch back if trainer shown first.
- switched iso encoding, no luck.
- then tried change file structure (i know, running out of ideas really), every file in same folder on 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 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 = "geringid"><font color="green">leicht</font> für einsteiger, viel text.</label><br/> <input type = "radio" name = "skill" id = "gutid" value = "gut" /> <label = "gutid"><font color="orange">medium</font> für prüfungsvorbereitung, viele formeln.</label><br/> <input type = "radio" name = "skill" id = "perfektid" value = "perfekt" /> <label = "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 = "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"); }
return false; in js functions prevent submit action executed. example:
function abfrage() { $("#trainercontent").load('trainerabfrage.php'); return false; }
Comments
Post a Comment