Cesar A. Fonseca Cesar A. Fonseca - 5 months ago 13
jQuery Question

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

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:


  1. 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.

  2. 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><a href="#">Ir para</a></li>
<li><a href="#">dashboard</a></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:

enter image description here

The "lock" option:

enter image description here

Answer

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><a href="#">Ir para</a></li>
    <li><a href="#">dashboard</a></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).

Comments