Wie benutze ich AJAX nur im WordPress -Widget auf Admin -Backend? ⇐ JavaScript

[Anonymous]

Ich versuche, ein einfaches WordPress -Widget für die KI -Textgenerierung zu erstellen. Das Widget sollte es dem Benutzer ermöglichen, eine Eingabeaufforderung einzugeben, ein Wortlimit festzulegen und auf eine Schaltfläche "Text zu generieren" klicken. Ich möchte die OpenAI -API verwenden, um Text basierend auf der Eingabeaufforderung und der Wortgrenze zu generieren. Ich habe jedoch ein Problem damit, wie sich das Widget verhält, abhängig davon, wo es geladen ist. Die KI-Textgenerierung funktioniert einwandfrei, wenn alle Optionen (Formular) auf der WordPress-Startseite geladen werden (Beispiel in Code-1 unten). Ich möchte jedoch, dass das Widget nur im Backend verfügbar ist (als Teil der Widget -Optionen). Widgets und lassen Sie die API Text generieren und in den Textbereich des Widgets einfügen. Das Hauptproblem ist, dass Ajax bei Widget -Optionen nicht ordnungsgemäß zu funktionieren scheint, und ich kämpfe darum, eine Lösung zu finden.
Was ich erreichen möchte: < /p>

Erstellen Sie ein Widget im WordPress -Backend. Eingabeaufforderung und
Wortlimit). < /li>
Fügen Sie den generierten Text in den Widget -Textbereich ein. Fragen: < /strong> < /p>
Wie kann ich AJAX in den WordPress -Widget -Optionen im Backend ordnungsgemäß funktionieren? Generation mit einem WordPress -Widget im Backend? Ich habe die KI -Textgenerierung auf einer Backend -Seite (nicht Widgets) getestet, und es funktioniert dort gut. Das Problem liegt nur bei den Widgets, und ich kann nicht herausfinden, warum es nicht funktioniert. Es gibt keine Fehler in der Konsole, nichts - es funktioniert einfach nicht im Widget. < /P>
Jede Hilfe wäre sehr geschätzt! Strong> Code-1 (funktioniert in Ordnung, wenn sie als Front-End-Widget geladen wird):

Code: Select all

Prompt:


Word Limit:


Generate Text

Output:



document.addEventListener("DOMContentLoaded", function() {
document.getElementById("openai_generate").addEventListener("click", function() {
let prompt = document.getElementById("openai_prompt").value.trim();
let wordLimit = parseInt(document.getElementById("openai_word_limit").value);

if (prompt.length === 0) {
alert("Please enter a prompt.");
return;
}

fetch('', {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: `action=openai_generate_text&prompt=${encodeURIComponent(prompt)}&word_limit=${wordLimit}`
})
.then(response => response.json())
.then(data => {
console.log(data);  // Debugging: log the response data

// Check if the response is as expected
if (data.success) {
const output = document.getElementById("openai_output");
if (output) {
output.value = data.data.text || "No text generated.";  // Access text inside `data.data.text`
} else {
console.error('Output textarea not found.');
}
} else {
const output = document.getElementById("openai_output");
if (output) {
output.value = "Error: " + (data.message || "Unknown error");
} else {
console.error('Output textarea not found.');
}
}
})
.catch(error => {
console.error("Error:", error);
const output = document.getElementById("openai_output");
if (output) {
output.value = "Error: Unable to reach API or process request.";
}
});
});
});

Code -2 (geladen in Widgets -Backend -Optionen - nicht funktionieren):

Code: Select all