Databases
StackOverflow2013
Postsdbo
POSend data to MySQL and display the updated DB (AJAX)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSend data to MySQL and display the updated DB (AJAX)
    text
    copied!<p>I am new to AJAX and I've been working all day on a project that I can't get to work. By the way, english is not my first language so sorry in advance ! </p> <p>Basics of the project :<br> -a simple page with a section to enter a message and a section that display all the message already entered by users<br> -the user type his text in a textarea and click on a button to submit his message<br> -the new message is sent to the database and the "comment section" is updated with the new message (AJAX)</p> <p>Basically it should work like the Youtube comment system.</p> <p>So far, with Javascript, PHP, AJAX, jQuery and Json, this is what I've been able to get done by myself:<br> -When the user click on the button, the message is successfully sent to the database.<br> -I can display all the existing message of the database inside a "div" of my page.<br> -I need to refresh the webpage to see the new message added to the list, and I don't want to have to refresh the webpage.</p> <p>What I can't figure how to do:<br> -How to update the messages list on the page without refreshing the page. I think I just don't get the AJAX part.. </p> <p>index.php :</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; Message: &lt;input type="text" id="message"&gt; &lt;input type="button" id="message-submit" value="Envoyer"&gt; &lt;input type="button" id="display" value="Afficher"&gt; &lt;div id="output" align="center"&gt; &lt;/div&gt; &lt;script src="jquery/jquery-1.8.2.min.js"&gt;&lt;/script&gt; &lt;script src="js/comments.js"&gt;&lt;/script&gt; &lt;script src="js/showComments.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>comments.js (some Javascript and Json)</p> <pre><code>$('input#message-submit').on('click', function () { var message = $('input#message').val(); if($.trim(message) != '') { $.post('ajax/showComments.php', {message: message}, function(data) { }); } }); </code></pre> <p>showComments.js</p> <pre><code>$(function () { $.ajax({ url: 'ajax/showComments.php', data: "", dataType: 'json', success: function(rows) { for (var i in rows) { var row = rows[i]; var id = row[0]; var message = row[1]; var date = row[2]; $('#output').append("&lt;b&gt;id: &lt;/b&gt;"+id+"&lt;b&gt; message: &lt;/b&gt;"+message+"&lt;b&gt; date: &lt;/b&gt;"+date) .append("&lt;hr /&gt;"); } } }); }); </code></pre> <p>showComments.php (DB work)</p> <pre><code>&lt;?php $host = "localhost"; $user = "root"; $pass = "root"; $databaseName = "testAjax"; $tableName = "messages"; $con = mysql_connect($host,$user,$pass); $dbs = mysql_select_db($databaseName, $con); $result = mysql_query("SELECT * FROM $tableName"); $data = array(); while ( $row = mysql_fetch_row($result) ) { $data[] = $row; } echo json_encode( $data ); if (isset($_POST['message']) === true &amp;&amp; empty($_POST['message']) === false) { $query = mysql_query(" INSERT INTO `testAjax`.`messages` ( `message_id` , `message` , `date` ) VALUES ( NULL , '" . mysql_real_escape_string(trim($_POST['message']))."', CURRENT_TIMESTAMP ); "); } ?&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload