StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You have a couple things going on in here. </p> <ol> <li><p>Your markup should be cleaned up a bit to add classes to the items to reference them in the rows. Having "class='Likelihood'" will allow you to reference the elements.</p></li> <li><p>Your calc function should be a handler for a change event binding. Also, in the calc event, you have a couple jQuery syntax errors like your "find('Severity')" and ".value()" calls.</p></li> <li><p>I can't see it here in your sample, but make sure you are binding all of this in the "ready" event for jQuery. Otherwise, if this is in the head of the page, you are trying to bind to the elements before they exist. And...</p></li> <li><p>You should use jQuery ".on" to bind the change event handler to the table so it works for dynamically added elements like the following:</p></li> </ol> <pre><code> $(function() { // jQuery ready shorthand $('#myTable').on('change','.Likelihood,.Severity,.Principal', function(e) { /* something */ } });</code></pre> <p>All that said, I put together two fiddles for you to clean it up and show it working. The first one is just a copy of what you put with a few things cleaned up to make it work. I added the classes, cleaned up some of the syntax errors, and then bound the events in the ready handler. The "onkeyip" is still there, but not being used. I also left "calc" as it's own function if you wanted to use it from other elements, but the contents really could be an anon function as the handler for the change event.</p> <p>The second fiddle is a little different. What you are doing, just from what I can see, lends itself really well to templating and data-binding. I used the JSViews package, with JSRender, and JSObservable and included your markup as a template in the page. It takes a little getting used to, but it's nice for UI work and makes managing markup like you are rendering much easier since it's actually HTML with data-binding (data-linking for JSViews). You can read up on it here: <a href="http://www.jsviews.com/#home" rel="nofollow">http://www.jsviews.com/#home</a></p> <p>Basically, you can create objects and arrays and bind them and their properties to elements in a page or template for dynamic rendering. If you have heard of Model View View Model (MVVM) it's what helps make it work. With two-way binding, any changes to the UI in terms of inputs or similar, changes the object or array (model). Any changes to the model via script is displayed in the template (view). It can get pretty complex, but your situation lends itself to a fairly good one for starting. It makes it nice to add to, remove from, and modify objects or an array of objects. In the example I provided, the add and remove just update the model with a new empty object, for example, but the UI updates with a new table row. And the template for the row is stored in a script tag in the HTML so it's really easy to work with.</p> <p>Anyways, after all that and my .02 cents, below are the links. Ask questions and pick what's easiest for you. However, if you do much work with dynamic rendering of large blocks of HTML, look into templating.</p> <p>Fiddle for original: <a href="http://jsfiddle.net/Hps25/" rel="nofollow">http://jsfiddle.net/Hps25/</a></p> <p>Fiddle for templating: <a href="http://jsfiddle.net/sW33n/2/" rel="nofollow">http://jsfiddle.net/sW33n/2/</a></p> <p><strong>Update:</strong> If you use the templating method, the data for the obstacles is already constructed into a single array of objects based on the rows created. That's the great thing about the templating approach: you add a row, it adds an item to the array. Then, when you want to use it, you just use the array, in this case <em>obstacles</em>. This, then, makes it super easy to use for posting to a service to update items in a DB, for instance. Using AJAX you can pass an object as <strong>"data"</strong> that will get serialized into a string. Deserialize it at the server into an object and you can do what you wish. </p> <p>I updated the fiddle to show an example of this, passing the obstacles array along with a single value from a "made-up" select element. Obviously the serverside piece would still need to be defined.</p> <p>Updated Fiddle: <a href="http://jsfiddle.net/sW33n/4/" rel="nofollow">http://jsfiddle.net/sW33n/4/</a></p>

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