Jump to content
Larry Ullman's Book Forums

Recommended Posts

 

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

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

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

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

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

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

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

 Share

×
×
  • Create New...