Operations on data from the database

Question

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?

If you want to update only a specific record then you'd need to identify that specific record in the WHERE clause in your UPDATE statement. — David
– David, Commented Dec 19, 2017 at 16:35
No, I wan't to update data on database, I only want to update data on my html page. — Daro125
– Daro125, Commented Dec 19, 2017 at 16:40
if you don't want to update the record, what is the purpose of the call to "try.php"? — ADyson
– ADyson, Commented Dec 19, 2017 at 16:50
try.php send request for other server and return 1 or 0. But it isn't important at this moment. — Daro125
– Daro125, Commented Dec 19, 2017 at 16:54

Ricard Espinàs Llovet · Accepted Answer · 2017-12-19 16:40:49Z

1

var idParent = getvalueId from the div parent
if (data == 1) {
     $('#' + idParent +' .obraz').attr({src : "css/bulb_on.png"})
} else{
     $('#' + idParent +' .obraz').attr({src : "css/bulb_off.png"})
}

jquery, selector for class within id

answered Dec 19, 2017 at 16:40

Ricard Espinàs Llovet

6951 gold badge7 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daro125 Over a year ago

"var idParent = getvalueId from the div parent" should be in function "function(data)"?

Daro125 · Accepted Answer · 2017-12-19 17:29:02Z

I add changed code, it works: JS:

<script type="text/javascript">
        $(document).ready(function () {
            $('.btn').click(function() {
                var val = $(this).val();
                var idParent = $(this).parent().attr("id");
                $.ajax({
                    url: "try.php",
                    type: "POST",
                    data: {'myVar': val},

success : function(data) {
        if (data == 1) {            
            $('#' + idParent +' .obraz').attr({src : "css/bulb_on.png"})
        }
        else{
            $('#' + idParent +' .obraz').attr({src : "css/bulb_off.png"})
    }
}
      });
            });
        });
    </script>

Thanks @Ricard Espinàs Llovet for suggestion.

Collectives™ on Stack Overflow

Operations on data from the database

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related