I have page with data from database:
<?php
$host = 'localhost';
$user = 'root';
$pass = '';
$base = 'zar';
try {
$db = new PDO('mysql:host='.$host.';dbname='.$base.';charset=utf8', $user, $pass, array(PDO::ATTR_EMULATE_PREPARES => false,PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
$name = 'name';
$pin = 'pin';
$ip = 'ip';
$id = 'id';
$statement = $db->query('SELECT id, ip, name, pin FROM devic');
foreach($statement as $wiersz)
{
?>
<div id = "<?php print($wiersz['id'])?>"
<img class= "obraz" src="css/bulb_off.png" alt="...">
<div class="relayBlock"><span class="relayTitle"><?php print($wiersz['name']) ?> </span>
<button class="btn btn-block btn-lg btn-primary " value="on">Wł</button>
<button class="btn btn-block btn-lg btn-danger " value="off">Wył</button>
</div>
</div>
<?php
}
$statement->closeCursor();
} catch(PDOException $err) {
exit('error: '.$err->getMessage());
}
?>
JS:
<script type="text/javascript">
$(document).ready(function () {
$('.btn').click(function() {
var val = $(this).val();
$.ajax({
url: "try.php",
type: "POST",
data: {'myVar': val},
success : function(data) {
if (data == 1) {
$('.obraz').attr({src : "css/bulb_on.png"})
}
else{
$('.obraz').attr({src : "css/bulb_off.png"})
}
}
});
});
});
</script>
Now, if I click any button, the pictures for all the rows in the database change. I want to do so that after clicking a button for a specific row from the database, the picture changed only for that line. I know that this is because every picture has the same class for the picture, but can I do it in a different way?
