Changing the value of a line with n lines (jquery, php, mysql) - php

Question

When I click on "lock" I want only the line where I clicked to change the status to true and the lock be locked. When I click on "unlock" I want only the line where I clicked to change the status to false and the released lock.
In my current code:
when I click on a lock on the first line your status changes and also the lock, but the lock of the other lines also change. I need help to fix this.
There is also another thing that I think I should use ajax. When the table is generated and executed for the first time all status will be in false and the lock "open" To mark a line as locked (lock) the status will make is true, and I need to send this "true" pro database and save it through a php script, so that, to reload the page status I had changed continues saved.
I am using the following plugin Context menu:
For better visualization, I put my code in pastebin.
change.js
$(function(){
$.contextMenu({
selector: '.context-menu-one',
items: {
"block": {
name: "Lock",
icon: "edit",
callback: function(key, options){
var m = $(this).text();
var set = block(m, $(this)); // passando - this - como parâmetro de função
}
},
"sep1": "----------",
"unblock": {
name: "Unlock",
icon: "cut",
callback: function(key, options){
var m = $(this).text();
var set = unblock(m, $(this)); // passando - this - como parâmetro de função
}
}
}
});
});
function block(x, thisObj)
{
if (x === "false")
x = "true";
thisObj.html(x);
$(".lock1").html('<i class="fa fa-unlock" aria-hidden="true"></i>');
}
function unblock(x, thisObj)
{
if (x === "true")
x = "false";
thisObj.html(x);
$(".lock1").html('<i class="fa fa-lock" aria-hidden="true"></i>');
}
PasteBin.
network.php
<?php
$con = mysqli_connect("localhost", "root", "", "mydb2");
?>
<ul class="breadcrumb">
<li>Ir para</li>
<li>dashboard</li>
</ul>
<div class="page-content-wrap">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="page-title">
<h2><span class="fa fa-hand-spock-o"></span> - Virtual Private Network</h2>
<p id="test">abc</p>
</div>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table datatable table-striped">
<thead>
<tr>
<th>Common Name</th>
<th>Real Address</th>
<th>Virtual Address</th>
<th>Bytes Sent</th>
<th>Bytes Received</th>
<th>Since</th>
<th>Status</th>
<th>Blocked</th> <!--inserir a imagem de cliente bloqueado ou não -->
</tr>
</thead>
<tbody>
<tr>
<td class="context-menu-one">orion</td>
<td class="context-menu-one">177.43.212.110</td>
<td class="context-menu-one">172.16.191.145</td>
<td class="context-menu-one">872199</td>
<td class="context-menu-one">860412</td>
<td class="context-menu-one">Wed May 25 07:22:52 2016</td>
<td class="context-menu-one">false</td>
<td class="lock1"><i class="fa fa-unlock" aria-hidden="true"></i></td>
</tr>
<tr>
<td class="context-menu-one">elgin</td>
<td class="context-menu-one">189.10.58.244</td>
<td class="context-menu-one">172.16.6.210</td>
<td class="context-menu-one">301365</td>
<td class="context-menu-one">250459</td>
<td class="context-menu-one">Wed May 25 07:01:37 2016</td>
<td class="context-menu-one">false</td>
<td class="lock1"><i class="fa fa-unlock" aria-hidden="true"></i></td>
</tr>
<tr>
<td class="context-menu-one">databits</td>
<td class="context-menu-one">187.17.235.203</td>
<td class="context-menu-one">172.16.136.217</td>
<td class="context-menu-one">459833</td>
<td class="context-menu-one">409771</td>
<td class="context-menu-one">Wed May 25 06:09:01 2016</td>
<td class="context-menu-one">false</td>
<td class="lock1"><i class="fa fa-unlock" aria-hidden="true"></i></td>
</tr>
<tr>
<td class="context-menu-one">proficio</td>
<td class="context-menu-one">179.213.177.117</td>
<td class="context-menu-one">172.16.196.93</td>
<td class="context-menu-one">1083595</td>
<td class="context-menu-one">945154</td>
<td class="context-menu-one">Tue May 24 21:36:21 2016</td>
<td class="context-menu-one">false</td>
<td class="lock1"><i class="fa fa-unlock" aria-hidden="true"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
?>
PasteBin.
My table:
The "lock" option:

Answer 1

It was a fun one!
First, I changed the position of context-menu-one class for the parent's.
And delegated the action on it's tds by this: selector: '.context-menu-one td'.
Because it makes less elements to "watch" for jQuery... And cleans the code.
Then... I modified the callback functions in your items object.
I played with .parent(), siblings() and prev() to target all the right elements.
HTML:
<ul class="breadcrumb">
<li>Ir para</li>
<li>dashboard</li>
</ul>
<div class="page-content-wrap">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="page-title">
<h2><span class="fa fa-hand-spock-o"></span> - Virtual Private Network</h2>
<p id="test">abc</p>
</div>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table datatable table-striped">
<thead>
<tr>
<th>Common Name</th>
<th>Real Address</th>
<th>Virtual Address</th>
<th>Bytes Sent</th>
<th>Bytes Received</th>
<th>Since</th>
<th>Status</th>
<th>Blocked</th> <!--inserir a imagem de cliente bloqueado ou não -->
</tr>
</thead>
<tbody>
<tr class="context-menu-one row">
<td>orion</td>
<td>177.43.212.110</td>
<td>172.16.191.145</td>
<td>872199</td>
<td>860412</td>
<td>Wed May 25 07:22:52 2016</td>
<td>false</td>
<td class="lock1"><i class="fa fa-unlock" aria-hidden="true"></i></td>
</tr>
<tr class="context-menu-one row">
<td>elgin</td>
<td>189.10.58.244</td>
<td>172.16.6.210</td>
<td>301365</td>
<td>250459</td>
<td>Wed May 25 07:01:37 2016</td>
<td>false</td>
<td class="lock1"><i class="fa fa-unlock" aria-hidden="true"></i></td>
</tr>
<tr class="context-menu-one row">
<td>databits</td>
<td>187.17.235.203</td>
<td>172.16.136.217</td>
<td>459833</td>
<td>409771</td>
<td>Wed May 25 06:09:01 2016</td>
<td>false</td>
<td class="lock1"><i class="fa fa-unlock" aria-hidden="true"></i></td>
</tr>
<tr class="context-menu-one row">
<td>proficio</td>
<td>179.213.177.117</td>
<td>172.16.196.93</td>
<td>1083595</td>
<td>945154</td>
<td>Tue May 24 21:36:21 2016</td>
<td>false</td>
<td class="lock1"><i class="fa fa-unlock" aria-hidden="true"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript:
$(function(){
$.contextMenu({
selector: '.context-menu-one td',
items: {
"block": {
name: "Lock",
icon: "edit",
callback: function(key, options){
console.log("HERE");
if ($(this).parent().hasClass("row")){
console.log("HERE IF");
thisRowPadlock = $(this).siblings(".lock1");
var m = $(this).siblings(".lock1").prev().text();
console.log(m);
var set = block(m, thisRowPadlock, $(this).siblings(".lock1").prev()); // passando - this - como parâmetro de função
}
}
},
"sep1": "----------",
"unblock": {
name: "Unlock",
icon: "cut",
callback: function(key, options){
console.log("THERE");
if ($(this).parent().hasClass("row")){
thisRowPadlock = $(this).siblings("lock1");
var m = $(this).siblings(".lock1").prev().text();
console.log(m);
var set = unblock(m, thisRowPadlock, $(this).siblings(".lock1").prev()); // passando - this - como parâmetro de função
}
}
}
}
});
});
function block(x, padlock, thisObj)
{
console.log("Function block");
if (x === "false")
x = "true";
thisObj.html(x);
$(padlock).html('<i class="fa fa-unlock" aria-hidden="true"></i>');
}
function unblock(x, padlock, thisObj)
{
console.log("Function unblock");
if (x === "true")
x = "false";
thisObj.html(x);
$(padlock).html('<i class="fa fa-lock" aria-hidden="true"></i>');
}
And a working Fiddle (with some missing CSS, sorry).