HoodCoderMan HoodCoderMan - 5 months ago 8
jQuery Question

Send data-attributes to modal

I am using the following code in an attempt to send row data from the page to a modal window:

<?php
$select = "SELECT * FROM table";
$res = mysql_query($select) or die();
echo "<div>"
echo "<table>"
echo "<tr><th>Edit/Delete</th>
<th>Group</th>
<th>Type</th>
<th>Service</th>
<th>Description</th>
</tr>";
while(($Row = mysql_fetch_assoc($res)) !== FALSE){
echo "<tr><td>
<a href='' class='open-EditRow btn btn-primary' value='Edit'
data-des=\"{$Row[description]}\"
data-group=\"{$Row[resgroup]}\"
data-type=\"{$Row[restype]}\"
data-service=\"{$Row[service]}\">Edit</a>
</td>";
echo "<td>{$Row[resgroup]}</td>";
echo "<td>{$Row[restype]}</td>";
echo "<td>{$Row[service]}</td>";
echo "<td>{$Row[description]}</td></tr>\n";
};
echo "</table>";
echo "</div>";
if(mysql_num_rows($res) == 0){
echo "No Results";
}
}
?>


As you can see in the a tag above, I am using the data-attributes to get the row data, which includes resgroup, restype, service, and description. At this point, I can get the modal window to open with no problem.

The javascript I am using looks like this:

<script type="text/javascript">
$(function()
{
$('.open-EditRow').click(function(e){
e.preventDefault();
$group = $(this).attr('data-group');
$type = $(this).attr('data-type');
$service = $(this).attr('data-service');
$descript = $(this).attr('data-description');
console.log($group);
console.log($type);
console.log($service);
console.log($descript);
});
});
</script>


I can do an alert($group) and the row data for data-group does indeed appear in the alert window.

My modal window has a form with input tags that I am trying to populate with the data-attributes. The input tags have the a class, name, and id with the same name as the data-attributes themselves.

I know I do not need to use console.log(); but I am not sure how to pass the data any further than an alert window.

Answer

It looks like you are already using jQuery, so if the form inputs have ids that match the data-attribute names, I believe you should be able to fill them in using the val() method:

$('#group').val($group);

You may also use the data() method to retrieve the data attributes. Instead of

$group = $(this).attr('data-group');

you can use

$group = $(this).data('group');