Databases
StackOverflow2013
Postsdbo
POAutorefreshing/updating table using jQuery ajax by either using json or html files
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAutorefreshing/updating table using jQuery ajax by either using json or html files
    primarykey
    data
    text
    <p>So @SOF,</p> <p>I've been trying to make my webpage of school grades, results, projected grades... etc have an auto update feature so that the data on the page refreshes when new data comes through via the use of <code>jquery</code> and <code>ajax</code> aswell as have a "single view" for classes.</p> <p>My main issue is that I'm unable to get any form of ajax refreshing/loading working correctly, I can produce my output in json or single html files, for my purposes I think the json would be better but I'm not sure.</p> <p>My webpage has a navigation helper in the top left, which is a dropdown menu which is populated via a list found by a "search" for <code>&lt;a id="CLASS1" optionname="CLASS 1"&gt;&lt;/a&gt;</code> which can be found within the table, however if need be I can populate this outside of the table if need be.</p> <p>I ideally want to be able to modify the dropdown so we have in this example a total of 8 options consisting of <code>- Select Class -</code>, <code>Class 1</code>, <code>Class 2</code>, <code>Class 3</code>, <code>Class 4</code>, <code>Class 5</code>, <strong><em><code>All Updating</code></em></strong>, <strong><em><code>All Non-Updating</code></em></strong></p> <h3>All Updating</h3> <ul> <li>This option will load all the class's into one html viewable page and update each class every 30 seconds (I say each class as some classes might update in one hour, in a different hour some other classes might update) so it would need to compare and if different then update?</li> </ul> <h3>All Non-Updating</h3> <ul> <li>This option will load all the class's into one html viewable page but will <strong>not</strong> update unless the user clicks on a different class (using the dropdown) and then clicks back...</li> </ul> <h3>Class 1, Class 2, Class 3... etc (Individual Loading/Single View)</h3> <ul> <li>This option will load a single class's data into a html viewable page and <strong>will update that specific class</strong> every 30 seconds, in a previous post a user named <strong><em><code>Gaby aka G. Petrioli</code></em></strong> gave an example which is pretty close to what I need however the member never came back to me: <a href="http://jsfiddle.net/u7UkS/4/" rel="nofollow noreferrer">http://jsfiddle.net/u7UkS/4/</a></li> </ul> <hr> <h1>Links to all the data</h1> <h3>HTML - <a href="http://pastebin.com/raw.php?i=0PNQGMmn" rel="nofollow noreferrer">http://pastebin.com/raw.php?i=0PNQGMmn</a></h3> <h3>CSS - <a href="http://pastebin.com/raw.php?i=4H5GHv15" rel="nofollow noreferrer">http://pastebin.com/raw.php?i=4H5GHv15</a></h3> <h3>JSON - <a href="http://pastebin.com/raw.php?i=xk860dBN" rel="nofollow noreferrer">http://pastebin.com/raw.php?i=xk860dBN</a></h3> <h3>Single Class Page - <a href="http://pastebin.com/raw.php?i=HvpaVhG6" rel="nofollow noreferrer">http://pastebin.com/raw.php?i=HvpaVhG6</a></h3> <h3>JSFiddle - <a href="http://jsfiddle.net/kHtuQ" rel="nofollow noreferrer">http://jsfiddle.net/kHtuQ</a> | <a href="http://jsfiddle.net/kHtuQ/show" rel="nofollow noreferrer">http://jsfiddle.net/kHtuQ/show</a></h3> <p>Previous post with some ajax examples by certain members: <a href="https://stackoverflow.com/questions/19845596/anchor-cycler-dropdown-to-import-school-class-data-periodically">Anchor Cycler / Dropdown to import school class data periodically</a></p> <hr> <p>Below is an example to show roughly what is in each "class" <strong><em>Note Class = School Class</em></strong></p> <h3>Super Slimed Down Table Example:</h3> <pre><code>&lt;table id="gradient-style"&gt; &lt;tbody&gt; &lt;thead&gt; &lt;tr&gt; &lt;th scope="col"&gt;&lt;a id="CLASS1" optionname="CLASS 1"&gt;&lt;/a&gt;Class&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tr&gt;&lt;td&gt;Class 1&lt;/td&gt;&lt;/tr&gt; &lt;/tbody&gt; &lt;tfoot&gt; &lt;tr&gt; &lt;th class="alt" colspan="34" scope="col"&gt;&lt;a id="KEY"&gt;&lt;/a&gt;&lt;img class="headimager" src="http://placehold.it/250x50"/&gt;&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="34"&gt;&lt;em&gt;&lt;b&gt;Data&lt;/b&gt; - Test&lt;/em&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tfoot&gt; &lt;/table&gt; </code></pre> <p>If anyone could help with this it would be much appreciated and if you are able to comment please do so that I can continue to learn.</p> <p>Thanks<br> Dennis S</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USDennis Sylvian
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAutorefreshing/updating table using jQuery ajax by either using json or html files
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POAutorefreshing/updating table using jQuery ajax by either using json or html files
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POAutorefreshing/updating table using jQuery ajax by either using json or html files
      1. USDennis Sylvian
      1. VTBountyStart
    1. COdo you getting the data from your server correctly? is the data correct? if yes then where is your problem? what is your reason not to putting your data into html files and call them? does the handleData is working?
      singulars
      1. POAutorefreshing/updating table using jQuery ajax by either using json or html files
      1. USSijav
    2. CO@Sijav, I'm unable to get the handleData to work at all and there is the issue of wanting 3 variations as listed in the main post. I've put a 200rep bounty on it as no other attention has been drawn to it. Any help would be much appreciated.
      singulars
      1. POAutorefreshing/updating table using jQuery ajax by either using json or html files
      1. USDennis Sylvian
    3. CO@DennisSylvian is that JSON close to what is actually being used? Seems like JSON is overkill if so and just using AJAX with HTML would be easier.
      singulars
      1. POAutorefreshing/updating table using jQuery ajax by either using json or html files
      1. USRob M.
 

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