Question

我用PHP开发了一个表。表数据来自MySQL数据库。该表的一个字段是可编辑的。我为这个可编辑字段设置了一个onBlur侦听器，以便在编辑后，编辑后的数据将被发送到MySQL表。问题是onBlur功能无效。

我的PHP代码：

<?php
$servername = "localhost";
$username = "??????";
$password = "???????";
$dbname = "????????";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT * FROM beacons";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    echo "<thead>
        <tr>
            <th>Major number</th>
            <th>Minor number</th>
            <th>Client</th>
            <th>Location</th>
            <th>Link to ad</th>
            <th>Attachment</th>
            <th>Edit</th>
        </tr> 
    </thead>";
    echo "<tbody>";
    foreach ($result as $k=>$v) {
        while ($row = $result->fetch_assoc()) {
            echo "<tr>
                    <td>" .$row["major"]. "</td>
                    <td>" .$row["minor"]. "</td>
                    <td>" .$row["client"]. "</td>
                    <td contenteditable=\"true\" onBlur=\"saveToDatabase(this,'geolocation', $result[$k][\"id\"])\" onClick=\"showEdit(this)\" > ".$row["geolocation"]. "</td>
                    <td>" .$row["linktoadd"].  "</td>
                    <td>" .$row["attacment"] . "</td>
                    <td></td>";
        }
        echo "</tr>";
    }
    echo "</tbody>
    </table>";
}
else {
    echo "no results";
}

我的JavaScript代码：

function showEdit(editableObj) {
    $(editableObj).css("background","#FFF");
} 

function saveToDatabase(editableObj,column,id) {
    $.ajax({
        url: "updatebeacon.php",
        type: "POST",
        data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
        success: function(data) {
            $(editableObj).css("background","#FDFDFD");
        }
   });
}

这是实现数据库功能的PHP代码：

<?php
class DB_Functions_Beacon 
{
    private $conn;

    // constructor
    function __construct() {
        require_once 'DB_Connect.php';
        // connecting to database
        $db = new Db_Connect();
        $this->conn = $db->connect();
    }

    // destructor
    function __destruct() {

    }

    /**
     * update beacon(link and geo and attachment)
     * returns user details
     */
    public function updateBeacon($column, $editable, $id) 
    {
        $uuid = uniqid('', true);
        $id2=$id;
        $geolocation=$column;
        $geolocation2=$editable;

        $sql ="UPDATE beacons SET $geolocation=$geolocation2,  WHERE id=$id2";
        mysql_query($sql);
    }

另一个：

<?php

require_once 'include/DB_Functions_Beacons.php';
$db = new DB_Functions_Beacons();

// json response array
$response = array("error" => FALSE);

if (isset($_POST['column']) && isset($_POST['editval']) && isset($_POST['id'])) 
{
    // receiving the post params
    $editable = $_POST['editable'];
    $column = $_POST['column'];
    $id = $_POST['id'];

        $beacon = $db->updateBeacon($column,$editval,$id);
        if ($beacon) {
            // user updated successfully
            $response["error"] = FALSE;
            echo json_encode($response);
        } 
        else {
            // user failed to store
            $response["error"] = TRUE;
            $response["error_msg"] = "Unknown error occurred in registration!";
            echo json_encode($response);
        }
} 
else {
    $response["error"] = TRUE;
    $response["error_msg"] = "Required parameters  is missing!";
    echo json_encode($response);
}

Answer 1

两件事。

OnBlur只会在input或textarea上被调用..（可能还有其他元素，需要查看文档）。您要求浏览器在onBlur元素上调用<td>，此事件永远不会发生。
看到你正在使用jQuery，为什么不设置元素模糊的回调？

首先，您需要将<td>变为<input class="editable">，然后使用.click(function(..))

然后，使用.blur()或.on('blur', function()来回复模糊事件。

$("td.geo").click(function()
{
    $(this).html('<input class="editable" value="'+$(this).html()+'"/>');
    setEditable();
});

function setEditable()
{
    $( ".editable" ).on( "blur", function() { 
       // saveToDatabase(... 
    }
});

这将显着清理您的HTML。

编辑：

另外，请确保清理数据库模型，它从这里看起来是可注射的。

onBlur（）函数在JavaScript中不起作用

1 个答案: