直接在同一页面更新php

时间:2017-05-10 06:26:23

标签: php mysql oop mysqli

我在update.php中有这段代码:

public function update($segment,$id){
        $stmt = $this->conn->prepare("UPDATE `segments` SET `segment` = '$segment' WHERE `id` = '$id'") or die($this->conn->error);
        if($stmt->execute()){
            $stmt->close();
            $this->conn->close();
            return true;
        }
    }

在home.php我有这个:

 <table   class = "table table-bordered table-responsive  ">
            <thead>

                <th>Segment</th>

                <th>Action</th>
            </thead>
            <tbody>
            <?php

                require 'class.php';

                $conn = new db_class();
                $read = $conn->read();
                while($fetch = $read->fetch_array()){ 

            ?>
                <tr>

                                        <td  contenteditable="true"><?php echo $fetch['segment']?></td>

                            <form action="activate.php" method="post" name="segment"> 
             <textarea style="display: none;" name="segment" id="markup"></textarea>                    
                                   <input type="hidden" name="id" value="<?php echo  $fetch['id']  ;?>">

                                   <td><center><button class = "btn btn-default" name="update"><a href=""></a><span class = "glyphicon glyphicon-edit"></span> Update</button> | <button class = "btn btn-success" type="submit" name="activate"><span class = "glyphicon glyphicon-check"></span> Activate</button> | <button class = "btn btn-danger" name="deactivate"><a href=""></a><span class = "glyphicon glyphicon-folder-close"></span> deactivate</button></center></td>
                            </form>
                </tr>
            <?php
                }
            ?>  
            </tbody>
        </table>

我设置为contenteditable =“true”直接从同一页面更新

并在激活中我这样做了:

<?php 
require_once 'class.php';

if(ISSET($_POST['update'])){
    $segment =$_POST['segment'];

    $id = $_POST['id'];

    $conn = new db_class();
    $conn->activate($segment, $id);
    echo '
        <script>alert("Updated Successfully")</script>;

    ';
}

&GT;

所以在js中我尝试了这个:

$('#work_form').submit(function(){
// Update the DOM
var block_1 = $('#block_1', '#work_form');
block_1.find('input').each(function(i,e){
    el = $(e);
    el.attr('value', el.val());
});
// Snatch the markup
var markup = block_1.html(); 
// Place it into the textarea
$('#markup', '#work_form').html( markup );
// Move on
return true;

});

当我尝试更新时,我确实回应了查询,看到我得到了这个:

UPDATE `segments` SET `segment` = '' WHERE `id` = '5'

任何帮助都会很棒,非常感谢你

2 个答案:

答案 0 :(得分:1)

请使用ajax,或在某个表单元素中输入您的输入标记。 对于ajax

var segmant  = $('#id_of_TD').html();
jQuery.ajax({
                    url: 'services/session/token',
                    type: "GET",
                    dataType: "text",
                    data: {
                                'segmant': segmant
                    },
                    success: function (result) {
                         alert('Form is submitted successfully')
                    }
                });

在代码之前添加js文件,并将url更改为您的页面名称。

答案 1 :(得分:0)

home.php

的代码
<?php 
require 'class.php';
$conn = new db_class();
$read = $conn->read();
$data = [];
while($fetch = $read->fetch_array()){ 
    $data[] = $fetch;
}

?><!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    </head>
    <body>
         <table   class = "table table-bordered table-responsive ">
            <thead>
                <tr>
                    <th>Segment</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach($data as $fetch): ?>
                    <tr>
                        <td class="segment" contenteditable="true"><?= $fetch['segment'] ?></td>
                        <td class="text-center">
                            <button class = "btn btn-default action-btn" data-id="<?= $fetch['id'] ?>" data-action="update"> 
                                <span class = "glyphicon glyphicon-edit"></span> Update
                            </button> 
                            | 
                            <button class = "btn btn-success action-btn" data-id="<?= $fetch['id'] ?>" type="submit" data-action="activate">
                                <span class = "glyphicon glyphicon-check"></span> Activate
                            </button> 
                            | 
                            <button class = "btn btn-danger action-btn" data-id="<?= $fetch['id'] ?>"  data-action="deactivate">
                                <span class = "glyphicon glyphicon-folder-close"></span> deactivate
                            </button>
                        </td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
        <script type="text/javascript">
            $(".action-btn").on("click", function(e) {
                var id      = $(this).attr("data-id");
                var segment = $(this).parents("tr").find("td.segment").html();
                var action  = $(this).attr("data-action");
                $.ajax({
                    "url": "action.php",
                    "method": "post",
                    "data": {
                        "id":      id,
                        "segment": segment,
                        "action":  action
                    },
                    success: function(data) {
                        alert(data);
                    }
                });
            });
        </script>
    </body>
</html>

在上面的代码中,根据项目结构更改bootstrap.min.css的url。

现在不要使用activate.php文件。 创建一个新文件action.php,并添加以下代码。

<?php 

# If there is no action exit
if (!isset($_POST['action'])) {
    exit;
}

$action = $_POST['action'];
$segment =$_POST['segment'];
$id = $_POST['id'];

switch($action) {
    case "update":
        $conn = new db_class();
        $conn->activate($segment, $id);
        echo "Updated success fully.";
        exit;
    case "activate":
        # Code for activate
    case "deactivate":
        # Code for deactivate

}

?>

试试这个。这是通过ajax完成的。这里我只做了更新功能。