find records in sql with same id as html button's id and generate a modal

Question

The problem is that I have an html table with short info about employees that is taken from MySQL database. I'm trying to make a button with some ID that will open a modal window with full info about employee with the same value in it's field called 'ButtonID'. I tried to make desired query and set it to some variable in php and then access it in javascript but it didn't end well.

 <!--
 in <input id = "1" type="button" value="Full Info" input id equals to sql 
'ButtonID' fields value
 -->
 Edit:
<form action="">
<input id = "1" type="button" value="Full Info" 
 onclick="fullInfo()">
 </form>

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Список сотрудников</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
      <body>

    <div class = "header">
        <img src = "img/header.png"></img>
    </div>

    <div class = "container">
    <?php

    echo "<table id='table_id' class = 'table table-striped'>";
    echo "<thead>
            <tr>
                <th>№</th>
                <th>ФИО</th>
                <th>Имя транслитом</th>
                <th>Дата рождения</th>
                <th>Должность</th>
                <th>Дата приёма</th>
                <th>№ удостоверения</th>
                <th>Полная информация</th>
            </tr>
        </thead>
        ";

    class TableRows extends RecursiveIteratorIterator { 
        function __construct($it) { 
            parent::__construct($it, self::LEAVES_ONLY); 
        }

        function current() {
            return "<td>" . parent::current(). "</td>";
        }

        function beginChildren() { 
            echo "<tr>"; 
        } 

        function endChildren() { 
            echo "</tr>" . "\n";
        } 
    } 

    $servername = "localhost";
    $username = "user";
    $password = "password";
    $dbname = "test";

    try {
        $conn = new PDO("mysql:host=$servername;dbname=$dbname;charset=utf8", $username, $password);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $stmt = $conn->prepare("SELECT number, fullname, engname,birthdaydate, position, recruitmentDate,id,buttonid FROM employees"); 
        $ids = $conn->prepare("SELECT * FROM employees"); 
        $stmt->execute();

        // set the resulting array to associative
        $result = $stmt->setFetchMode(PDO::FETCH_ASSOC); 
        foreach(new TableRows(new RecursiveArrayIterator($stmt->fetchAll())) as $k=>$v) { 
            echo $v;
        }
    }
    catch(PDOException $e) {
        echo "Error: " . $e->getMessage();
    }

    $conn = null;
    echo "</table>";
    ?>
    </div>
    <div class = "footer">
        <img src = "img/footer.jpg"></img>
    </div>

        <!--<link rel="stylesheet" type="text/css" href="css/styles.css">-->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/normalize.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
        <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
        <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
        <script>

    $(document).ready(function() {
        $('#table_id').DataTable( {
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.13/i18n/Russian.json"
            }
        } );



    } );
        </script>
        <!--
        <script>
        function fullInfo(){
            var ids = <?php echo json_encode($ids); ?>;
            for (int i = 0;i<ids.length;i++){
                if (ids['buttonID'] == this.id){
                    alert ("good");
                }
            }
        };
        </script>
        -->

      </body>
    </html>

I don't see the code, where you output the button. Can you show it? — user4035, Jul 21 '17 at 07:05
"I tried to make desired query and set it to some variable in php and then access it in javascript" - what do you mean here? Why did you try to access a php variable in javascript? Your task can be solved either by opening a new page (easy way) or via AJAX query. — user4035, Jul 21 '17 at 07:07
@user4035 can you explain how to make it by opening a new page or write a example of code please? I tried to access it in javascript because i don't understand how to run query in JS and how to executre onClick function in php. — Damir Badilov, Jul 21 '17 at 07:13
Do you want to use Ajax or open a new page? The second variant is preferable. — user4035, Jul 21 '17 at 07:17
You don't need to store it in the database, if it is static. Plus you shouldn't create several HTML elements with the same id. — user4035, Jul 21 '17 at 07:22
I couldn't make the dynamic creation of these buttons in a table rows. I thought if it is input's id then everything is ok:) — Damir Badilov, Jul 21 '17 at 07:25

user4035 · Accepted Answer · 2017-07-21T12:01:46.803

0

You create a function that will process a call to your site like this:

http://my-site.com/employee.php?id=12

employee.php (idea)

$stmt = $conn->prepare("SELECT * FROM employees WHERE id=:id"); 
$stmt->execute(array(':id' => $_GET['id']));
$employee = $stmt->fetch(PDO::FETCH_ASSOC);
print "<ul>";

//list the employee data
foreach($employee as $key => $value)
{
    $key = htmlspecialchars($key, ENT_QUOTES, 'UTF-8');
    $value = htmlspecialchars($value, ENT_QUOTES, 'UTF-8')
    print "<li>". $key .': ' . $value . '</li>';
}
print "</ul>";

I suggest you to use an <a> tag instead of <button> as you have a link here, not a form. Just stylize it with CSS. In the column "Полная информация" of your table create a link:

<a target="_blank" href=\"/employee.php?id=$row['id']\">Полная информация</a>

This will open a new page. Process the request with PHP, I gave you the sample code.

Then add the ornaments like making the window modal, changing it's size etc.

edited Jul 21 '17 at 12:01

answered Jul 21 '17 at 07:41

user4035

22,508
11
59
94

When im trying to open /employee.php?id=12 it throws me this warning Warning: Invalid argument supplied for foreach() – Damir Badilov Jul 21 '17 at 07:59
@DamirBadilov Do you connect to the database? Try to `var_dump($_GET['id']);`, what does it print? – user4035 Jul 21 '17 at 08:09
string(2) "12" and that warning – Damir Badilov Jul 21 '17 at 08:11
@DamirBadilov That warning comes from the database error - you don't get the data. Try to debug it yourself. – user4035 Jul 21 '17 at 08:14
can you please explaing this ("SELECT * FROM employees WHERE id=:id"); id - id from sql? :id - button id? – Damir Badilov Jul 21 '17 at 08:23
@DamirBadilov :id is a parameter. It is the id of the employee in the database, that must be passed to script. – user4035 Jul 21 '17 at 08:58

score 0 · Answer 2 · answered Jul 21 '17 at 08:10

0

For each row echo a button with its id as the employees id. Add a letter before the id on the button to make sure it doesn't get repeated.

echo "<button id='emp*$employeeid*'>view</button>

answered Jul 21 '17 at 08:10

pickman murimi

53
7

find records in sql with same id as html button's id and generate a modal

2 Answers2