jQueryでPHP変数を参照するにはどうすればよいですか？

Question

私はjQueryの完全な初心者です。ここにはこのスクリプトがあり、jQueryとPHPをミックスしたいと思います。私はコースを持っていて、そのコースはレッスンです。教師はコースを教えるために割り当てられます。私が欲しいのは、ポップアップが表示され、レッスンの詳細やコースの詳細が表示されるリンクです。私の問題は、$ l ['id']と$ c ['id']が異なるように、複数のリンク、したがってダイアログ/モーダルウィンドウをページ内に持つことになります。したがって、jQueryスクリプトがビューファイルの中にあることを考えれば、どうすれば$ l ['id']と$ c ['id']をjQueryで使用することができますか？コントローラに実際のコンテンツ自体を作成し、ビュー。申し訳ありませんが、私が意味をなさないのであれば、私はこのすべてについて自分はまだかなり混乱しています。あなたはすべてのリンクにいくつかの追加の属性を作成し、jQueryのattrの関数$（「A」）との情報を取得することができます使用して

view.php 
<script type="text/javascript"> 
$(function(){ 
     // setup ul.tabs to work as tabs for each div directly under div.panes 
     $("#tabs").tabs(); 
     $('#dialog').dialog({ 
          modal: true 
          });   
}) 
</script> 
<h1>Student Hub: Courses for <?php echo $studentName;?></h1> 

<div id="tabs"> 
    <?php echo $content;?> 
</div> 



controller.php 
This is in a foreach loop 
<div class="lessonDetails"> 
    <p><a href="#lessonInfo'.$l['id'].'">Lesson Details:</a><p> 
    <div id="lessonDialog'.$l['id'].'" title="Lesson Details"> 
    '.$l['name'].' 
    </div> 
</div> 

<div class="courseDetails"> 
    <p><a href="#courseInfo'.$c['id'].'">Course Timetable & Resources</a><p> 
    <div id="courseDialog'.$c['id'].'" title="Course Details"> 
    <p>'.$c['fullname'].'</p> 
    <p>'.$c['summary'].'</p> 
    <p>Upcoming Lessons: </p> 
</div>                 

Answer 1

技術の答えはあなたが一つにないのは、サーバー側の言語であり、一つは、クライアント側の言語です。 JavaScript（jQuery）を使用してPHP変数にアクセスすることはできません。ただし、PHP変数を生成時にHTMLページにドロップしてから、JavaScriptまたはjQueryを使用してそれらを取得することはできます。

あなたのシナリオを読んで、私はあなたの複雑なことを思っています。あなたのアプリケーションを考えてみてください。技術的な側面は考えていませんが、それをもっとレイアウトするべきです。私はあなたが学生のコントローラ、レッスンのコントローラ、コースのコントローラを持っていると思います。これらのコントローラーにはviewなどと呼ばれる操作が行われ、これらの操作では特定の生徒/コース/レッスンを表示するためにIDが使用されます。

HTMLページ/ビュー/テンプレートには、バニラURLだけが必要です。 JavaScriptはにウェブサイトを強化するために使用する必要があります。だからあなたの場合には、私はそれが次のように類似のマークアップを持っているでしょう：

<ul class="courses"> 
<?php foreach ($courses as $course): ?> 
    <li><a href="/courses/view/<?php echo $course->id; ?>"><?php echo $course->title; ?></a></li> 
<?php endforeach; ?> 
</ul> 

私は外部のJavaScriptファイルで、その後いただきたい、<a>タグのクリックをリッスンする機能を持っており、代わりにそのURLにナビゲートする代わりに、ポップアップ/モーダルウィンドウにページコンテンツを表示します。

<script> 
    $('.courses a').click(function(e) { 
     e.preventDefault(); 
     // load external page and display it in a modal 
    }); 
</script> 

このように、何らかの理由でJavaScriptが利用できない場合、ユーザーはコースの詳細ページに移動します。彼らはJavaScriptを持っている場合、彼らは派手なモーダルポップアップを取得します。

これが役に立ちます。私がいくつかのJDとコークスの後の早い時間にこれを書いたので、あなたが何かを清算する必要があるなら、私に知らせてください！

Answer 2

。ATTR（「コース」）。 $を使用することを忘れないjqueryの

$('.information').click(function(){ 
teacher= $(this).attr('teacher'); 
course=$(this).attr('course'); 



}); 

を使用して、その後

<a href="#" class=".information" teacher="idTeacher" course="idCourse" >list </a> 

よう

somethig（ '情報'）。（生きて）サーバーからデータを取得するためにいくつかのAJAXを使用している場合、それを解析してリンクを作成します

Answer 3

おそらく、隠れた値を持つフォームを作成できます。

<?php foreach($lesson as $l): ?> 
    <form method="POST" action=""> 
    <input type="hidden" name="lesson_id" value="<?php echo $l['id']; ?>" /> 
    <a href="#" class="model_window">Click</a> 
    </form> 
<?php endforeach; ?> 

のjavascript：

$(document).ready(function() { 
    $('.modal_window').click(function() { 
    var form = $(this).closest('form'); 
    var lesson_id = $(form).find('input[name=lesson_id]').val(); 

    // Do something with lesson_id 
    }); 
}); 

アイデアは、コースでも同じです。

** * ** *編集* ** * ****

たぶん、あなたは、入力配列を使用して試すことができます。あなたはこの

<input type="hidden" name="courses[]" value="1" /> 
<input type="hidden" name="courses[]" value="2" /> 

JavaScriptのようなもの持ってAssumming：

var courses = $(form).find('input[name^=courses]'); 
$(courses).each(function() { 
    var course = $(this).val(); 
}); 

Answer 4

JavaScriptコード内にタグを配置できます。そのコードはサーバー側であるため、JavaScriptクライアント側のコードに「レンダリング」します。したがって、JavaScriptはPHPスクリプトによって保存された値にアクセスできます。

Answer 5

jQueryUIダイアログを使用したソリューションです。 IDなしのは、しかし必要はありません、彼らはそれにデータ属性として追加されなければならない必要

<p><a href="#courseInfo'.$c['id'].'" data-id="'.$c['id'].'" >Course Timetable & Resources</a><p> 

このことができます簡単にjQueryのデータとIDを取得（）メソッドをリンクします。

ダイアログは、1回使用ごとに作成され、破棄されます。コメントに記載されているように、どのようなコンテンツがダイアログに表示されるのかはわかりません。 hrefからajaxであれば簡単に調整できます

$('.lessonDetails a, .courseDetails a').click(function(){ 
    var $this=$(this); 
    /* if need the id associated to link*/ 
    var id=$this.data('id');  

    var content= ''/* ??????? */ 

    var title=$this.parent().next().attr('title') 
    loadDialog(title, content); 
    return false; /* stop browser following href*/ 

}) 


function loadDialog(title, content) { 

    var dialogOpts = { 
     modal: true, 
     title: title, 
     width: 800, 
     close: function() { 
      /* remove this dialog from DOM on close*/ 
      $(this).remove() 
     } 
    }; 
    $('<div>').append(content).dialog(dialogOpts); 

}