I’m trying to create a table. When I click on the “generate” button, it inserts rows with data such as page title, date, actions…
The problem is that when I click it, it generates the rows with the style I’ve added. But when I refresh the page, the style is no longer applied.
public function woosterPartnerPluginSection()
{
?>
<section class="presentation-content">
<?php
do_settings_sections('wooster_gutenberg');
?>
<h2>Générateurs de page</h2>
<p>Choissisez le constructeur de page que vous préférez : </p> <?php
do_settings_sections('wooster_form');
// Conditionally display the buttons based on the presence and activation of Elementor plugin
if ($this->ispluginElementorActive()) {
?>
<!-- Display the buttons for both Gutenberg and Elementor -->
<div style="display: flex;">
<form method="POST" action="">
<input type="hidden" name="submit-gutenberg" value="Gutenberg">
<input type="image" id="gutenberg_button" src="<?php echo plugins_url('assets/img/Gutenberg.png', __FILE__); ?>" alt="Gutenberg" width=100% height=100% />
</form>
<form method="POST" action="">
<input type="hidden" name="submit-elementor" value="Elementor">
<input type="image" id="elementor_button" src="<?php echo plugins_url('assets/img/Elementor.png', __FILE__); ?>" width=100% height=100% />
</form>
</div>
<?php } else { ?>
<div style="display: flex;">
<form method="POST" action="">
<input type="hidden" name="submit-gutenberg" value="Gutenberg">
<input type="image" id="gutenberg_button" src="<?php echo plugins_url('assets/img/Gutenberg.png', __FILE__); ?>" width=100% height=100% />
</form>
</div>
<?php
}
?>
<div class="results-info">
<?php
$generated_pages = get_option('wooster_generated_pages', array());
$num_generated_pages = count($generated_pages);
echo 'Nombre de résultats : ' . $num_generated_pages;
?>
</div>
<div id="notification" class="notification">
Page générée avec succès
<table class="custom-table">
<thead>
<tr>
<th scope="col" id="date" class="manage-column column-date">Titre</th>
<th scope="col" id="date" class="manage-column column-author">Date</th>
<th scope="col" id="constructor" class="manage-column column-author">Constructeur</th>
<th scope="col" id="actions" class="manage-column column-actions">Actions</th>
</tr>
</thead>
<tbody id="generated-pages">
</tbody>
</table>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
function updatePageWithNewPost(data, buttonValue, postId) {
const tableRow = document.createElement('tr');
tableRow.id = 'post-' + data.id;
tableRow.classList.add('custom-table-row');
const titleCell = document.createElement('td');
titleCell.textContent = data.title;
const constructorCell = document.createElement('td');
constructorCell.textContent = buttonValue;
const dateCell = document.createElement('td');
dateCell.textContent = data.date;
const actionsCell = document.createElement('td');
actionsCell.classList.add('actions');
const viewButton = document.createElement('button');
viewButton.classList.add('viewBtn');
viewButton.innerHTML = '<i class="fas fa-eye fa-lg"></i>';
viewButton.dataset.previewUrl = data.previewUrl;
viewButton.addEventListener('click', () => {
const previewUrl = viewButton.dataset.previewUrl;
window.location.href = previewUrl;
});
actionsCell.appendChild(viewButton);
const editButton = document.createElement('button');
editButton.classList.add('editBtn');
editButton.innerHTML = '<i class="fas fa-edit fa-lg"></i>';
editButton.addEventListener('click', () => {
const editUrl = '<?php echo admin_url('post.php?action=edit&post='); ?>' + data.id;
window.location.href = editUrl;
});
const deleteButton = document.createElement('button');
deleteButton.classList.add('deleteBtn');
deleteButton.innerHTML = '<i class="fas fa-trash-alt fa-lg"></i>';
deleteButton.dataset.postId = data.id;
deleteButton.addEventListener('click', function() {
const postId = this.dataset.postId;
const rowToDelete = this.closest('tr');
if (confirm('Êtes-vous sûr de vouloir supprimer ce post ?')) {
fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'action=delete_post&id=' + postId,
})
.then(response => response.json())
.then(data => {
if (data.success) {
rowToDelete.remove();
} else {
console.error('Erreur lors de la suppression du post');
}
})
.catch(error => {
console.error('Erreur:', error);
});
}
});
actionsCell.appendChild(viewButton);
actionsCell.appendChild(editButton);
actionsCell.appendChild(deleteButton);
tableRow.appendChild(titleCell);
tableRow.appendChild(dateCell);
tableRow.appendChild(constructorCell);
tableRow.appendChild(actionsCell);
document.getElementById('generated-pages').appendChild(tableRow);
// const tableBody = document.getElementById('generated-pages');
// tableBody.appendChild(tableRow);
}
const gutenbergButton = document.getElementById('gutenberg_button');
const elementorButton = document.getElementById('elementor_button');
const gutenbergForm = gutenbergButton.closest('form');
const elementorForm = elementorButton.closest('form');
const forms = [gutenbergForm, elementorForm];
forms.forEach(form => {
form.addEventListener('submit', function(e) {
e.preventDefault();
const buttonValue = form.querySelector('[type="hidden"]').value;
const formData = new FormData(form);
formData.append('action', 'create_post');
fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
updatePageWithNewPost(data, buttonValue, data.id);
posts.push(data);
showNotification();
});
});
});
to add the element , I use a loop and display all the data from $generated_pages. This is the row:
public function display_generated_pages()
{
$generated_pages = get_option('wooster_generated_pages', array());
$updated_pages = array();
foreach ($generated_pages as $page) {
$post = get_post($page['id']);
if ($post) {
if ($post && ($post->post_status == 'draft' || $post->post_status == 'publish')) {
echo '<tr id="post-' . esc_attr($page['id']) . '" class="custom-table-row">';
echo '<td>' . esc_html($page['title']) . '</td>';
echo '<td>' . esc_html($page['title']) . '</td>';
echo '<td>' . esc_html($page['date']) . '</td>';
$constructor = '';
if (isset($_POST['submit-gutenberg']) && $_POST['submit-gutenberg'] === 'Gutenberg') {
$constructor = 'Gutenberg';
} elseif (isset($_POST['submit-elementor']) && $_POST['submit-elementor'] === 'Elementor') {
$constructor = 'Elementor';
}
echo '<td>' . esc_html($constructor) . '</td>';
echo '<td class="actions">';
echo '<button class="viewBtn" data-preview-url="' . esc_url($page['previewUrl']) . '"><i class="fas fa-eye fa-lg"></i></button>';
echo '<button class="editBtn"><i class="fas fa-edit fa-lg"></i></button>';
echo '<button class="deleteBtn" data-post-id="' . esc_attr($page['id']) . '"><i class="fas fa-trash-alt fa-lg"></i></button>';
echo '</td>';
echo '</tr>';
// Ajoutez la page existante à la liste mise à jour
$updated_pages[] = $page;
} elseif ($post->post_status != 'trash') {
$updated_pages[] = $page;
}
}
}
// Mettez à jour l'option avec la liste des pages existantes
update_option('wooster_generated_pages', $updated_pages);
}
