Question

I have a table of assignments. Within each row is a cell, that when clicked will bring up a hidden div to the right of the table. Within the div is a form that allows a user to associate a selected document with a task.

Currently the table is generated, in part, by a PHP “for” loop; I am cycling through an array and creating a new table row for each array index.

Within each row there are two table cells. I want the contents of one of the cells to be a hyperlink that, when clicked, will display a hidden div. Within the hidden div will be a form. The form will have a hidden input box, and I would like to dynamically set this value when the hyperlink is clicked.

Here is a sample of the table:

<table>
  <tr>
    <th>Task</th>
    <th></th>
  </tr>

  <?php
    for($i=0; $i<sizeof($task_array); $i++)
    { ?>
      <tr>
         <td><?php echo $task_array[$i]['task'];?></td>
         <td><a href="#" id="show_div">Attach Doc</a></td>
      </tr>
    }
  ?>
</table>

Here is the hidden div and form:

<div id="hidden_div">
  <form action="[url]" method="post" enctype="multipart/form-data">
  <label for="file">Filename:</label>
  <input type="file" name="file" id="file" />           
  <input type="hidden" id="task_id" value="">
  <input type="submit" name="submit" value="Submit" />
  </form>
</div>

I know that I can do the following with JQuery to display the hidden div:

$("#hiddendiv").show();

I also know that the hidden field ‘task_id’ can be set with JQuery by using

$("#task_id").val() = 'some value';

The problem I am having is that, since the values are coming from an array, I’m not sure how to specify a specific value. For example, the value of a task id is found in the variable $task_array[$i][‘task_id’]. I could try this:

$('#show_div').click(function(){
     $("#hiddendiv").show();
             $("#task_id").val() = ???
});

I’m sort of stuck on specifying for which iteration to use the task id value.

My apologies if that wasn’t very clear. Any help would be appreciated. Thanks.

Answer 1

PHP

  <?php
    for($i=0; $i<sizeof($task_array); $i++)
    { ?>
      <tr data-task-id="<?php echo $task_array[$i]['task_id'];?>">
         <td><?php echo $task_array[$i]['task'];?></td>
         <td><a href="#" id="show_div">Attach Doc</a></td>
      </tr>
    }
  ?>

See that I added a data-attribute named data-task-id to the tr elements that stores the task_id for that row. We can use this in a click event handler later.

JS

//bind an event handler to the `tr` elements for the `click` event to show the `tr`s children elements (the `td`s)
$('tr').on('click', function () {
    $(this).children().show();

    //this next line is how we get the `task_id` associated with a row
    $(this).attr('data-task-id');
});

//since we bound an event handler to the `tr` elements for the `click` event it's a good idea to stop the propagation of click events on links within the `tr` elements so the event doesn't bubble up the the `tr` elements
$('tr').find('a').on('click', function (event) {
    event.stopPropagation();
});

Note that .on() is new in jQuery 1.7 and in this case is the same as .bind().

Also, you need to change the #show_div element’s ID for each element (IDs must be unique). I recommend just changing it to a class instead of using an id:

<td><a href="#" class="show_div">Attach Doc</a></td>

Then you can bind an event handler to it like this:

$('.show_div').click(function(){
     $("#hiddendiv").show();
     $("#task_id").val($(this).parents('tr').eq(0).attr('data-task-id'));
});