Inline Editing of CPT or CCT using bricks or Elementor

CSS

#inlinetrytable {
    width: 100%;
    border-collapse: collapse;
  }

  #inlinetrytable th, #inlinetrytable td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
  }

  #inlinetrytable .editable {
    cursor: pointer;
    background-color: #f9f9f9;
  }

  #inlinetrytable .editable input {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
  }

gistfile1.txt

add_action('wp_ajax_update_inline_field', 'update_inline_field');
add_action('wp_ajax_nopriv_update_inline_field', 'update_inline_field');

function update_inline_field() {
  global $wpdb;
  
  $meta_id = intval($_POST['meta_id']);
  $column = sanitize_text_field($_POST['column']);
  $value = sanitize_text_field($_POST['value']);

  if ($meta_id && in_array($column, ['try_name', 'try_email', 'try_phone'])) {
    $updated = $wpdb->update(
      'wp_first_inline_editing_meta',
      [$column => $value],
      ['meta_ID' => $meta_id]
    );

    if ($updated !== false) {
      wp_send_json_success();
    } else {
      wp_send_json_error();
    }
  } else {
    wp_send_json_error();
  }

  wp_die();
}

add_action('wp_enqueue_scripts', 'enqueue_inline_editing_scripts');
function enqueue_inline_editing_scripts() {
    wp_enqueue_script('inline-editing-script', get_template_directory_uri() . '/path-to-your-js-file.js', array('jquery'), null, true);

    // Localize script to pass AJAX URL
    wp_localize_script('inline-editing-script', 'ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}

HTML

<table id="inlinetrytable" class="table table-bordered">
  <thead>
    <tr>
      <th>Meta ID</th>
      <th>Object ID</th>
      <th>Try Name</th>
      <th>Try Email</th>
      <th>Try Phone</th>
    </tr>
  </thead>
  <tbody>
    <?php
      global $wpdb;
      $results = $wpdb->get_results("SELECT meta_ID, object_ID, try_name, try_email, try_phone FROM wp_first_inline_editing_meta", ARRAY_A);
      foreach ($results as $row) {
        echo "<tr data-meta-id='{$row['meta_ID']}'>
          <td>{$row['meta_ID']}</td>
          <td>{$row['object_ID']}</td>
          <td class='editable' data-column='try_name'>{$row['try_name']}</td>
          <td class='editable' data-column='try_email'>{$row['try_email']}</td>
          <td class='editable' data-column='try_phone'>{$row['try_phone']}</td>
        </tr>";
      }
    ?>
  </tbody>
</table>

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('#inlinetrytable .editable').forEach(function(cell) {
    cell.addEventListener('dblclick', function() {
      const originalValue = cell.textContent;
      const column = cell.getAttribute('data-column');
      const row = cell.closest('tr');
      const metaID = row.getAttribute('data-meta-id');

      const input = document.createElement('input');
      input.type = 'text';
      input.value = originalValue;
      cell.textContent = '';
      cell.appendChild(input);
      input.focus();

      input.addEventListener('blur', function() {
        const newValue = input.value;
        cell.textContent = newValue;

        // Update value via AJAX
        if (newValue !== originalValue) {
          fetch(ajax_object.ajax_url, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: new URLSearchParams({
              action: 'update_inline_field',
              meta_id: metaID,
              column: column,
              value: newValue,
            })
          })
          .then(response => response.json())
          .then(data => {
            if (data.success) {
              alert('Value updated successfully');
            } else {
              alert('Update failed');
              cell.textContent = originalValue; // Revert on failure
            }
          });
        }
      });
    });
  });
});