CODEWITHSUNDEEP
javascriptjqueryajax
Lberteh
Lberteh

Reputation: 175

Display content based on id (from database, not html id)

Here is what I want to do. I have the following html displaying projects from by 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>

When I first load the page, the first project receives the class="active" (using jquery) and whenever a click a project it removes the active class from the previous li and adds to the clicked one. So far so good.

Now I need to display the following:

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

On the above html all the info is obviously static. I know how to make ajax calls to fetch info from my db. What I don't really know how to do is displaying the corresponding tasks according to project_id whenever I click on a project.

I assume I need to make an ajax call and return the data along with some html and then do something like (dummy syntax) 

 onclick(function() { 

   var tasksHTML = insert ajax call here 


 });

Not sure if this is the right approach, I'm new to js. Any suggestions?

UPDATE:

Here is a picture:

todo

In the picture, there is an active (clicked) project and on the right are the tasks that have that project id. How do I change the tasks list when I click a project?

Upvotes: 0

Views: 552

Answers (1)

silversunhunter
silversunhunter

Reputation: 1269

First we need to give javascript a way to get the id so it can pass it to the PHP file that gets the tasks.

I assume you're binding JQuery click to the <li> so also include a data attribute and call it projectid. Or add this data attribute wherever the click method is bound.

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

If you are using JQuery do this in your .click method

$('.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');

});

your php file can be something like this

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

echo json_encode($r);

Upvotes: 1

Related Questions