每行

时间:2016-11-01 22:45:13

标签: php jquery mysql sql ajax

我正在使用PHP,我可以收集数据库表的信息并将其显示在我的网页中。

对于每一行,我显示一个按钮,该按钮导致模式弹出窗口包含一个包含WYSIWYG(我使用TinyMCE)的textarea,以便我可以添加有关该特定行的详细信息。

当我使用此脚本

时,这只适用于1行

这是我的剧本:

<?php
include("connection.php");
if ($link->connect_errno > 0) {
    die('Unable to connect to database [' . $link->connect_error . ']');
}

if (isset($_POST['savechanges'])) {
    $results = $link->query("UPDATE mytalbename SET details='$_POST[textarea]' WHERE id=44");
}
?>

我的问题是:如何将每个行按钮的方式扩展到所有行。每个按钮都会弹出一个带文本区域的模态弹出窗口。从每个文本区域,我可以修改引用该特定行的“详细信息”列。

这是表单

中文本区域的代码
<div class="modal-body">
    <form action="" method="post" name="savechanges">
        <textarea name="textarea"></textarea>
        <button type="submit" class="btn btn-primary" name="savechanges"> Save changes</button>
    </form>
</div>

在这里,我显示按钮:

<a class='btn btn-primary btn-sm get_info2' data-toggle='modal' data-target='#myModal2' name='job_id' value='[$job_id]'>Add Details</a>
<a class='btn btn-primary btn-sm get_info3' data-toggle='modal' data-target='#myModal3' name='job_id' value='[$job_id]'>View Details</a>

我附上图片:

Table

[modal popup with textarea] [2]

----更新1 ----

$results = $link->query("UPDATE job SET details='$_POST[textarea]' WHERE id='$_POST[hidden]'" );

<div class="modal-body">
    <form action="" method="post" name="savechanges">
        <textarea name="textarea"></textarea>
        <button type="submit" class="btn btn-primary" name="savechanges"> Save changes</button>
        <input type="hidden" name="hidden" value=" . $row['id'] . ">
    </form>
</div>

-----------更新2 ---------------

  <?php
include("connection.php");
if ($link->connect_errno > 0) {
    die('Unable to connect to database [' . $link->connect_error . ']');
}

if (isset($_POST['savechanges'])) {

    $results = $link->query("UPDATE job SET details='$_POST[textarea]' WHERE id='44'" );

}

?>

---------------- UPDATE 3 --------------------

          <div class="modal-body info_data2">
                <form action="" method="post" name="savechanges">
                   <textarea name="textarea">    </textarea>
                   <button type="submit" class="btn btn-primary" name="savechanges"> Save changes</button>
                   <input type="hidden" name="hidden" value="<?php echo $row['id'];?>">                                           
                </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div></div></div></div>    </div>    

<?php
include("connection.php");
if ($link->connect_errno > 0) {
    die('Unable to connect to database [' . $link->connect_error . ']');
}

if (isset($_POST['savechanges'])) {
    $results = $link->query("UPDATE job SET details='".$_POST['textarea']."' WHERE id=".$_POST['hidden']);
}
?>

---------------更新4 ------------所有代码

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' }); tinyMCE.activeEditor.getContent();</script>
</head> 
<body>
  <!--  ------SCRIPT that fetch data from database and show table-->
       <?php
include("connection.php");
if ($link->connect_errno > 0) {
    die('Unable to connect to database [' . $link->connect_error . ']');}
if (isset($_POST['update'])) {
$results = $link->query("UPDATE customer SET status='$_POST[status]' WHERE id='$_POST[hidden]'");

}           

$sql = "SELECT * from job";
if (!$result = $link->query($sql)) {
die('There was an error running the query [' . $link->error . ']');}
echo "
    <table class='table'>
    <thead>
    <tr>";
    /* Get field information for all columns */
    while ($finfo = $result->fetch_field()) {
    echo "
    <th>" . $finfo->name . "</th>"; }
    echo " </tr>
    </thead> 
    <tbody>";
while ($row = $result->fetch_assoc()) {
        $job_id = $row['id'];
    echo "<form action='' method=post>";
    echo "<tr class='info'>
                <input type=hidden name=hidden value=" . $row['id'] . ">
                <td>" . $row['id'] . "</td> 
                <td>" . $row['device'] . "</td>
                <td>" . $row['model'] . "</td> 
                <td>" . $row['problem'] . "</td>
                <td>
                <select class='form-control col-sm-10' id='status' name='status'>
                    <option value='new' ". ($row['status'] == 'new'? 'selected ': '') .">New</option>
                    <option value='progress' ". ($row['status'] == 'progress'? 'selected ': '') .">Progress</option>
                    <option  value='wait' ". ($row['status'] == 'wait'? 'selected ': '') .">Wait</option>
                    <option value='done' ". ($row['status'] == 'done'? 'selected ': '') .">Done</option>
                    <option value='close' ". ($row['status'] == 'close'? 'selected ': '') .">Close</option>
                </select>
                </td>                                                                                                                     
                <td>  
                    <button type='submit' class='btn btn-primary btn-sm' name='update'>Update</button>
                </td>
                <td> 
                <a class='btn btn-primary btn-sm get_info'  data-toggle='modal' data-target='#myModal' name='job_id'  value= '[$job_id]'>Customer Info</a>
                <a class='btn btn-primary btn-sm get_info2'  data-toggle='modal' data-target='#myModal2' name='job_id'  value= '[$job_id]'>Add Details</a>
                </td> 
                </tr>"; 
                echo "</form>";  }
                echo " 
                </tbody>
                </table>";
                ?>

<!--  ------SCRIPT FOR BUTTON "CUSTOMER INFO"-->

    <script>
    $(document).ready(function(){
      $('.get_info').click(function(){
        var job_id = $(this).parent().siblings('input[name=hidden]').val();
        $.ajax({
          url: 'responses.php',
          data: 'job_id=' + job_id,
          type: 'POST',
          success: function(data){
            // console.log(data);
            $('.info_data').html(data);
          }
        });
      });
    });
  </script>

  <!-- MODAL THAT SHOW UP AFTER CLICKING ON "CUSTOMER INFO"-->
  <div class="container">
                  <div class="modal fade" id="myModal" role="dialog">
                  <div class="modal-dialog modal-lg">

                      <div class="modal-content">
                      <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title">Customer Information</h4>
                      </div>                       
                     <div class="modal-body info_data">
                      </div>
                     <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                      </div>    
                      </div>  
                      </div> 
                      </div>
                      </div>

<!--  ---SCRIPT FOR BUTTON  "ADD DETAILS"  -->

    <script>
    $(document).ready(function(){
      $('.get_info2').click(function(){
        var job_id = $(this).parent().siblings('input[name=hidden]').val();
        $.ajax({
          url: 'responses2.php',
          data: 'job_id=' + job_id,
          type: 'POST',
          success: function(data){
            // console.log(data);
            $('.info_data2').html(data);
          }
        });
      });
    });
  </script>

 <!-- MODAL THAT SHOW UP AFTER CLICKING BUTTON  "ADD DETAILS" 
which allow you to send data to database through the text area -->      
<div class="container"> 
                <div class="modal fade" id="myModal2" role="dialog">
                 <div class="modal-dialog modal-lg">

                <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Add Job Details</h4>
                </div>

                <div class="modal-body info_data2">
                <form action="" method="post" name="savechanges">
                   <textarea name="textarea">    </textarea>
                   <button type="submit" class="btn btn-primary" name="savechanges"> Save changes</button>
                   <input type="hidden" name="hidden" value="<?php echo $row['id'];?>">

                </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div> 
                </div> 
                </div> 
                </div>
                </div>

<!--  SCRIPT THAT SHOULD be able to send what is written in the text area to the database,-->


<?php
include("connection.php");
if ($link->connect_errno > 0) {
    die('Unable to connect to database [' . $link->connect_error . ']');
}

if (isset($_POST['savechanges'])) {
    $results = $link->query("UPDATE job SET details='".$_POST['textarea']."' WHERE id=".$_POST['hidden']);
}
?>

  </body>
</html>

--------------------更新5 ------------------

第1节

从表JOB获取数据的PHP代码 并显示每行3按钮:

  • 用于更新状态和优先级的更新按钮
  • 客户信息按钮(从“客户”表中获取数据)
  • 添加详细信息按钮(通过模式弹出信息与wusiwug一起发送到列“JOB表的详细信息”)
  • 查看详细信息按钮:从“JOB表的详细信息”列中获取数据

第2节:

按钮脚本“客户信息”

第3节:

点击“客户信息”后显示的模式

第3节:

按钮脚本“添加详细信息”

第4节:  点击按钮后添加的模式“添加详细信息” 允许您通过文本区域将数据发送到数据库

第5节: 脚本应该能够将文本区域中写入的内容发送到数据库

OVERVIEW

1 个答案:

答案 0 :(得分:0)

好的,如果一切正常并且您只需要将其更改为适用于任何记录,您只需要使用{{1}更改 php 代码中的 44 }

所以你的 html php 会是这样的:

<强> HTML

$_POST['hidden']

<强> PHP

<div class="modal-body">
    <form action="" method="post" name="savechanges">
        <textarea name="textarea"></textarea>
        <button type="submit" class="btn btn-primary" name="savechanges"> Save changes</button>
        <input type="hidden" name="hidden" value="<?php echo $row['id'];?>">
    </form>
</div>

但我鼓励您练习 mysqli参数化查询,而不是直接在查询中使用变量......

<强>更新

由于你的代码真的很难理解,我只会更新我的答案,添加一些假设,以防它们是对的!

我不知道您如何以<?php include("connection.php"); if ($link->connect_errno > 0) { die('Unable to connect to database [' . $link->connect_error . ']'); } if (isset($_POST['savechanges'])) { $results = $link->query("UPDATE job SET details='".$_POST['textarea']."' WHERE id=".$_POST['hidden']); } ?> 的标题显示<div>。因此,让我们假设<h4 class="modal-title">Add Job Details</h4>正在做你想做的事情!

所以在你的JavaScript中你有:

$('.info_data2').html(data);

此处您只是传递<script> $(document).ready(function(){ $('.get_info2').click(function(){ var job_id = $(this).parent().siblings('input[name=hidden]').val(); $.ajax({ url: 'responses2.php', data: 'job_id=' + job_id, type: 'POST', success: function(data){ // console.log(data); $('.info_data2').html(data); } }); }); }); </script> 作为参数,因此在 responses2.php 中您有两个问题: 1-您必须将job_id更改为$_POST['hidden'] 2-你没有textarea的任何参数!

然后你必须将你的JavaScript更改为:

$_POST['job_id']

请注意,由于您的HTML代码确实令人困惑,因此您必须研究如何获得<script> $(document).ready(function(){ $('.get_info2').click(function(){ var job_id = $(this).parent().siblings('input[name=hidden]').val(); var textarea = $(this).parent().siblings('[name=textarea]').val(); $.ajax({ url: 'responses2.php', data: { "job_id": job_id, "textarea" : textarea} , type: 'POST', success: function(data){ // console.log(data); $('.info_data2').html(data); } }); }); }); </script> job_id的正确值。使用此代码,我确定这些代码没有返回正确的值。它只是你如何做你想做的事情的样本,只是为了让你走上正确的轨道!!!

正如您所看到的,我已添加以下行:textarea并将var textarea = $(this).parent().siblings('name=textarea').val();行更改为:data以便能够发送data: { "job_id": job_id, "textarea" : textarea} ,值到 responses2.php 文件......

然后在 responses2.php 中你必须改变它:

textarea