user3416868 user3416868 - 5 months ago 12
SQL Question

php textarea automatic save to sql with jquery/ajax

I know this question has been asked before, and I have read several suggestions and answers, but I can't get it to work.

I have a textarea on a php page, and I want to get the content of the textarea saved to a sql database while the user is typing or every 2-5 seconds without the page being reloaded.

I believe it has to be made with jquery and Ajax?

The content is saved to the database if I make it as a POST form with a save button - so I know the sql is functioning.

I have those files:
todo.php

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<form method='post' action='notes.php'>
<table border='0' cellspacing='0' width='480px' height='250px' align='center' id='logo-table'>
<tr>
<td align='center' height='10px' valign='top'><textarea type='text' id='notes_input' name='notes_input' style='width: 460px; height: 230px; border:0px;'>$data[notes]</textarea></td>
</tr>
</table>
<input type='image' src='/nycrm/grafik/Save-as.png' name='gem' value='Submit' />
</form>


and script.php

<?php
require_once 'connect.php';
session_start();
$ses_userid = $_SESSION['ses_userid'];
$notes_input = $_POST["notes_input"];

mysqli_query($connect_intra, "UPDATE user SET notes = '$notes_input' where userid = '$ses_userid'");
?>


I tried this code which I found here on stackoverflow, but it seems like the code is not being executed - in this case the todo.php looks like this:

<?php

$ses_userid = $_SESSION['ses_userid'];
$query = mysqli_query($connect_intra, "SELECT notes FROM user WHERE userid = '$ses_userid'");
$data = mysqli_fetch_array($query);

echo"
<script type=\"text/javascript\" src=\"//code.jquery.com/jquery-1.9.1.js\"></script>
<script type=\"text/javascript\">
$(\"#notes_input\").bind(\"keydown\", function() { myAjaxFunction(this.value); });

function myAjaxFunction(value) {
$.ajax({
url: \"script.php\",
type: \"POST\",
data: \"notes_input=\" + value,
success: function(data) {
if (!data) {
alert(\"unable to save file!\");
}
}
});
}
</script>
<form method='post' action='notes.php'>
<table border='0' cellspacing='0' width='480px' height='250px' align='center' id='logo-table'>
<tr>
<td align='center' height='10px' valign='top'><textarea type='text' id='notes_input' name='notes_input' style='width: 460px; height: 230px; border:0px;'>$data[notes]</textarea></td>
</tr>
</table>
<input type='image' src='/nycrm/grafik/Save-as.png' name='gem' value='Submit'/>
</form>
";
?>


Do I miss something so it will work?

Your help is much appreciated.

/Thomas.

Answer

Browser reads HTML from top to bottom. When it find script tag it pause parsing and evaluate script.

In your example, when second script starts, textarea don't exists yet. Because of that jquery can't find any node with id notes_input, it just create empty jquery object to prevent errors in further functions.

You should move second script (with .bind statement) to end of body tag or wrap biding to jquery.ready function. It will delay execution of script until page fully parsed.

Comments