bnorcom Posted October 15, 2020 Share Posted October 15, 2020 I've created an EMS system and the latest page is to let a user mark his progress by choosing a chapter from a list echoed into a table from a mysql database. I've used on.change successfully before but the syntax here is different and not working. The event handler and page is displayed at www.biblebookletschool.com/sessionprogress.php. Perhaps you've solved this problem before. <script type="text/javascript"> $(document).ready(function() { $(document).on('change','option',function() { var returnval = $(this).val(); $('#hway').val(returnval); }); // end change }); // end ready </script> $sql = "SELECT recnum,usernum,crsnum,pernum,DATE_FORMAT(signdte, '%m %d %Y') AS dte,status,headway FROM session WHERE usernum = 1"; if ($result = mysqli_query($dbc,$sql)) { if (mysqli_num_rows($result) > 0) { while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) { echo "<tr><td align='center'>" . $row['crsnum'] . "</td>"; echo "<td align='center'>" . $row['pernum'] . "</td>"; echo "<td>" . $row['dte'] . "</td>"; echo "<td align='center'>" . $row['status'] . "</td>"; echo "<td>" . $inA . $row['recnum'] . $inB . "</td>"; echo "<td align='center' id='progress'>" . $row['headway'] . "</td>"; $course = $row['crsnum']; $sqlL = "SELECT coursenum, lessonid, lessonname FROM lesson WHERE coursenum = $course"; if ($occurs = mysqli_query($dbc,$sqlL)) { if (mysqli_num_rows($occurs) > 0) { echo '<td> <select> <option value="">select</option>'; while($row = mysqli_fetch_array($occurs, MYSQLI_ASSOC)) { echo '<option value="' . $row['lessonid'] . '">'; echo $row['lessonname'] . '</option>'; } // EndW Listing echo '</select></td></tr>'; } else { echo 'No records found.'; } // End ROWS } else { echo 'Error: ' . $sql . '<br>' . mysqli_error($dbc); } // End QUERY } // EndW Tabling echo '</tbody></table>'; echo "<div id='hway'>9</div>"; Link to comment Share on other sites More sharing options...
Larry Posted October 16, 2020 Share Posted October 16, 2020 You probably want to be using $('#hway').text(returnval); as the DIV doesn't have a "value". Link to comment Share on other sites More sharing options...
bnorcom Posted October 16, 2020 Author Share Posted October 16, 2020 That was the reason. At the start I thought it was in the event, but discovered by an Alert that it was elsewhere. Your answer put the icing on the cake. Link to comment Share on other sites More sharing options...
bnorcom Posted October 20, 2020 Author Share Posted October 20, 2020 I need to carry this further by traversing the DOM and don't know the trick. I have to update a column in the table with the selected data. This is my first try which doesn't work. <script type="text/javascript"> $(document).ready(function() { $('select').on('change',function() { var returnVal = $(this).val(); var curRow = $(this).closest('tr'); curRow.('td: eq(6)').text(returnVal); }); // end change }); // end ready </script> $(this) is the selection from the "subtable" in the column which should be able to find the current row. From there it should be easy to find the right column. But that's easier said than done. Link to comment Share on other sites More sharing options...
Larry Posted October 21, 2020 Share Posted October 21, 2020 It's probably help if you could share that part of the DOM here so we could understand how you might navigate it. Link to comment Share on other sites More sharing options...
bnorcom Posted October 21, 2020 Author Share Posted October 21, 2020 The page's purpose for one thing is to let the student record the lesson he's working on. There is a lesson table with lessons for each course, each lesson having an id and name. The page is set up now to test only a single student, The last two columns o the page's table are the current id being studied and a lesson list for the particular cours. echo "<td align='center' id='progress'>" . $row['headway'] . "</td>"; $course = $row['crsnum']; $sqlL = "SELECT coursenum, lessonid, lessonname FROM lesson WHERE coursenum = $course"; if ($occurs = mysqli_query($dbc,$sqlL)) { if (mysqli_num_rows($occurs) > 0) { echo '<td> <select> <option value="">select</option>'; while($row = mysqli_fetch_array($occurs, MYSQLI_ASSOC)) { echo '<option value="' . $row['lessonid'] . '">'; echo $row['lessonname'] . '</option>'; } // EndW Listing echo '</select></td></tr>'; When a lesson is selected the "work" column (id=progress) should be updated and later the student's course record will be updated. Once the table's column is updated the field should be available to update the database. Link to comment Share on other sites More sharing options...
Larry Posted October 21, 2020 Share Posted October 21, 2020 Okay, I think you should be able to do something like $(this).parent().prev().text(); Or it may be parent(). parent(). You can experiment with manipulating the DOM in the browser's console window to get the right solution. All that being said, if you have a form whose values are going into a database, I'm not quite following what the benefit is of updating an HTML table, too. The form selections already indicate what the user wants. You probably have a good reason--or I may be missing something--but I just wanted to raise the question. Link to comment Share on other sites More sharing options...
bnorcom Posted October 21, 2020 Author Share Posted October 21, 2020 Since its a test a step by step procedure prevents me from biting off more than I can chew and some of the steps would be unnecessary in the final version anyway. When you're figuring something out the first time it pays to be cautious. The concern is that the event is precipitated from a selection within one of the table row's columns as in a lower level. But if looking for the current row, the jQuery search goes upward from the current location which is the way the event is set up here without using "parent" because "current row" might be more straightforward. It seemed more common sense that way than using "parent" which would start from the lesson selection and work its way back to the row it was in in an unpredictable way. Link to comment Share on other sites More sharing options...
bnorcom Posted October 21, 2020 Author Share Posted October 21, 2020 To try something else. <script type="text/javascript"> $(document).ready(function() { $('select').on('change',function() { var returnVal = $(this).val(); $(this).parent('td: eq(6)').text(returnVal); }); // end change }); // end ready </script> Doesn't work. $(this) represents the selection from a list which we know works. Parent() should be theoretically the containing row. If successfully displayed a button could be included to accept/submit and another function could update the database. Link to comment Share on other sites More sharing options...
bnorcom Posted October 22, 2020 Author Share Posted October 22, 2020 Tried in more simplified and straightforward way. $(document).ready(function() { $('select').on('change',function() { var returnVal = $(this).val(); var curRow = $(this).closest('tr'); curRow.find('td:eq(5)').text(returnVal); }); // end change }); // end ready Reminds me of studying a book years ago where "chaining" seemed so complicated that in order to understand an example you had to work your way back through the chain to understand. My mind back then was not set up for chaining. But I did remember a solution had a certain level of elegance which shows there is a way. Link to comment Share on other sites More sharing options...
Recommended Posts