Editing with popup of a CPT and CCT

CSS

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 25%;
  top: 0;
  width: 50%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

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>
      <th>Actions</th> <!-- New Actions column for the Edit button -->
    </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>{$row['try_name']}</td>
          <td>{$row['try_email']}</td>
          <td>{$row['try_phone']}</td>
          <td><button class='edit-btn' data-meta-id='{$row['meta_ID']}'>✏️ Edit</button></td> <!-- Edit button/pencil icon -->
        </tr>";
      }
    ?>
  </tbody>
</table>

<!-- Popup modal structure -->
<div id="editModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>Edit Row</h2>
    <form id="editForm">
      <input type="hidden" id="editMetaID">
      <label for="editObjectID">Object ID:</label>
      <input type="text" id="editObjectID"><br>
      <label for="editTryName">Try Name:</label>
      <input type="text" id="editTryName"><br>
      <label for="editTryEmail">Try Email:</label>
      <input type="text" id="editTryEmail"><br>
      <label for="editTryPhone">Try Phone:</label>
      <input type="text" id="editTryPhone"><br>
      <button type="submit">Save Changes</button>
    </form>
  </div>
</div>

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  // Get modal elements
  const modal = document.getElementById("editModal");
  const span = document.getElementsByClassName("close")[0];
  const editForm = document.getElementById("editForm");

  // When the user clicks the "Edit" button, show the modal
  document.querySelectorAll('.edit-btn').forEach(function(button) {
    button.addEventListener('click', function() {
      const row = button.closest('tr');
      const metaID = row.getAttribute('data-meta-id');
      const objectID = row.children[1].textContent;
      const tryName = row.children[2].textContent;
      const tryEmail = row.children[3].textContent;
      const tryPhone = row.children[4].textContent;

      // Fill the modal with current values
      document.getElementById('editMetaID').value = metaID;
      document.getElementById('editObjectID').value = objectID;
      document.getElementById('editTryName').value = tryName;
      document.getElementById('editTryEmail').value = tryEmail;
      document.getElementById('editTryPhone').value = tryPhone;

      // Show the modal
      modal.style.display = "block";
    });
  });

  // When the user clicks on <span> (x), close the modal
  span.onclick = function() {
    modal.style.display = "none";
  }

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }

  // Handle form submission and send AJAX request to save the edited row
  editForm.addEventListener('submit', function(event) {
    event.preventDefault();
    
    const metaID = document.getElementById('editMetaID').value;
    const objectID = document.getElementById('editObjectID').value;
    const tryName = document.getElementById('editTryName').value;
    const tryEmail = document.getElementById('editTryEmail').value;
    const tryPhone = document.getElementById('editTryPhone').value;

    // Update value via AJAX
    fetch(ajax_object.ajax_url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: new URLSearchParams({
        action: 'update_row',
        meta_id: metaID,
        object_id: objectID,
        try_name: tryName,
        try_email: tryEmail,
        try_phone: tryPhone,
      })
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        // Update the table row with new values
        const row = document.querySelector(`tr[data-meta-id="${metaID}"]`);
        row.children[1].textContent = objectID;
        row.children[2].textContent = tryName;
        row.children[3].textContent = tryEmail;
        row.children[4].textContent = tryPhone;
        
        // Close the modal
        modal.style.display = "none";
      } else {
        // Handle error case (optional)
        console.error('Update failed');
      }
    });
  });
});

PHP

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')
    ));
}

add_action('wp_ajax_update_row', 'update_row');
add_action('wp_ajax_nopriv_update_row', 'update_row');

function update_row() {
  global $wpdb;

  $meta_id = intval($_POST['meta_id']);
  $object_id = sanitize_text_field($_POST['object_id']);
  $try_name = sanitize_text_field($_POST['try_name']);
  $try_email = sanitize_email($_POST['try_email']);
  $try_phone = sanitize_text_field($_POST['try_phone']);

  if ($meta_id) {
    $updated = $wpdb->update(
      'wp_first_inline_editing_meta',
      array(
        'object_ID' => $object_id,
        'try_name' => $try_name,
        'try_email' => $try_email,
        'try_phone' => $try_phone,
      ),
      array('meta_ID' => $meta_id)
    );

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

  wp_die();
}