文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML5 - Ajax -我不明白的意外行为

问HTML5 - Ajax -我不明白的意外行为
EN

Stack Overflow用户

提问于 2013-05-18 13:15:48

回答 1查看 123关注 0票数 0

编辑更好地解释我的问题是什么：

我有一个以第一页为内容的分部。
第1页有一个按钮，将div的内容更改为第2页。
第2页有一个按钮，将div的内容更改为第1页。

问题：--如果第1页先加载，则按钮什么也不做。如果首先加载了第2页，则按钮将内容更改为第1页。然后第1页上的按钮将有效(如果第1页在第2页之前加载，则不会！)这是我的问题！)。

我一直在尝试开发一个数学训练工具。实际上，我在一开始就失败了，因为我只是没有看到发生以下行为的原因。

问题：为什么只有在我以错误的顺序加载页面时才能工作？

页面在这里：MathTrainer页面代码在张贴的底部。

我在尝试什么：

我将一个选择页面加载到div中，这个Div由php-include填充。当按下按钮时，我希望div的内容更改为actuall训练工具。所以“问题”- "option1“-”option2“.ect。加上一个按钮，通过相同的方法返回到选择的部分。

此更改通过提交按钮中的"onclick“处理，并在JS中调用函数。即：

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

发生了什么：

没什么..。我想，由于提交功能，除了页面量之外，什么都没有。div-内容没有变化。

是什么使这种意外的行为？

除了不工作外，我还尝试先包含培训工具，然后使用那里的按钮返回所选内容(这显然应该首先显示出来)。而且确实有用。而且，当我将页面编码为"ISO“时，它确实起了作用，当我切换到UTF-8时，它也停止了工作。编码不应该像这样搅乱我的页面，对吧？

，是什么使这件事更加出乎意料？

如果我首先包括培训页面，使用后退按钮到达选择页面，然后点击“开始”按钮--它也能工作！这真的让我很困惑，因为它是完全相同的代码，相同的文件加载！如果它不是显示的第一页，它为什么要工作呢？

我试图调试的内容：

我删除了php包含，并将其替换为加载页面上的javafunction，以检查php是否与我的问题有关。同样的行为。如果选择首先显示，我不能切换到培训师，但我可以切换到背靠背，如果培训师是首先显示。
切换回ISO编码，没有运气。
然后我试图改变我的文件结构(我知道，但实际上已经没有想法了)，所以每个文件都在我的服务器上的同一个文件夹中。同样的行为。

代码，主页：

<!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>

代码，选择页：

<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>

代码，培训：

<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>

代码，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");
}

javascript

html

jquery

php

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-05-18 13:19:59

return false;

在js函数中，防止执行提交操作。举个例子：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16624665

复制

相似问题

问HTML5 - Ajax -我不明白的意外行为
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5 - Ajax -我不明白的意外行为EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5 - Ajax -我不明白的意外行为
EN