SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery / Refresh Table Row

    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 IMAGEinstructornetworkissue.png

    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
    Code:
     <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
    HTML Code:
        <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 Code:
    <?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. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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:
    HTML Code:
    <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
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is what i got. no go.lol.

    Code:
      <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>

    HTML Code:
    		
              <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. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xeonman13 View Post
    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.
    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:
    Code HTML4Strict:
    <!-- 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:
    Code javascript:
    $('.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");
        }
    });


    Quote Originally Posted by xeonman13 View Post
    here is what i got. no go.lol.
    You still need to add the attendanceForm class on the forms... and then instead of targeting $("#attendanceForm").ajaxform( ... ) you need to reference $(".attendanceForm").ajaxForm( ... )
    Code:
    <form name="attendanceform" id="attendanceform_1" action="coursedetails_attendance_data.php" method="post" class="attendanceForm">
    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
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

    Code:
      <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>
    HTML Code:
                   <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>    


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •