I have a javascript that dynamically builds an html page. In the html page there are textarea boxes for the user to type information in. The information already exists in a database. I would like to populate the textarea boxes with the database in the mysql database. I have php code that will connect to the database and build an html table with the data, so I know how to do this with php, but I don't know how to do this from the javascrip. I've studied ajax get requests, etc., but I'm still not sure of how to do this.
Add a comment
|
4 Answers
Probably the easiest way to do it is to have a php file return JSON. So let's say you have a file query.php,
$result = mysql_query("SELECT field_name, field_value
FROM the_table");
$to_encode = array();
while($row = mysql_fetch_assoc($result)) {
$to_encode[] = $row;
}
echo json_encode($to_encode);
If you're constrained to using document.write (as you note in the comments below) then give your fields an id attribute like so: <input type="text" id="field1" />. You can reference that field with this jQuery: $("#field1").val().
Here's a complete example with the HTML. If we're assuming your fields are called field1 and field2, then
<!DOCTYPE html>
<html>
<head>
<title>That's about it</title>
</head>
<body>
<form>
<input type="text" id="field1" />
<input type="text" id="field2" />
</form>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$.getJSON('data.php', function(data) {
$.each(data, function(fieldName, fieldValue) {
$("#" + fieldName).val(fieldValue);
});
});
</script>
</html>
That's insertion after the HTML has been constructed, which might be easiest. If you mean to populate data while you're dynamically constructing the HTML, then you'd still want the PHP file to return JSON, you would just add it directly into the value attribute.
3 Comments
user1892770
I have tried many times to add my code is this comment area using 'code' and variations of that like [code] but all the code just ending up in a big blog. Do you know how I can get the mini-Markdown formatting to work for code? My question is, can I use jQuery in the middle of my javascript? Like in the middle of the function that is looping through the rows and creating the textarea boxes. The code is using document.write to make table rows and cells.
user1892770
In the jQuery above, which words to I replace with the specific word for my database. Do I leave "data"? Do I replace "key" with the FSymbol which is the column heading for the value in the mySql database for the Fund Symbols I am extracting. Do I replace "value"? As far as populating the inputs, do I write that like this: document.write(value);
user1892770
Also, I am running the javascript from my hard drive, so will this work if I add the full path for the query.php, like this: http:\\www.mywebsite.com\query.php
Do you really need to "build" it from javascript or can you simply return the built HTML from PHP and insert it into the DOM?
- Send AJAX request to php script
- PHP script processes request and builds table
- PHP script sends response back to JS in form of encoded HTML
- JS takes response and inserts it into the DOM
1 Comment
user1892770
Thanks for all your help. I am going to try to re-do this as a php file and run the code from the server and build the html page from the php code, then go to the javascript for other functions after the html page is built and populated with data from the database
To do with javascript you could do something like this:
<script type="Text/javascript">
var text = <?= $text_from_db; ?>
</script>
Then you can use whatever you want in your javascript to put the text var into the textbox.
Comments
You can't do it with only Javascript. You'll need some server-side code (PHP, in your case) that serves as a proxy between the DB and the client-side code.
