Question

奇怪的标题，但也不是那么普通的情况/问题......

我在html表格行中有可编辑的字段：

 <?php foreach($userlist as $key=>$val): ?>
  <tr class="content" id="example" data-id="<?php echo $val->id; ?>">
    <td valign="top" class="editable" data-delid="<?php echo $val->id; ?>" data-name="id" ><?php echo $val->id; ?></td>
    <td valign="top" class="editable" data-name="username"><?php echo $val->username; ?></td>
    <td valign="top" class="editable" data-name="firstname"><?php echo $val->firstname; ?></td>
    <td valign="top" class="editable" data-name="lastname"><?php echo $val->lastname; ?></td>
    <td valign="top" class="editable" data-name="email"><?php echo $val->email; ?></td>
    <td valign="top" class="editable" data-name="phone"><?php echo $val->phone; ?></td>
    <td valign="top" class="editable" data-name="activated"><?php echo $val->activated; ?></td>
    <td valign="top" class="editable" data-name="role"><?php echo $val->role; ?></td>
    <!--<td><input class="see_more" type="button" value="Reveal More" /></td>-->
  </tr>
  <tr class="test_table">

  </tr>
  <?php endforeach; ?>

行是动态创建的，并通过AJAX显示（此代码是codeigniter视图文件的一部分）。

请求：字段应该可以双击编辑，但是更新的值必须保存在OUTSIDE CLICK上？！

“我需要它，以便当您点击输入文本或在输入文本之外时数据进入数据库“。

因此，点击可以在任何地方发生，除了在可编辑字段上，我猜 - 单击可编辑字段不应该触发ajax更新。

我正在处理其他人的代码，并对其进行了修改，因此在按ENTER键时更新值的工作正常。

JQuery代码：

$(".editable").dblclick(function (e) {
    e.stopPropagation();
    var currentEle = $(this);
    var value = $(this).html();

    var input_name=$(this).data('name');


    updateVal(currentEle, value, input_name);
});



    function updateVal(currentEle, value, input_name) {

        $(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');



        $(".thVal").focus();

        $(".thVal").keyup(function (event) {
            if (event.keyCode == 13) {
                $(currentEle).html($(".thVal").val().trim());

                id=$(currentEle).parent().data('id');
                $.post( "<?php echo base_url(); ?>update_ajax", { id: id, field: input_name, value: $(this).val() })
    .done(function( data ) {
    //alert( "Data Loaded: " + data );
    //something to output, or rather not?
    });

            }
        });



    /* $(document).click (function () {
    var inputa=$(currentEle).data('name');  

    console.log(inputa);


            $(currentEle).html($(".thVal").val().trim());
            id=$(currentEle).parent().data('id');





        $.post( "<?php echo base_url(); ?>update_ajax", { id: id, field: inputa, value:  $(currentEle).html() })
    .done(function( data ) {
    //alert( "Data Loaded: " + data );
    //something to output, or rather not?
    });



        });*/




    $('.thVal').on('click',function(event) {
        event.stopPropagation();
    });     



    }

你会注意到我的糟糕尝试，注释掉它...它不起作用 - 它使用相同的值更新更多字段（因此，我无法连接字段名称/ id及其值，并将其发送到db ）

现在，我真的不确定所提到的场景是否可能，但是，也许这里的一些大师会有一些想法。 :)如果需要，我可以提供更多细节....

Answer 1

如果要在单击文本字段时发送AJAX请求以保存某些数据，则JQuery模糊事件会执行此操作（当元素失去焦点时会触发）。在你的情况下，它会是这样的：

$('.editable').blur(function() {
  $.ajax('/backend_function_to_save_data', {
    type: 'POST',
    dataType: 'json',
    data: {
      value: $(this).val()
    },
    error: function(jqXHR, textStatus, errorThrown) {
      // Handle error
    },
    success: function(data, textStatus, jqXHR) {
      // Success message?
    }
  });
});

检测＆＃39;外面的最后编辑元素＆＃39;点击

1 个答案: