IDに基づいてコンテンツを表示します（データベースから、HTML IDではありません）

Question

これは私がしたいことです。私は以下のhtmlのプロジェクトをdbから表示しています。

<div class="col-md-5"> 
    <ul class="todo-projects-container"> 
    <li class="todo-padding-b-0"> 
     <div class="todo-head"> 
      <button class="btn btn-square btn-sm green todo-bold">Add Project</button> 
      <h3>Projects</h3> 
      <p>4 Waiting Attention</p> 
     </div> 
    </li> 
    <?php foreach ($projects as $project): ?> 
     <li class="todo-projects-item"> 
      <h3><?php echo $project->project_name ?></h3> 
      <p><?php echo $project->project_body ?></p> 
      <div class="todo-project-item-foot"> 
      <p class="todo-red todo-inline">Project #<?php echo $project->project_id ?></p> 
      <p class="todo-inline todo-float-r">32 Members 
       <a class="todo-add-button" href="#todo-members-modal" data-toggle="modal">+</a> 
      </p> 
      </div> 
     </li> 
     <div class="todo-projects-divider"></div> 
    <?php endforeach; ?> 
    </ul> 
</div> 

私は最初のページをロードすると、最初のプロジェクトは（jqueryのを使用して）クラスが=「アクティブ」を受信すると、それは前の李からアクティブなクラスを削除し、クリックされたものに追加したプロジェクトをクリックしたときに。ここまでは順調ですね。

今、私は次のように表示する必要があります。上記のhtmlで

<ul class="todo-tasks-content"> 
    <li class="todo-tasks-item"> 
     <h4 class="todo-inline"> 
      <a data-toggle="modal" href="#todo-task-modal">Welcome to the hotel California</a> 
     </h4> 
     <p class="todo-inline todo-float-r">Bob, 
      <span class="todo-red">TODAY</span> 
     </p> 
    </li> 
    <li class="todo-tasks-item"> 
     <h4 class="todo-inline"> 
      <a data-toggle="modal" href="#todo-task-modal">Talking 'bout my generation</a> 
     </h4> 
     <p class="todo-inline todo-float-r">Shane, 
      <span class="todo-red">TODAY</span> 
     </p> 
    </li> 
</ul> 

すべての情報が明らかに静的です。私はdbから情報を取得するためにajax呼び出しを行う方法を知っています。私が実際にやり方を知らないのは、プロジェクトをクリックするたびにproject_idに従って対応するタスクを表示することです。

私はAjaxの呼び出しを行うといくつかのHTMLと一緒にデータを返し、その後、（ダミー構文）のような何かをする必要があり仮定

onclick(function() { 

    var tasksHTML = insert ajax call here 


}); 

ない、これは正しいアプローチであれば、私は新たなんだ確認jsに。助言がありますか？

UPDATE：絵で

が、そこアクティブ（クリック）プロジェクトであり、右側にそのプロジェクトIDを持つタスクです：ここでは

は絵です。プロジェクトをクリックするとどのようにタスクリストを変更できますか？

Answer 1

まず、javascriptにIDを取得して、タスクを取得するPHPファイルに渡すことができるようにする必要があります。

JQueryをバインドしていると仮定して、<li>にクリックすると、データ属性も含めてprojectidという名前にします。または、このデータ属性は、clickメソッドがバインドされている場所に追加します。

<?php foreach ($projects as $project): ?> 
     <li class="todo-projects-item" data-projectid="$project['id']"> 
      //................. 
    <?php endforeach; ?> 

誰かがホテルに」歓迎をクリックしたときに、これはあなたの.click方法

$('.todo-projects-item').click(function(){ 
     //Get your project id from the data-attribute 
     projectId = $(this).data('projectid'); 

     //run your ajax   
     $.post('phpfile.php', {projectId:projectId}, function(r){ 
      //your phpfile.php should echo a json of the tasks 
      //see example below 
      $('.class-of-the-task-div').html(r.html); 
     }, 'JSON'); 

}); 

であなたのPHPファイルは、したがって、この

$r['html'] = '<ul class="todo-tasks-content"> 
        <li class="todo-tasks-item"> 
        //....................Stuff 
        </li> 
       </ul>'; 

echo json_encode($r);