Блог

Я работаю над простой системой администрирования. Теперь я хочу упростить редактирование данных администратором. Моя цель состоит в том, чтобы при двойном щелчке по элементу он менялся на input. Затем после редактирования, если администратор нажимает за пределами входных данных, он запускает событие для запуска ajax. Это похоже на систему в phpMyAdmin, когда мы хотим отредактировать данные, просто дважды щелкните на данных.

HTML

 <tbody>
    <tr>
        <th scope="row">1</th>
        <td class="editable" name="email">myname@myweb.com</td>
        <td class="editable" name="username">this_is_username</td>
        <td class="editable" name="name">My Name</td>
    </tr>
</tbody>
  

JavaScript

 $(".editable").dblclick(function () {
    const id = $(this).data("id");
    const col = $(this).attr("name");
    $(this).html(
        "<form>
             <input class="editing" type='text' value='"   $(this).val()   "'>
        </form>"
    );
});

// I want this Ajax will execute whene other side is clicked

$.ajax({
        url: "http://localhost/myProject/myController/myMethod",
        type: "post",
        data: {
            id: id,
            col: col,
            value: $('.editing').val()
        },
        success: function () {
            document.location.href = "http://localhost/myProject/myController";
        },
    });
  

Контроллер

 public function myMethod()
{
    $id = $this->input->post("id");
    $col = $this->input->post("col");
    $value = $this->input->post("value");
    $this->db->set($col, $val);
    $this->db->where('id', $id);
    $this->db->update("my_table");
}
  

Но я не знаю, как создать событие для выполнения Ajax при щелчке администратора за пределами ввода. Кто-нибудь может мне помочь? Или была сделана функция?

*** Примечание: Я хочу исключить его из привязки тега. Итак, при нажатии на какую-либо ссылку не выполняется Ajax, а осуществляется переход по ссылке.

Используйте событие onblur элемента ввода. Оно срабатывает, когда пользователь отвлекается от поля ввода.

Поскольку вы используете jQuery, подключите событие on blur, вот так:

     $(".editable").dblclick(function () {
        const id = $(this).data("id");
        const col = $(this).attr("name");
        $(this).html(
            "<form>
                 <input class="editing" type='text' value='"   $(this).val()   "'>
            </form>"
        );
        
        // use more specific targets here, i just use the class of the input
// you should use the same $(this) content in the end
        $('.editing').blur(function() {
            $.ajax({
                url: "http://localhost/myProject/myController/myMethod",
                type: "post",
                data: {
                    id: id,
                    col: col,
                    value: $('.editing').val()
                },
                success: function () {
                    document.location.href = "http://localhost/myProject/myController";
                },
            });
        });
        
    });
  

Событие размытия запускается, когда элемент, к которому вы его прикрепили, теряет фокус, но не запускается пузырьками, только для определенного элемента.

Найдите дополнительную информацию для размытия или, возможно, для фокусировки