Transferring a contents of a table cell into document loaded by jQuery

Question

I currently have a table in the current format:

ID  Client Info  Case Detail  Accident Date  Case Opened  No Days  Function
--  -----------  -----------  -------------  -----------  -------  --------

which contains dynamic information being pulled out of the database.

The ID column is of particular importance because I need to extract the data from this cell when the user clicks on the "Manage" button under the function column.

Right now this is the code that runs when the user clicks on the "Manage" button.

<script>
  $(document).ready(function () {
    $(".manage").click(function () {
    $('#casesHeading').hide("slow");
    $('#casesTable').hide("slow");
    $('#results').load('components/manage.php');
    });
    });
</script>

A heading and table is hidden and the page "manage.php" is loaded in results div.

But I was just wondering if there was anyway for me to transfer the content of the ID cell (this varies per row) obviously into the manage.php file (which is currently empty).

So if the user clicks on a row with the ID cell data 233-cv then this information would be transferred over into the manage.php file. Hopefully I'm making sense. I read up on the jQuery .find function and it made some sense but I have no idea how to incorporate it in this instance.

UPDATE 1

I'm trying to accomplish somethng similar to this http://jsfiddle.net/ZjvAz/ .

UPDATE 2

I've tried the following code but it doesn't seem to be working.

<script>
  $(document).ready(function () {
$(".manage").click(function() {
    var clickedButton = $(this);
        clickedButton.parent().find(".result").text(
            clickedButton.parent().parent().parent().find('.caseID').text()
        );
    });
});
</script>

Answer 1

jQuery.load( handler(eventObject) ) Returns: jQuery

Description: Bind an event handler to the "load" JavaScript event.

As 'components/manage.php' isn't an event-handler – what are you trying to do?

If you want to request data from the server (also with sending smoe ID to it), you should read about the jQuery.ajax( url [, settings] ) function.

http://api.jquery.com/jQuery.ajax/

http://api.jquery.com/load-event/

Answer 2

I would have my manage.php file take the case ID as an argument. It would be called in a manner such as manage.php?caseId=123 .

If you have control over the generated data, you could generate the required information to go in the button. There is no need for jquery code to traverse the DOM to the ID field. I would just generate something like this in the table source

<tr>
  <td class="id">123</td>
  ...
  <td class="function">
    <button class="manage" onclick="loadManagementPage(123)">manage</button>
  </td>
</tr>

If you cannot control the HTML source and do need to navigate, your best friend is probably using closest() which navigates up the dom. Use this to find the row element tr

For self-documenting purposes, i am not using chaining here

$( '.manage' ).click(function(){

  // find the row we are in
  var $self = $( this );
  var $row = $self.closest( 'tr' );

  // read the id
  var $idCell = $row.find( 'td.id' );
  var caseId = $idCell.text();

  // locate an area on the page and dynamically load in some content
  var $target = $row.find( 'td.result' ); // find the result cell
  var $target = $( '#knownId' )           // *OR* find a div with a known id
  $target.load( 'manage.php?caseId=' + caseId );
});