Question

I’m displaying tabular data populated via loop from a database.

I know that I could edit/delete etc in the usual manner, where

    <a href="edit_record.php?id=' . $row['abstract_id'] . '">Edit Record</a>

But I would really like to do this using the modal-message feature of jquery.

However, what I can’t seem to figure out is how to indicate to the modal-message window/div the correct record number from the database (whereas in php, I’m simply using the print function.

Is it feasible to set maybe an onClick event that sets a variable ($id) to equal whatever the $row[‘abstract_id’] number is?

The idea being that when I click on the Edit button, I can put php within the div and it will call up the correct record.

EDIT for clarity: I don’t want to actually edit it, it’s to pull up the text of the abstracts, which are too big to fit in the tabular format (but there are too many abstracts to give each submission its own page).

The key here is how I can pass the record id from the database/php side to the javascript side even if it’s setting/resetting some variable. I thought about using .load(read_abstract.php) but then realized that I don’t think that .load(read_abstract.php?id=’ . $row[‘abstract_id’]’) would work- and don’t know what the JS equivalent would be (or if it exists).

Answer 1

You can move the id into a data attribute in the HTML tag:

echo '<span class="edit-button" data-abstract-id="'.$row['abstract_id'].'">edit</span>'

Then in the modal, you’ll be able to reference it with:

jQuery('.edit-button').click(function() {
     id = jQuery(this).attr('data-abstract-id');
});