Как добавить раскрывающееся меню, предварительно выбрать его значение и заполнить доступные параметры, используя данные из базы данных MySQL, используя Ajax, jQuery и PHP? - PullRequest
Новая
       5

Как добавить раскрывающееся меню, предварительно выбрать его значение и заполнить доступные параметры, используя данные из базы данных MySQL, используя Ajax, jQuery и PHP?

0 голосов
/ 26 сентября 2019

Я работаю над проектом, в котором мне нужно изменить текстовое поле ввода (канал), которое динамически генерируется в раскрывающемся меню, предварительно выбрать значение для раскрывающегося списка, используя данные из базы данных A (p07TABLE_02),а затем заполните список опций, используя данные из базы данных B (каналы).

Может ли кто-нибудь взглянуть на мой код и поделиться какой-нибудь идеей о том, как это сделать?Спасибо !!

enter image description here

index.php 

<html>
 <head>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
  <style>
  body
  {
   margin:0;
   padding:0;
   background-color:#f1f1f1;
  }
  .box
  {
   width:1270px;
   padding:20px;
   background-color:#fff;
   border:1px solid #ccc;
   border-radius:5px;
   /*margin-top:25px;*/
   box-sizing:border-box;
  }
  </style>
 </head>
 <body>

    <main>
      <div class="wrapper-main">
        <section class="section-default">

        <p class="login-status">Settings</p>

  <div class="container box">

    <div class="table-responsive">

    <div id="alert_message"></div>
    <table id="user_data" class="table table-bordered table-striped">
     <thead>
      <tr>
       <th>Sensor ID</th>
       <th>Sensor Location</th>
       <th>Channel</th>
      </tr>
     </thead>
    </table>
   </div>
  </div>

  </section>
  </div>
  </main> 
 </body>
</html>

<script type="text/javascript" language="javascript" >
 $(document).ready(function(){

  fetch_data();

  function fetch_data()
  {
   var dataTable = $('#user_data').DataTable({
    "processing" : true,
    "serverSide" : true,
    "order" : [],
    "ajax" : {
     url:"settings_fetch.php",
     type:"POST"
    }
   });
  }

  function update_data(id, column_name, value)
  {
   $.ajax({
    url:"settings_update.php",
    method:"POST",
    data:{id:id, column_name:column_name, value:value},
    success:function(data)
    {
     $('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
     $('#user_data').DataTable().destroy();
     fetch_data();
    }
   });
   setInterval(function(){
    $('#alert_message').html('');
   }, 5000);
  }

  $(document).on('blur', '.update', function(){
   var id = $(this).data("id");
   var column_name = $(this).data("column");
   var value = $(this).text();
   update_data(id, column_name, value);
  });

 });
</script>

settings_fetch.php 

<?php

require "includes/dbh.inc.php";

$columns = array('dev_id', 'dev_location', 't_channel');

$query = "SELECT * FROM p07TABLE_02";

if(isset($_POST["search"]["value"]))
{
 $query .= '
 WHERE dev_id LIKE "%'.$_POST["search"]["value"].'%" 
 OR dev_location LIKE "%'.$_POST["search"]["value"].'%" 
 ';
}

if(isset($_POST["order"]))
{
 $query .= 'ORDER BY '.$columns[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' 
 ';
}
else
{
 $query .= 'ORDER BY id DESC ';
}

$query1 = '';

if($_POST["length"] != -1)
{
 $query1 = 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}

$number_filter_row = mysqli_num_rows(mysqli_query($conn, $query));

$result = mysqli_query($conn, $query . $query1);

$data = array();

// 190916: The section below gets the drop down option
// ----------------------------------------------

$sql_1 = "SELECT botUsername FROM channels";
$result_1 = mysqli_query($conn, $sql_1);

$channel_arr = array();

if (mysqli_num_rows($result_1) > 0) {
   while ($row = mysqli_fetch_assoc($result_1)) {    
    $channel_arr[] = $row;
    }
    //print_r($channel_arr); 
}
// ----------------------------------------------

while($row = mysqli_fetch_array($result))
{
 $sub_array = array();
 //The code below allows the column to be editable.
 //$sub_array[] = '<div contenteditable class="update" data-id="'.$row["id"].'" data-column="dev_id">' . $row["dev_id"] . '</div>';

 //The code below makes the column not editable.
 $sub_array[] = '<div contenteditable="false" class="update" data-id="'.$row["id"].'" data-column="dev_id">' . $row["dev_id"] . '</div>';
 $sub_array[] = '<div contenteditable style="background-color: #d9ffb3;" class="update" data-id="'.$row["id"].'" data-column="dev_location">' . $row["dev_location"] . '</div>';
 $sub_array[] = '<div contenteditable style="background-color: #d9ffb3;" class="update" data-id="'.$row["id"].'" data-column="t_channel">' . $row["t_channel"] . '</div>';

 /*
 $sub_array[] = '<div contenteditable style="background-color: #d9ffb3;" class="update" data-id="'.$row["id"].'" data-column="t_channel">' . 

    '<select id="channel_list">
            <option value="0">Select Channel...</option>
    </select>'

 . '</div>'; 
 */

 $data[] = $sub_array;
}

// The section below is responsible for the statistics at the end of the display table
function get_all_data($conn)
{
 $query = "SELECT * FROM p07TABLE_02";
 $result = mysqli_query($conn, $query);

 return mysqli_num_rows($result);
}

$output = array(
 "draw"    => intval($_POST["draw"]),
 "recordsTotal"  =>  get_all_data($conn),
 "recordsFiltered" => $number_filter_row,
 "data"    => $data
);

echo json_encode($output);

?>

settings_update.php 

<?php

require "includes/dbh.inc.php";

if(isset($_POST["id"]))
{
 $value = mysqli_real_escape_string($conn, $_POST["value"]);
 $query = "UPDATE p07TABLE_02 SET ".$_POST["column_name"]."='".$value."' WHERE id = '".$_POST["id"]."'";
 //if(mysqli_query($connect, $query))

 if(mysqli_query($conn, $query))   
 {
  echo 'Data Updated';
 }
}
?>

включает в себя / dbh.inc.php 

<?php
$dBServername = "localhost";
$dBUsername = "root";
$dBPassword = "";
$dBName = "door_sensor";

// Create connection
$conn = mysqli_connect($dBServername, $dBUsername, $dBPassword, $dBName);

// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

database.sql 

CREATE DATABASE IF NOT EXISTS door_sensor;

CREATE TABLE IF NOT EXISTS p07TABLE_02 (
    id int NOT NULL AUTO_INCREMENT,
    dev_id varchar(20) NOT NULL,
    dev_location varchar(50) NOT NULL,
    t_channel varchar(50) NOT NULL,    
    PRIMARY KEY (id)
);

-- Insert sample data into the newly created "p07TABLE_02"

INSERT INTO p07TABLE_02 (dev_id, dev_location, t_channel)
VALUES
        ('1111111111', 'Site 1, 1F', 'channel_0'),
        ('2222222222', 'Site 1, 2F', 'channel_1'),
        ('3333333333', 'Site 1, 3F', 'channel_2'),
        ('4444444444', 'Site 2, 1F Front Gate', 'channel_3'),
        ('5555555555', 'Site 2, Basement', 'channel_0'),
        ('6666666666', 'Site 3, Backdoor', 'channel_0'),
        ('7777777777', 'Site 3, Roof Top', 'channel_0'),
        ('8888888888', 'Site 4, Water Tower', 'channel_3'),
        ('9999999999', 'Site 4, Engineering Room', 'channel_3'),
        ('1234567890', 'Site 5, Treasury', 'channel_3');

-- Data table for storing the names of the available channels

CREATE TABLE IF NOT EXISTS channels (
  id int NOT NULL AUTO_INCREMENT,  
  botUsername varchar(50) NOT NULL,
  botNote varchar(100),
  PRIMARY KEY (id)
);

-- Insert available channel info. into the newly created "channels"

INSERT INTO channels (botUsername)
VALUES
        ('channel_0'),
        ('channel_1'),
        ('channel_2'),
        ('channel_3');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...