2011-05-24 7 views
1

私はindex.htmlという名前のページがあります。その上で、私は以下の2つのオプションを持つメニューありますAJAXの読み込み機能、ページの特定のセクションを表示するためのコードです

┏━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━┓ 
┃ Classes ┃ Update calendar ┃ 
┗━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━┛

をそして私は私がコンテンツページの置く空divありますもあります

<div id="content"></div> 

をメニューオプションを管理する外部JavaScriptファイル(menu.js)。 (以下コード)

は次に、calendar.phpに私は2つのコントロールを格納する:カレンダーログインフォーム(以下コード)
アイデアがある:ユーザーがUpdate calendarオプションをクリックしたときに

  • calendar.phpdiv内容にロードされますが、唯一のログインフォームが表示されます。
  • Classesオプションをクリックするとcalendar.phpのコンテンツにはdivというコンテンツがロードされますが、のカレンダーだけが表示されます。

私は現在、$(selector).load(url)をロードしてcalendar.php(下記参照)を使用しています。
予想通りUpdate calendarオプションが機能し、
が、私は両方のカレンダーログインフォームが表示さClassesをクリックしてください。


menu.js

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var sections = $("#menu li"); 
     var loading = $("#loading"); 
     var content = $("#content"); 

     sections.click(function(){ //When the user clicks an option... 
      showLoading(); //show the loading bar 

      switch(this.id) { 
       case "classes"://if the Classes option is clicked... 
        content.load("calendar.php", hideLoading); break; 

       case "classes_update"://if the Update calendar option is clicked... 
        content.load("calendar.php #section_update", hideLoading); break; 

       default: //if nothing is clicked... 
        hideLoading(); break; 
      } 
     }); 
    }); 
</script> 

calendar.php

<head> 
    <!-- links to JQuery resources --> 

    <script type='text/javascript'> 
     $(document).ready(function() { 
      $('#calendar').fullCalendar({ 
       header: { 
        left: 'prev,next today', 
        center: 'title', 
        right: 'month,agendaWeek,agendaDay' 
       } 
      }); 
     }); 
    </script> 

    <!-- other calendar styles --> 
</head> 
<body> 
    <div id="calendar"></div> <!-- calendar area --> 

    <div id="section_update"> <!-- login form area --> 

     <!-- form stuff --> 

    </div> 
</body> 
+0

私はあなたの問題を人々が理解できるように**あなたの質問を書き換えました**。 **、** **を見直して間違ったことを修正してください。 –

+0

jmendeth:ありがとう!私はあなたにこれを手伝って時間を割いてくれて本当にありがたいです。うわー!このコミュニティには、私の質問を再フォーマットするために余分な距離を尽くすことを望んでいる素敵な人々がいます!ありがとうございました! – user765081

答えて

0

苦労やウェブ上のAJAX/jQueryの情報を精練した後、私は与えるように見えたものを発見しました私はいくつかの希望を持っています。とボラ!!出来た。ページで

menu.js「クラス」メニューオプションのswitch文のコードでは、私はAjaxのコールバック関数を使用して、単純にこの

ような空のdivであることを ログインフォームのHTMLプロパティを設定しました

$( '#section_update').html( '');

それはトリックでした!

ありがとうございました。私が質問を再フォーマットするのを手伝った「jmendeth」に特別な感謝をしてくれてありがとうございました!

+0

最後の1つです。 ;-)あなたの答えを見てください.HTMLコードは表示されません。これを解決するには、コード行の前に** 4スペース**を入れてください。 –

関連する問題