JQuery / Refresh Table Row

JavaScript
1

Hi,
I know PHP. I dont know javascript and IM having a heck of a time getting something to work.
I know what the issue is. I dont know how to fix it.

I have a table with students that registered to attend a training.
On each row there are three form buttons. One says ABSENT, one says FAILED, the other says PASSED.
This table will display up to 25 rows at a time.

I want the instructor to press one of the buttons for each student and not refresh the entire page. At the same time UPDATE the row in MySQL/PHP.
This part works and its done.
The issue I am having is that after the button is pressed, the button is supposed to dissapear and replace the button with text that says, ABSENT, FAILED, Or PAssed(text depending on what is clicked)

The problem is one the first row, all is fine. Instructor presses ABSENT BUTTON, button refreshes to display ABSENT, (NO BUTTON). JUST TEXT.

Once I do the second row, it modifies the record properly in the db, however the button stays there and the text gets displayed on ROW 1. Not Row 2. SEE ATTACHED IMAGE

As mentioned, the database gets updated fine. The only issue is the result is displaying on table row one becasue there is nothing telling it where to update.

Here is my code.

Javascript in header


 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="../instructor/includes/jscript/jquery.form.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    $('#attendanceform').ajaxForm({
      target: '#showdata',
      success: function() {
        $('#showdata').fadeIn('slow');
      }
    });
  });
  </script>

Form Data


    <form name="attendanceform" id="attendanceform" action="coursedetails_attendance_data.php" method="post">
          <input type="hidden" name="attendance" value="attended" />
          <input type="hidden" name="id" id="id" value="<?php echo $courseregid; ?>" />
		  <input type="submit" name="attendence" id="attended" class="btn success" value="Attended">
   		  <input type="submit" name="attendence" id="failed" class="btn error" value="Failed">
   		  <input type="submit" name="attendence" id="failed" class="btn error" value="Absent"><br />
          </form>

Here is page which updates the record


<?php require_once('../../Connections/db.php'); ?>
<?php
if (!isset($_SESSION)) {
  session_start();
}?>
<?php
$attendance = strtolower($_POST['attendence']);
	if ($attendance == 'attended') {
	 $response =  '<span class="label success">ATTENDED</span>'; }
else if ($attendance == 'failed') {
		 $response = '<span class="label error">FAILED</span>'; }
else if ($attendance == 'absent') {
		 $response =  '<span class="label warning">ABSENT</span>'; }

?>
<?php //update record
if (isset($_POST['attendance'])) {
	mysql_select_db($database_db, $db);
	$result = sprintf('UPDATE courseregistrations SET registrationstatus="'.$attendance.'" WHERE courseregistrationsid = '.(int)$_POST['id'],$link);
    $Result1 = mysql_query($result, $db) or die(mysql_error());
	echo $response;
}
?>

Any help is appreciated!!

2

First order of business would be to change your HTML to not use IDs (or at least use unique IDs for each form and each form field)

I’d recommend adding a class to each form (“.attendanceForm”), you can then target the forms like so: $(“.attendanceForm”)

You should end up with something like this:

<form name="attendanceform" id="attendanceform_1" action="coursedetails_attendance_data.php" method="post">
   <input type="hidden" name="attendance" value="attended" />
   <input type="hidden" name="id" id="id_1" value="<?php echo $courseregid; ?>" />
   <input type="submit" name="attendence" id="attended_1" class="btn success" value="Attended">
   <input type="submit" name="attendence" id="failed_1" class="btn error" value="Failed">
   <input type="submit" name="attendence" id="failed_1" class="btn error" value="Absent"><br />
</form>

<form name="attendanceform" id="attendanceform_2" action="coursedetails_attendance_data.php" method="post">
   <input type="hidden" name="attendance" value="attended" />
   <input type="hidden" name="id" id="id_2" value="<?php echo $courseregid; ?>" />
   <input type="submit" name="attendence" id="attended_2" class="btn success" value="Attended">
   <input type="submit" name="attendence" id="failed_2" class="btn error" value="Failed">
   <input type="submit" name="attendence" id="failed_2" class="btn error" value="Absent"><br />
</form>

Let me know how you get on once you have made those changes :slight_smile:

3

OK Thanks,
Question for you though.
The table is created dynamically so I can easily increment each form number by one. However how do you target the specific row you are clicking in. The target definition is in the header javascript before the form numbers are even created.

4

here is what i got. no go.lol.


  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="../instructor/includes/jscript/jquery.form.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    $('#attendanceform').ajaxForm({
      target: '$(".attendanceForm")',
      success: function() {
      $(".attendanceForm").fadeIn('slow');
      }
    });
  });
  </script>


		
          <form name="attendanceform" id="attendanceform_1" action="coursedetails_attendance_data.php" method="post">
          <input type="hidden" name="attendance" value="attended" />
          <input type="hidden" name="id" id="id_1" value="570" />
		  <input type="submit" name="attendence" id="attended_1" class="btn success" value="Attended">
   		  <input type="submit" name="attendence" id="failed_1" class="btn error" value="Failed">
   		  <input type="submit" name="attendence" id="failed_1" class="btn error" value="Absent"><br />
	

          <form name="attendanceform" id="attendanceform_2" action="coursedetails_attendance_data.php" method="post">
          <input type="hidden" name="attendance" value="attended" />
          <input type="hidden" name="id" id="id_2" value="571" />
		  <input type="submit" name="attendence" id="attended_2" class="btn success" value="Attended">
   		  <input type="submit" name="attendence" id="failed_2" class="btn error" value="Failed">
   		  <input type="submit" name="attendence" id="failed_2" class="btn error" value="Absent"><br />
          </form>
                    </td>
5

As long as each row contains 1 form (or rather, as long as each form has a parent element that also contains the target div), then we can change this quite easily.

I wrote the following example to demonstrate:


<!-- Multiple forms in "rows" (<div>s in my case) -->
<div class="formDiv">
    <div class="update-text"></div>
    <form action="ajax.php" method="get" class="myForm">
        <input type="text" value="" name="name" />
        <input type="submit" />
    </form>
</div>

<div class="formDiv">
    <div class="update-text"></div>
    <form action="ajax.php" method="get" class="myForm">
        <input type="text" value="" name="name" />
        <input type="submit" />
    </form>
</div>

AJAXForm has a method you can set in the options that can update the target before submitting the form… for my example it is:


$('.myForm').ajaxForm({
    beforeSerialize: function(form, options){
        options.target = form.closest(".formDiv").find(".update-text"); //for you this might be something like form.closest("tr").find(".showData");
    }
});

You still need to add the attendanceForm class on the forms… and then instead of targeting $(“#attendanceForm”).ajaxform( … ) you need to reference $(“.attendanceForm”).ajaxForm( … )

<form name="attendanceform" id="attendanceform_1" action="coursedetails_attendance_data.php" method="post" [COLOR=#ff0000]class="attendanceForm"[/COLOR]>

It’s also important that you change your showData div to use a class. In fact everything in your page that has an ID, should be a unique ID, so if you are using IDs in a loop, you need to either prefix/postfix them or use classes if the ID isn’t really required :slight_smile:

6

Ok I REALLY appreciate your help and patience.
Like I said, I dont know JAVASCRIPT at all.
I understand most of what you are saying, but I have played around with all kinds of combinations and the only thing I have gotten is the following.

IT WORKS BUT IT REFRESHES ALL ROWS with the response, not just the row i click on.

THANKS AGAIN!

  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="../instructor/includes/jscript/jquery.form.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
     $(".attendanceForm").ajaxForm({
      target: $(".attendanceForm"),
      success: function() {
     $(".attendanceForm").fadeIn('slow');
      }
    });
  });
  </script>


               <div id="showdata_1" class="attendanceForm">
          <form name="attendanceform" id="attendanceform_1" action="coursedetails_attendance_data.php" method="post" class="attendanceForm">
          <input type="hidden" name="attendance" value="attended" />
          <input type="hidden" name="id" id="id_1" value="569" />
		  <input type="submit" name="attendence" id="attended_1" class="btn success" value="Attended">
   		  <input type="submit" name="attendence" id="failed_1" class="btn error" value="Failed">
   		  <input type="submit" name="attendence" id="failed_1" class="btn error" value="Absent"><br />
          </form>

			
                                <div id="showdata_2" class="attendanceForm">
          <form name="attendanceform" id="attendanceform_2" action="coursedetails_attendance_data.php" method="post" class="attendanceForm">
          <input type="hidden" name="attendance" value="attended" />
          <input type="hidden" name="id" id="id_2" value="570" />
		  <input type="submit" name="attendence" id="attended_2" class="btn success" value="Attended">
   		  <input type="submit" name="attendence" id="failed_2" class="btn error" value="Failed">
   		  <input type="submit" name="attendence" id="failed_2" class="btn error" value="Absent"><br />
          </form>


			
                                <div id="showdata_3" class="attendanceForm">
          <form name="attendanceform" id="attendanceform_3" action="coursedetails_attendance_data.php" method="post" class="attendanceForm">
          <input type="hidden" name="attendance" value="attended" />
          <input type="hidden" name="id" id="id_3" value="571" />
		  <input type="submit" name="attendence" id="attended_3" class="btn success" value="Attended">
   		  <input type="submit" name="attendence" id="failed_3" class="btn error" value="Failed">
   		  <input type="submit" name="attendence" id="failed_3" class="btn error" value="Absent"><br />
          </form>
7

Ok so in your code you made a few mistakes when you were looking at my example.

Firstly, probably the most important thing to do is close all the showData divs, since you are not closing them, the first one would simply encapsulate the rest of the document.

Next up, all your showData divs need to have a class of “showData” NOT “attendanceForm”.

The attendanceForm class ONLY goes on the form.

Do you actually want the form to be replaced when someone clicks one of the buttons? If so, your code is mostly fine, you just need to make sure the showData divs are closed at the end of each form

You need to make sure that you place the beforeSerialize method in the ajaxForm options. Like so (You probably don’t need the success callback you have in there at the moment):


$(document).ready(function() {
    $(".attendanceForm").ajaxForm({
        beforeSerialize: function(form, options){
            options.target = form.closest(".showData");
        }
    });
});

Again, make sure you close the showData divs and that you give them the right class.


<div id="showdata_1" class="showData"> <!-- make sure you change the class of the divs to showData -->
 
    <form name="attendanceform" id="attendanceform_1" action="coursedetails_attendance_data.php" method="post" class="attendanceForm">
        <input type="hidden" name="attendance" value="attended" />
        <input type="hidden" name="id" id="id_1" value="569" />
        <input type="submit" name="attendence" id="attended_1" class="btn success" value="Attended">
        <input type="submit" name="attendence" id="failed_1" class="btn error" value="Failed">
        <input type="submit" name="attendence" id="failed_1" class="btn error" value="Absent"><br />
    </form>    

</div> <!-- Make sure you close the showData div after each form -->