Databases
StackOverflow2013
Postsdbo
POmy first jquery ajax page (beginner)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POmy first jquery ajax page (beginner)
    primarykey
    data
    text
    <p>I am new to js and jquery. The page I'm working on is a message board. First the page displays 10 most recent messages and then my jquery function is used to update the board automatically, pulling new data every 2 seconds. The most recent messages are displayed on the top. The older messages should be removed from the page.</p> <p>Please note that this is a simplified version of the page. I'm trying to work out the logic before implementing it to the actual page. Hence instead of the message, the id is showed etc.</p> <pre><code>&lt;?php include ("../../db.php"); ?&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="../jquery/jquery.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;script&gt; function update() { $("#notice_div").html('Loading..'); $.ajax({ type: 'GET', url: '2include.php?lastid='+ latestid + '', timeout: 2000, success: function(data) { $("#cont_div").html(data); $("#cont_div").clone().prependTo($("#newdiv")); // adding the pulled data to newdiv $("#notice_div").html(''); window.setTimeout(update, 2000); // animate $("#newdiv").slideDown(1000,function(){ }); }, error: function (XMLHttpRequest, textStatus, errorThrown) { $("#notice_div").html('Timeout contacting server..'); window.setTimeout(update, 60000); } }); } $(document).ready(function() { update(); }); &lt;/script&gt; &lt;div id="cont_div"&gt;&lt;/div&gt; &lt;div id="newdiv"&gt;&lt;/div&gt; &lt;? $count = 1; // first message is the newest $get = $DB-&gt;query("SELECT * FROM board ORDER BY id DESC LIMIT 10", __FILE__, __LINE__); while ($msg = $DB-&gt;fetch_array($get)) { echo "&lt;div id='msgid' style='background-color:yellow'&gt;".$msg['id']."&lt;/div&gt;"; if($count == 1){ $latestid = $msg['id']; // newest message - passing to js } $count++; } ?&gt; &lt;script&gt; var latestid = &lt;?=$latestid?&gt;; &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>2include.php -</p> <pre><code>&lt;? include ("../../db.php"); $la = $_GET['lastid']; $count = 1; // first message is the newest on load $get = $DB-&gt;query("SELECT * FROM board WHERE id&gt;'$la' ORDER BY id DESC LIMIT 5", __FILE__, __LINE__); while ($msg = $DB-&gt;fetch_array($get)) { echo "&lt;div id='msgid' style='background-color:red'&gt;".$msg['id'].""; if($count == 1){ $latestid = $msg['id']; // newest message } $count++; ?&gt; &lt;script&gt; var latestid = &lt;?=$latestid?&gt;; // after pulling the newest message we overwrite latestid with the newest msg id &lt;/script&gt; &lt;? } ?&gt; </code></pre> <p>result after inserting 3 new rows to the table after the first page load:</p> <p><a href="http://i.stack.imgur.com/rPf8N.jpg" rel="nofollow">http://i.stack.imgur.com/rPf8N.jpg</a> (sorry can't post images yet)</p> <p>the top red one is cont_div and appears every time new data is pulled for 2 seconds.</p> <ol> <li>What do you think of my code? I'm pretty new to jquery and not that good with javascript. This bit of code has taken me over 7 hours to build.</li> <li>Animation is not working (new messages should appear with the slide down animation.</li> <li>cont_div is displayed on the page (top red one on the image). Tried to put the content in variables or make the div invisible - nothing worked. If I made it invisible, the style would be copied to the new_div and it would be invisible there too.</li> <li>Only 10 messages should be displayed on one page. I haven't figured out how to remove the older messages from the page. </li> </ol>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USdomino
    1. USdomino
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POmy first jquery ajax page (beginner)
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POmy first jquery ajax page (beginner)
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POmy first jquery ajax page (beginner)
      1. USHuman Love
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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