Question

请帮助我！我在jquery方面没有足够的经验，无法独自找到该解决方案。

我显示数据库中的表格。我有2行带有正确显示的图像（徽标）。当我想更改徽标时，我打开模式窗口。

我的问题是：在模式窗口中，如何显示我要修改的当前徽标的图像？

我认为我只需要使用行的ID即可进行“ sql选择”，但是经过大量研究，我投降了。

该行的ID可以在模式窗口中很好地显示，但是无法在变量中使用它来使sql重新请求。

一个例子

在我的代码下面：

//table[@id="users-table"]/thead/tr/th[text()='adress']

Answer 1

确保$row[22]包含您期望的确切值。

尝试以下代码：

$sql = "select * from setting WHERE id='" . $id . "'";
$result = mysqli_query($conn, $sql);
if(isset($result)){
    $row=mysqli_fetch_assoc($result);
    if (count($row) > 0) {
        //use proper array key name
        //if db column name name is logo then you can access it like $row['logo']
        $img_logo = '<img height="50" src="data:image;base64,' . $row['logo'] . '">';
    } else {
        //count is zero
        echo 'count is zero';
    }
} else {
    //result is empty
    echo 'result is empty';
}
?>

Answer 2

有两种方法可以做到这一点：

在打开模式时调用API以获取行详细信息，然后使用 img_logo_content从API响应显示。此选项将是如果您尝试显示表中未显示的值，则很有用。
从表中获取img_logo_content并显示为模式（请参见下面的示例）

如果选择第二个选项，则可以执行以下操作：

删除以下代码：

                <?php
                //*************************************************************
                // PROBLEME HERE !!! Find the logo picture from sql database
                $sql = "select * from setting WHERE id='" . $id . "'";
                $result = mysqli_query($conn, $sql);
                while ($row = mysqli_fetch_array($result)) {
                    $img_logo=  '<img height="50" src="data:image;base64,' . $row[22] . '">';
                }
                //*************************************************************
                ?>

更改以下代码：

                   <?php // Display Logo
                    echo $img_logo;
                    ?>

到下面：

                    <!-- Display logo -->
                    <div id="logo-preview"></div>

还请更改以下代码：

$editor.find('#img_logo_name').val(values.img_logo_name);

到下面：

$editor.find('#logo-preview').html(values.img_logo_content);

这是您的身体的完整代码：

<body class="docs">

  <!-- Header -->
  <!-- Content -->
  <div class="container">
    <div class="docs-section">

      <div class="example">
        <table id="editing-example" class="table" data-paging="true" data-filtering="false" data-sorting="false">
          <thead>
            <tr>
              <th data-name="id" data-breakpoints="xs" data-type="number">ID</th>
              <th data-name="nom_config">Name</th>
              <th data-name="img_logo_content">Logo</th>
            </tr>
          </thead>
          <tbody>
            <?php foreach( $datas as $data ) { ?>
            <tr data-expanded="true">
              <td>
                <?php echo $data->id; ?></td>
              <td>
                <?php echo $data->nom_config; ?></td>
              <td>
                <?php echo '<img height="20" src="data:image;base64,' . $data->img_logo_content . '">' ?></td>
            </tr>
            <?php } ?>
          </tbody>
        </table>

        <!-- Modal -->
        <div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title">
          <style scoped>

            .form-group.required .control-label:after {
              content: "*";
              color: red;
              margin-left: 4px;
            }
          </style>
          <div class="modal-dialog" role="document">
            <form class="modal-content form-horizontal" id="editor">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="editor-title">Add Row</h4>
              </div>
              <div class="modal-body">

                <input type="number" id="id" name="id" class="hidden" />

                <div class="form-group required">
                  <label for="nom_config" class="col-sm-4 control-label">Name</label>
                  <div class="col-sm-8">
                    <input type="text" class="form-control" id="nom_config" name="nom_config" required>
                  </div>
                </div>

                <div class="form-group">
                  <label for="img_logo_content" class="col-sm-4 control-label">logo</label>
                  <div class="col-sm-8">

                    <!-- Display logo -->
                    <div id="logo-preview"></div>

                    <input type="file" class="form-control" id="img_logo_content" name="img_logo_content" placeholder="Votre Logo">
                  </div>
                </div>

                <div class="modal-footer">
                  <button type="submit" class="btn btn-primary">Save changes</button>
                  <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </form>
            </div>
          </div>

        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="https://fooplugins.github.io/FooTable/docs/js/prism.js"></script>
        <script src="https://fooplugins.github.io/FooTable/docs/js/ie10-viewport-bug-workaround.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
        <script src="https://fooplugins.github.io/FooTable/compiled/footable.js"></script>
        <!-- Initialize FooTable -->
        <script>
          jQuery(function($) {
            var $modal = $('#editor-modal'),
              $editor = $('#editor'),
              $editorTitle = $('#editor-title'),
              ft = FooTable.init('#editing-example', {
                editing: {
                  enabled: true,
                  addRow: function() {
                    $modal.removeData('row');
                    $editor[0].reset();
                    $editorTitle.text('Add a new row');
                    $modal.modal('show');
                  },
                  editRow: function(row) {
                    var values = row.val();
                    $editor.find('#id').val(values.id);
                    $editor.find('#nom_config').val(values.nom_config);
                    $editor.find('#logo-preview').html(values.img_logo_content);

                    $modal.data('row', row);
                    $editorTitle.text('Edit row #' + values.id);
                    $modal.modal('show');
                  },
                  deleteRow: function(row) {
                    if (confirm('Are you sure you want to delete the row?')) {
                      row.delete();
                    }
                  }
                }
              }),
              uid = 10;

            $editor.on('submit', function(e) {
              if (this.checkValidity && !this.checkValidity()) return;
              e.preventDefault();
              var row = $modal.data('row'),
                values = {
                  id: $editor.find('#id').val(),
                  nom_config: $editor.find('#nom_config').val(),
                  img_logo_name: $editor.find('#img_logo_name').val()
                };

              if (row instanceof FooTable.Row) {
                $.ajax({
                  url: 'update.php',
                  dataType: "json",
                  cache: false,
                  data: {
                    id: values['id'],
                    nom_config: values['nom_config'],
                    img_logo_content: values['img_logo_content']
                  },
                  success: function(data) {
                    if (data.return) {
                      alert("Success");
                      row.val(values);
                    } else {
                      alert("No modifications!");
                    }
                  },
                });


              } else {
                $.ajax({
                  url: 'insert.php',
                  data: {
                    id: values['id'],
                    nom_config: values['nom_config'],
                    img_logo_content: values['img_logo_content']
                  },
                  success: function(data) {
                    if (data.return) {
                      alert("Success");
                      ft.rows.add(values);
                      location.reload();
                    } else {
                      alert("Already used!");
                    }
                  },

                });
              }
              $modal.modal('hide');
            });
          });
        </script>
</body>

对不起，我的英语不好:)希望有帮助！

Answer 3

我想我终于有了第二种选择（API）的解决方案。

添加以下代码

 $('#editor-modal').on('show.bs.modal', function (e) {
        var productID= $( "#id" ).val();
        $.ajax({
            url:"test_api.php",
            method: "POST",
            data:{productID:productID},
            dataType:"JSON",
            success:function(data)
            {   
                $('#logo-preview').html(data); 
            }
        })
     });

创建以下文件：test_api.php

<?php
include('../connection.php');

if (isset($_POST['productID'])) {
$productID = $_POST['productID'];

$sql = "select * from setting WHERE id='" . $productID . "'";
$result = mysqli_query($conn, $sql);
if(isset($result)){
    $row=mysqli_fetch_assoc($result);
    if (count($row) > 0) {
        $data = '<img height="50" src="data:image;base64,' . $row['img_logo_content'] . '">';
    }
}
echo json_encode($data);
}
?>

谢谢thaihoc06！

您怎么看？

MYSQL模式选择ID

3 个答案: