Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    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. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. COThanks @David for that solution. Thank is exactly what i was looking for!! Another question though.. I have a similar page with checkboxes and table too (i.e GoalName, GoalDescription, GoalDate, etc). After checking the boxes and submit button, i would like to open a new page with just the GoalName of the checked rows and run sql to display all my registered users in my db on a table next to the GoalNames so in the new table there'll be (RegisteredUser, GoalName, Checkboxes) and an invite button at the end of it. is there a way to do this.. perhaps a pseudo?? thanks so much
      singulars
    2. COI haven't done PHP in years so I am not going to be much help on specifics. If you have the data on one page and want to pop open another and display records based on that data, though, an easy approach might be to do a form submit. I'm assuming you want to get all the users registered for each goal and display them all in a cell next to the GoalName field. It sounds like you want to do a mass invite to everyone registered for a goal? Anyways, in PHP I believe it's $_POST['key'] to get the values posted to a page. You would probably want to loop through that and query based on the values.
      singulars
    3. COActually i figured out that was a rather less intuitive way of dealing with the problem. Instead of that, i would like to run an sql query on all the goalsNames in the my database and display in form a dropdown menu. once the goal is clicked then the table you've helped with above will be displayed. So for each/selected goal, a user can enter as much obstacle as possible.. if you could help or i could post as new question? thx
      singulars
 

Querying!

 
Guidance

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