Issue
I am asking for your help with HTML, JavaScript, jQuery, ajax, PHP and MySQL. Sadly, I am unable to provide any codes (but one) because I have none that actually works. Because I am no coder, it's beyond my comprehension. But I'll try my best to describe what I wish to achieve.
I have an HTML file with several textareas. These textareas have unique IDs (if there is a solution which require naming these textareas or add title to them, then its fine by me; if these textareas need to be wrapped into forms, that's okay, too).
I also have a MySQL database with two columns [ UUID , Translations ]. In the "UUID" column the very same IDs are stored that the textareas have, in the "Translations" column are text-strings paired with those unique IDs.
What I want to achive is to fetch the "UUID"-"Translation" pairs corresponding to the unique IDs and fill the textareas with the "Translations" column's text-strings when the html is loaded. There is no need to display the UUIDs, just the strings. I don't want to specify the textareas+IDs nor the ID-UUID pairings by hand, because all the IDs in the html will be generated by a 3rd-party app that also creates the database file and creates all the records with those IDs. So, maybe a solution that iterates through all the existing IDs would be desirable.
I already know how to connect to my database and how to send and save records into it, so I would like to know, how to pull, how to fetch specific data, and how to populate the textfields with them.
Could you proved me with the neccessary codes to get the job done, please? If its not too much to ask, I would like to get a complete solution, because with independent code-fragments I had no luck at all. Any help is appreciated!
The only code I have so far is this HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta title="TranslationFetcher">
<!-- include bootstrap css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
</head>
<body style="max-width: 100%">
<div class='database-flex' style="max-width: 100%; margin-right: 2rem;"><div style="max-width: 100%; margin-right: 0rem;"><ul style="max-width: 100%; margin-right: 0rem;">
<form method="POST" action="save.php">
<label>Text1's translation</label>
<textarea id="h599800e5g66d7g4de4gb030g6521266419fc" title="translation1" name="translationdata1" class="form-control translation-textarea"></textarea>
<label>Text2's translation</label>
<textarea id="hc17fc93fg968eg4591g8f31g0fe23110628a" title="translation2" name="translationdata2" class="form-control translation-textarea"></textarea>
...
<label>Text999's translation</label>
<textarea id="h435fb675gf2e0g46efga604gded8c83e213f" title="translation999" name="translationdata999" class="form-control translation-textarea"></textarea>
</form>
<!-- include bootstrap js -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- include jquery js -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>
I've been browsing StackOverflow for the past two weeks now, but no matter how I tried to put the pieces together, nothing worked.
UPDATE #1
I assume this PHP-code should fetch the neccessary key-pairs from the database:
<?php
$link = mysqli_connect("localhost", "root", "", "TranslateProject");
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
$query = "SELECT UUID, Translations FROM TranslateProject";
if ($result = mysqli_query($link, $query)) {
while ($row = mysqli_fetch_assoc($result)) {
printf ("%s (%s)\n", $row["UUID"], $row["Translations"]);
}
mysqli_free_result($result);
}
mysqli_close($link);
?>
But I have no idea what to do with it exactly,
- how to make a JSON from it (if that is what I should do),
- how to parse this JSON,
- how to pass the data to a Javascript or the HTML itself,
- what Javascript would do the trick,
- and how to make this script to populate the textareas with the corresponding text-data.
I have tried so many combinations available from other questions that I am completely lost.
Solution
I will get you started on these but you really need to do some investigation too
Change your loop to
$query = "SELECT UUID, Translations FROM TranslateProject";
$data = array();
if ($result = mysqli_query($link, $query)) {
while ($row = mysqli_fetch_assoc($result)) {
$data[] = array('UUID' => $row["UUID"], 'Translations' => $row["Translations"]);
}
}
$jsonData = json_encode($data);
echo $jsonData;
Assuming that generates
[
{
"UUID": "h599800e5g66d7g4de4gb030g6521266419fc",
"Translations": "Translation text 1"
},
{
"UUID": "hc17fc93fg968eg4591g8f31g0fe23110628a",
"Translations": "Translation text 2"
},
// ... other translations
]
Then you can do this in the HTML page head:
window.addEventListener('DOMContentLoaded', () => { // when page has loaded
fetch('myTranslations.php')
.then(response => response.json())
.then(translations => {
translations.forEach(translation => {
const textarea = document.getElementById(translation.UUID);
if (textarea) {
textarea.value = translation.Translations;
}
});
});
Answered By - mplungjan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.