StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
20172816
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
22
CommunityOwnedDate
CreationDate
2013-11-24T09:02:49.263
FavoriteCount
0
LastActivityDate
2013-12-03T01:58:24.427
LastEditDate
2013-12-03T01:58:24.427
LastEditorUserId
2559637
OwnerUserId
2559637
ParentId
20136649
PostTypeId
2
Score
21
ViewCount
0
LastEditorDisplayName
text
Body
using ajax is very simple, I recommend you to use HTML datatype for this as you have a table in your container, there is an api documentation here => <a href="http://api.jquery.com/jQuery.ajax/" rel="noreferrer">http://api.jquery.com/jQuery.ajax/</a> here's a fiddle I made for you => <a href="http://jsfiddle.net/sijav/kHtuQ/19/" rel="noreferrer">http://jsfiddle.net/sijav/kHtuQ/19/</a> or <a href="http://fiddle.jshell.net/sijav/kHtuQ/19/show/" rel="noreferrer">http://fiddle.jshell.net/sijav/kHtuQ/19/show/</a> I have put ajax code in a function named updateClass(url) which url stands for the url to get and it will append the container with the HTML it get => <pre><code>function updateClass(url){ $.ajax({ url: url, dataType: "HTML", error: function(msg){ alert(msg.statusText); return msg; }, success: function(html){ $("#container").html(html); } }); } </code></pre> I have added a refreshClass which refresh the whole container class, => <pre><code>function refreshClass(){ updateClass("http://fiddle.jshell.net/sijav/mQB5E/5/show/"); //update the class } </code></pre> and changed on change selector to below code => <pre><code>var classUpdateI; //stands for our interval updating class $(".class-selector").on("change",function(){ if (classUpdateI!=null)clearInterval(classUpdateI); //If the selector changed clear the interval so the container won't be update on it's own if(this.value == "") return; // if the value is null don't do anything else if(this.value == "allclassnup"){ refreshClass(); //if the value is allclassnup which is stands for All Non-Updating just refresh the whole class } else if(this.value == "allclassup"){ refreshClass(); //if the value is allclassup which is stands for All Updating refresh the whole class and set an interval for thirty second (look for 30*1000) classUpdateI = setInterval(refreshClass,30*1000); } else //else then it's a simple class value, just simply update the current class updateClass(this.value); }) </code></pre> Hope it helps ;) EDIT: Edited so it can get big table (not generate it!) and all-updating will update in an interval of 30 sec AnotherEDIT: Believe it or not I have done all of your question! WORKING FIDDLE:<a href="http://jsfiddle.net/sijav/kHtuQ/39/" rel="noreferrer">http://jsfiddle.net/sijav/kHtuQ/39/</a> or <a href="http://fiddle.jshell.net/sijav/kHtuQ/39/show/" rel="noreferrer">http://fiddle.jshell.net/sijav/kHtuQ/39/show/</a> 1 that is because it was only done for the last html, for the new we should make it again! so put the whole <code>$('tr').click()</code> function into another function and call it when necessary. - do you want this to fully working? it's a little bit complicated but it can works with a bit of change in codes! that I'm gonna show you, Alright here's the algurithm we should put the current class on class selector change to cookie and then we can read it whenever we refresh or reload the page and put the necessary selected class and so on ... but in code designing here I did to make it working, first I made a global variable called <code>FirstTimeInit = true;</code> just to be sure if we're on the first time of page loading or not, second I put the for loop that make things highlighting on page load to a function called <code>selectSelectedClass</code>, why? because we need to call it many times, Third I added some if statement to be sure if we can read cookies then change highlighted things and current class also, here is the code: <pre><code>if(readCookie("CurrentClass")) //if we can read coockie $(".class-selector").val(readCookie("CurrentClass")).change(); //change it's value to current cookie and trigger the change function else{ // else selectSelectedClass(); //select those which was highlighted before trClick(); //make things clickable FirstTimeInit = false; //and turn of the first time init } </code></pre> Forth adding a create cookie on selector value changes = > <code>createCookie("CurrentClass",$(".class-selector").val(),1);</code> and finally change the success on getting Ajax to this <pre><code> success: function(html){ $("#container").html(html + '<a id="KEY"></a>'); //the html container changer with adding extra id , I'll explain it later it's for your second question if(FirstTimeInit){ //if it is First Time then selectSelectedClass(); //highlight which was highlighted after put the correct html FirstTimeInit = false; // turn of the first time init } else //else for (var i=0;i<($("table").children().length);i++){ if(readCookie(i)) eraseCookie(i); //erase every cookie that has been before because the table is now changed and we're going on another table so old cookie won't matter } trClick(); //make things selectable! } </code></pre> Also to make it bugfree I have changed the refreshClass to turn firstinit when the selected class is all or it is null because then we have all classes and need those cookies! so here's the code: <pre><code>function refreshClass(){ if(readCookie("CurrentClass")=="allclassnup"||readCookie("CurrentClass")=="allclassup"||readCookie("CurrentClass")==null) FirstTimeInit = true; updateClass("http://fiddle.jshell.net/sijav/mQB5E/5/show/"); } </code></pre> 2 the <code><a id="TOP"></a></code> must be before the container, the <code><a id="KEY"></a></code> must be generated on the end of the container after putting html on the container. so <code>$("#container").html(html + '<a id="KEY"></a>');</code> 3 Next and Previous button was designed for non-ajax previous design, It's now needing a different solution! see these simple codes for example <pre><code>$("#PreviousClass").click(function(){//on prev click $(".class-selector").val($(".class-selector option:selected").prev().val()).change() //change the value to the prev on and trigger the change }); $("#NextClass").click(function () {//on next click $(".class-selector").val($(".class-selector option:selected").next().val()).change() //change the value to the prev on and trigger the change }); </code></pre> 4 Yes It is possible you should change your up to key and down to these codes and you're good to go => <pre><code>currentClass=0; $("a.TOPJS").click(function () { if(currentClass>0){ currentClass-- scrollToAnchor('CLASS'+currentClass); } }); $("a.KEYJS").click(function () { if($("a[id='CLASS" + currentClass + "']")[0]!=undefined){ currentClass++ scrollToAnchor('CLASS'+currentClass); } else scrollToAnchor('CLASSMAX'); }); </code></pre> Godd Luck Another Request EDIT: (hope this will be the last!) Working Fiddle: <a href="http://jsfiddle.net/sijav/kHtuQ/42/" rel="noreferrer">http://jsfiddle.net/sijav/kHtuQ/42/</a> or <a href="http://fiddle.jshell.net/sijav/kHtuQ/42/show/" rel="noreferrer">http://fiddle.jshell.net/sijav/kHtuQ/42/show/</a> alright as you didn't like the change class on refresh to one which was in it I have removed that, and a better I have added some codes to have classes in cookies, as cookies are not tree there is some kind of conditions, the class is being read from the last character of class selector so be sure to have class number at the last character like -> <code>Class number ***5***</code> the number 5 will be read for class selector! EDIT: optimize class next and prev see <a href="http://jsfiddle.net/sijav/kHtuQ/46/" rel="noreferrer">http://jsfiddle.net/sijav/kHtuQ/46/</a> EDIT: As per comment requested, That is what I'm trying to tell you, sometimes the demo shows on jsfiddle.net, sometimes it shows on fiddle.jshell.net, these are different domains and you cannot get html from different domains. 1) You may only put function in Interval or just create another function and call it proper way like this => <pre><code>classUpdateI = setInterval(function(){updateClass(this.value,parseInt(a.charAt(a.length-1),10));},30*1000); </code></pre> 2) Missings?! I can't find your second question! 3) Well, ... trclick needs to change ... to => <pre><code>function trClick(tIndex){ //tIndex would be classnumber from now on if (tIndex == -1){ //if it is all updating or all non updating $("tr").click(function(){ //do the previous do $(this).toggleClass('selected').siblings().removeClass('selected'); if(readCookie($(this).parent().index("tbody"))){ if(readCookie($(this).parent().index("tbody"))==$(this).index()) eraseCookie($(this).parent().index("tbody")); else{ eraseCookie($(this).parent().index("tbody")); createCookie($(this).parent().index("tbody"),$(this).index(),1); } } else createCookie($(this).parent().index("tbody"),$(this).index(),1); }); } else{ //else $("tr").click(function(){ //on click $(this).toggleClass('selected').siblings().removeClass('selected');//do the toggle like before if(readCookie(tIndex)){ //if you can read the CLASS cookie, not the current index of table because our table has only one row if(readCookie(tIndex)==$(this).index()) //as before if we selecting it again eraseCookie(tIndex); //just erase the cookie else{ //else eraseCookie(tIndex); //select the new one createCookie(tIndex,$(this).index(),1); } } else createCookie(tIndex,$(this).index(),1); //else if we can't read it, just make it! }); } } </code></pre> and when we call it on Ajax success we should call it with classNumber => <code>trClick(classNumber);</code> Last working fiddle: <a href="http://jsfiddle.net/sijav/kHtuQ/53/" rel="noreferrer">http://jsfiddle.net/sijav/kHtuQ/53/</a> or <a href="http://fiddle.jshell.net/sijav/kHtuQ/53/show/" rel="noreferrer">http://fiddle.jshell.net/sijav/kHtuQ/53/show/</a> Good Luck
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POAutorefreshing/updating table using jQuery ajax by either using json or html files
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USSijav
UserOwnerUserId
1. USSijav
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POAutorefreshing/updating table using jQuery ajax by either using json or html files
 singulars
 PostTypePostTypeId
 PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
3. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId

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.