1

そのため、アプリケーションの最初のページから jquery コードを実行して、そのページに読み込まれたページを含める読み込み関数を実装しようとしています。つまり、page1.html には id="content" の空の div があります。ルートフォルダーに別の外部ページを入力したい..次のことを試しました...

 $(document).ready(function() {  
$('input').click(function() {  
$.ajax({
  url: "./page2.html",
  type: "GET"
  }).done(function(response, status, xhr) {
  $("#div1").html(response);
  alert(status + " : " + xhr) 
  }); 
 }); 
});

そしてHTMLページ

<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>my Page</title>
  <link rel="stylesheet" href="javascript/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" />
  <script src="javascript/jquery.mobile-1.3.1/jquery-1.9.1.min.js"></script>
  <script src="javascript/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script>
  <link rel="stylesheet" href="my.css" />
  <script src="my.js"></script>
</head>
 <body>
     <!-- Question1 -->
    <div id="question1" data-role="page" class="questionContainer radius" data-theme="b">
      <div id="hbox" data-theme="b" data-role="header">
          <a id="bb1" class="back_button" data-role="button" data-theme="a" href="index.html" data-icon="arrow-l" data-iconpos="left">
                  Back
               </a>
              <a id="hb1" data-role="button" data-theme="a" href="app-help.html" data-icon="info"
          data-iconpos="right" class="ui-btn-right">
               Help
           </a>
         <h3 id="q1">
               Question 1
         </h3>
       </div>
       <div class="question"><h3>Q1:is this even right?</h3></div>
          <h3 id="c1" style="border:solid;">
              What Ever is the Question!
           </h3>
            <div id="rb1" data-role="fieldcontain" class="answers">
               <fieldset data-role="controlgroup" data-type="vertical">
                   <legend>
                       Choose:
                   </legend>
                   <ul>
                     <li><input id="q1-a" class="a1" name="Radio Buttons" value="radio1" type="radio"/> 
                     <label for="q1-a">
                       Yes.
                      </label></li>
                     <li><input id="q1-b" class="b1" name="Radio Buttons" value="radio2" type="radio"/>
                <label for="q1-b">
                  No.
                </label></li>
              </ul>
          </fieldset>
      </div>
    <div class="btnContainer">
            <div id="next1">
                <input id="next1" class="next" type="button" data-inline="true" data-theme="a" value="Next" data-icon="arrow-r" data-iconpos="right"/>
            </div>
        </div>
 <div id="fbox" data-theme="b" data-role="footer" data-position="fixed">
    <span class="ui-title">
         </span>
       </div>
    </div>
    <div id="div1"></div>

  </body>
 </html>

わかりました...更新、私はウェブの周りから多くの答えを試しましたが、divで望んでいたように2番目のページを表示することができませんでした..それを取得していますが、表示していません..また、jQueryのチャンクを削除しましたこれは、ユーザーの結果をキャプチャし、最後にスコアを計算することを想定していました..しかし、何らかの理由で、コードのチャンクが原因でページが何も取得されなかったのですが、コードを削除すると..ページが再び表示されました。次のボタンをクリックしました..しかし、フォーマットが混乱しています...再びfirebugが、2番目のページを取得していることを示しています..しかし、ページ1を表示しています..助けていただければ幸いです:)私のajaxに干渉しているjQueryまたはCSS..つまり..何をすべきかわかりません..とにかく..以前のヘルプに感謝します..!

M

4

2 に答える 2

2

これはどう？コンテンツを div にロードするだけなのに、余分なことをたくさんしているようです。 

<script type="text/javascript">
$(document).ready(function() {  // load document 
    $.ajax({
      url: "page2.html",
      context: document.body
    }).done(function(response, status, xhr) {
      $("#content").html(response);
      alert(status + " : " + xhr) //alert me with the server response, status
    }); 
});
</script>

クリック イベントでこれを行う必要がある場合は、クリック イベント内に移動します。

$(document).ready(function() {  // load document 
 $('.next').click(function() {  //use the class of "next" when clicked and ...
    $.ajax({
      url: "page2.html",
      context: document.body
    }).done(function(response, status, xhr) {
      $("#content").html(response);
      alert(status + " : " + xhr) //alert me with the server response, status
    }); 
  }); 
 });
});
于 2013-04-12T14:34:33.820 に答える