I’ve developed a plugin that adds a button to the edit.php page in the WordPress admin. This button populates certain fields with data from a remote JSON file. However, I’m having trouble adding the title and taxonomy data correctly. Could someone please help me figure out how to do this?
Here is my code:
<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('loadButton').addEventListener('click', function(event) {
event.preventDefault();
var imdbID = document.getElementById('imdb-title').value;
var url = '/wp-content/plugins/imdb/get.php?id=' + imdbID;
fetch(url)
.then(response => response.json())
.then(data => {
//document.getElementById('name').value = data.name || '';
document.getElementById('ratings-movie').value = data.score || '';
document.getElementById('year-type').value = data.year || '';
document.getElementById('period-time').value = data.duration || '';
document.getElementById('rating').value = data.vote || '';
document.getElementById('gross-worldwide-movie').value = data.boxoffice || '';
document.getElementById('age-limit').value = data.contentrating || '';
document.getElementById('awards-series').value = data.awards || '';
document.getElementById('metascore').value = data.metascore || '';
document.getElementById('top250-movies').value = data.imdbrate || '';
document.getElementById('budget-movie').value = data.budget || '';
//document.getElementById('title').value = data.name;
var tags = '1,2,3,4,5,56,7';
//var tags = data.tags || '';
var tagInput = document.getElementById('components-form-token-input-0');
if (tags && tagInput) {
tags.split(',').forEach(function(tag) {
tag = tag.trim();
if (tag) {
tagInput.value = tag;
document.getElementById('submit_tag').click();
}
});
}
})
.catch(error => {
console.error('Error fetching data:', error);
alert('Error loading JSON data.');
});
});
});
</script>
the title and tags (taxonomy) fields are not being filled as expected. All other fields are populated correctly, but the title remains empty, and the tags are not assigned
6
It’s hard to tell precisely what the problem is without also seeing the HTML for this as well, however a few things stand out:
- The title and name fields use the IDs “title” and “name” which are quite generic and I would not at all be surprised if there is also something else on the page with the same ID. If that’s the case when you use
document.getElementById()it will only ever find the first element with that ID. - With regards to the tags, you’re clicking a button in a tight loop (i.e. you’re not waiting for a result before continuing), depending on the mechanism behind that tag submission, you may see unexpected behaviour. If it submits to the server it may be better to wait for the reponse to come back before attempting to submit the next tag, if it adds it to the UI and stores it locally before submitting, you may want to verify that the item was added in the UI where you expect to see it. I think regardless of which method is happening, using a “waitFor” type method to wait for the item to be present in the UI is probably a good approach (assuming that if it gets sent to the server it is added to the UI after a successful request).