connecting jquery attr to PHP Mysql? - php

Question

a PHP table populates its data from mysql, When a user clicks .button a drop down table row menu appears where user has ability to add item to cart, the name of the item in cart should be the mysql entry $sound['downloadlink'] located in the table row above .mp3buy, It is adding the actual string "$sound['downloadlink']" instead of what the mysql entry for download link should be.
PHP Table
<?php
while($sound=mysql_fetch_assoc($records)){
echo "<tr class='adder'>";
echo "<td width='40' class='player'> <a href='beats/".$sound['downloadlink']."' class='sm2_button'>Play/</a></td>";
echo '<td width="250" class="name">'.$sound['name'].' <span class="red date">'.$sound['date'].'</span></td>';
echo "<td width='88' class='bpm'>".$sound['bpm']." B.P.M.</td>";
echo "<td width='72' class='length'>".$sound['length']."</td>";
echo "<td width='275' class='keywords'>".$sound['keywords']."</td>";
echo "<td width='96' class='buy'><img class='button' src='99cents.png'/></td>";
echo "</tr>";
}
?>
Jquery:
$('#mytable').on('click', ".button", function () {
var thisRow = $(this).parents('tr.adder');
var hasNextRow = thisRow.next('tr.added').length;
if (hasNextRow) {
thisRow.next('tr.added').remove();
} else {
$(this).parents('tr.adder').after('<tr class="added"><td height="100" colspan="6" ><img class="mp3buy" data-product-id=$sound["downloadlink"] src="mp31.png"/></td></tr>');
}
});
$('#mytable').on('click', ".mp3buy", function () {
var flag = $(this).data('flag');
simpleCart.add({
name : $(this).attr("data-product-id"),
price : .99,
quantity : (flag ? -1 : 1)
});
$(this).attr("src", flag ? "mp31.png" : "mp32.png");
$(this).data('flag', !flag);
});

Answer 1

Firstly, your PHP in your jQuery block is not getting parsed as you need to write <?= $sound["downloadlink"] ?> (PHP 5.4 syntax).
However, that's not your solution as you want the correct link for the product, not one fixed value. You could change your button so that it knows the link, as follows:
<img class='button' src='99cents.png' data-link='".$sound["downloadlink"]."'/>
Then you need to make quite a few jQuery changes:
$('.button').on('click', function () {
var thisRow = $(this).parents('tr.adder');
var hasNextRow = thisRow.next('tr.added').length;
if (hasNextRow) {
thisRow.next('tr.added').remove();
} else {
$(this).parents('tr.adder').after(
'<tr class="added"><td height="100" colspan="6" ><img class="mp3buy" data-product-id="'
+ $(this).data('link')
+ '" src="mp31.png"/></td></tr>'
);
}
});
$('#mytable').on('click', ".mp3buy", function () {
var flag = $(this).data('flag');
simpleCart.add({
name : $(this).data("product-id"),
price : .99,
quantity : (flag ? -1 : 1)
});
$(this).attr("src", flag ? "mp31.png" : "mp32.png");
$(this).data('flag', !flag);
});
That's roughly right but I might have missed something. The idea is that you keep your data in your HTML then use your script to manipulate the data. Don't put your data in your script. Also, it doesn't really make sense to transfer the value of the data-downloadlink attribute over to a data-product-id attribute. It would be better to refer to the original value.