StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
12941124
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
2
CommunityOwnedDate
CreationDate
2012-10-17T18:43:47.233
FavoriteCount
0
LastActivityDate
2012-10-18T18:59:13.343
LastEditDate
2012-10-18T18:59:13.343
LastEditorUserId
1478004
OwnerUserId
1478004
ParentId
12940434
PostTypeId
2
Score
0
ViewCount
0
LastEditorDisplayName
text
Body
<p>Forget about using html forms to submit your data. Your datasource is connected directy to your javascript so you can skip the postback and codebehind stuff. I would use jQuery for simplicity but you could do it with native javascript as well. jQuery is well documented if you decide to learn and use it, and worth the time to learn if you ask me.</p> <p>This example should help to get you started, feel free to edit and comment on it as needed:</p> <p><strong>Html</strong></p> <pre><code><fieldset class="stock-control"> <legend>Edit Stock Amount</legend> <label>ID:</label> <input type="text" id="txt-id"> <label>Amount:</label> <input type="text" id="txt-change"><br /> <input type="button" id="btn-add" value="Add"> <input type="button" id="btn-sub" value="Subtract"> <input type="button" id="btn-set" value="Set"> <br /> <label>In stock: </label><span id="lbl-total"></span> </fieldset> <fieldset class="stock-control"> <legend>Edit Stock Amount</legend> <label>ID:</label> <input type="text" class="txt-id"> <label>Amount:</label> <input type="text" class="txt-change"><br /> <input type="button" class="btn-add" value="Add"> <input type="button" class="btn-sub" value="Subtract"> <input type="button" class="btn-set" value="Set"> <br /> <label>In stock: </label><span class="lbl-total"></span> </fieldset> </code></pre> <p><strong>Javascript</strong></p> <pre><code>// Your code $(function () { $('.stock-control').each(function () { var $control = $(this); var $id = $control.find('.txt-id'); var $amount = $control.find('.txt-amount'); var $total = $control.find('.lbl-total'); function RenderAmount() { $total.text(StockRecorder.GetAmount($id.val())); }; $('.btn-add').click(function () { var stock = parseInt($total.text()) + parseInt($amount.val()); StockRecorder.Update($id.val(), stock); RenderAmount(); }); $('.btn-sub').click(function () { var stock = parseInt($total.text()) - parseInt($amount.val()); StockRecorder.Update($id.val(), stock); RenderAmount(); }); $('.btn-set').click(function () { StockRecorder.Update($id.val(), parseInt($amount.val())); RenderAmount(); }); // Initialize RenderAmount(); }); }); </code></pre> <p><strong>NOTE:</strong> You would want a button or an event that calls the RenderAmount() functions when an id has been entered/changed in the id textbox. In my example i pretended it was already filled in.</p> <p>By the way, seems like a fun project you have gotten your hands on. Enjoy it! :) </p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POSimple javascript program for keeping track of inventory amounts
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USRoy
UserOwnerUserId
1. USRoy
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POSimple javascript program for keeping track of inventory amounts
  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
  VTAcceptedByOriginator
CommentsPostId
1. COWhat if this form is displayed in more than one place on the page? Should I use a custom class instead?
  singulars
  PostPostId
  PO
  UserUserId
  USArlen Beiler
2. COYou could create a class for it if you want, but in my opinion it depends on the size of the project and maintainability of the code. I have updated the code to handle multiple instances of the "stock-control" element on a single page. Using jQuery each to wrap each control and bind the buttons and input boxes for each instance of the control using this a reference to the control.
  singulars
  PostPostId
  PO
  UserUserId
  USRoy

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.