5 Replies - 426 Views - Last Post: 21 July 2015 - 02:06 PM

#1 pfar54  Icon User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 417
  • Joined: 30-April 15

Getting values from <tr>'s in a drag and drop table and se

Posted 20 July 2015 - 08:42 PM

I have a drag and drop table that I am using to easily change if someone has made a payment. Right now the drag and drop part works great. However, I cannot figure out how to give the 3 different table columns 'values'to enable me to change the value of the user.

I have three different sections:

Owes = 1

Partially paid = 2

Paid = 3

I have a field in my db called payment_id. The values I mentioned are what will put the user in the appropriate place. So I want when a user is moved:

ie:

Dough from Owes to Paid-

for his payment_id to change, so that my table can take the changes in a permanent place. I'm not sure how I can assign the values and store them to send to AJAX and really how to send that through AJAX. The php part I can figure out.

I have my code below, but it is doing nothing.

How can I go about making this work?

It looks like...

|-------------------------------------------------------------------|
|  Paid                Partially Paid              Owes             |
|  Bob                      Joe                     Doug            |
|  Sue                      Becky                   Ralph           |
|-------------------------------------------------------------------|



My JS to make the table drag and drop..

		<script>
	 $(function() {
        $( "#paid, #partially_paid, #owes" ).sortable({
          connectWith: ".tdPayment",
          remove: function(e, ui) {
            var $this = $(this);
            var childs = $this.find('div');
            if (childs.length === 0) {
               $this.text("Nothing");
            }
          },
          receive: function(e, ui) {
            $(this).contents().filter(function() {
                return this.nodeType == 3; //Node.TEXT_NODE
             }).remove();
          },
        }).disableSelection();
      });
		    </script>



My table...

 $run = mysqli_query($con,"SELECT * FROM payment_status ORDER BY id DESC");
    $numrows = mysqli_num_rows($run);
        if( $numrows > 0) {
            while($row = mysqli_fetch_assoc($run)){
                $payment_id = $row['payment_id'];
                    if($payment_id == 3){
                        $paid_id = $row['user_id'];
                        $paid_name = $row['firstname'];
                    }
                    if($payment_id == 2){
                        $partially_paid_id = $row['user_id'];
                        $partially_paid_name = $row['firstname'];
                        $partially_paid_amount = $row['payment_amount'];
                    }
                    if($payment_id == 1){
                         $owes_id = $row['user_id'];
                        $owes_name = $row['firstname'];
                    }
?>	



		
			<tr>
				<th class="thPayment">Paid</th>
				<th class="thPayment">Partially Paid</th>
				<th class="thPayment">Owes</th>
			</tr>
			<tr>		
				<td class="tdPayment" id="paid" name="paid">
                <div>
				<?php
					if ($paid_name == true) {
						echo $paid_name;
					} else {
						echo "No one has paid";
					}
				?>
                </div>
				</td>
				<td class="tdPayment" id="partially_paid" name="partially_paid">
				<div>
				<?php 
					if ($partially_paid__name == true) {
						echo $partially_paid__name . " - " . $partially_paid_amount;
					} else {
						echo "No one has made a partial payment";
					}
				?>	
				</div>
				</td>
				<td class="tdPayment" id="owes" name="owes">
				<div>
				<?php
					if ($owes_name == true) {
						echo $owes_name;
					} else {
						echo "Everyone has paid something";
					}
			}
		}				 
				?>
			
				<input type="hidden" name="payment_id[]" value="<?php echo $owes_id; ?>">
				<input type="hidden" name="payment_id[]" value="<?php echo $partially_paid_id; ?>">
				<input type="hidden" name="payment_id[]" value="<?php echo $owes_id; ?>">
				</div>
				</td>
			</tr>
		</table>



My AJAX. It is my second time trying to do it, but this drag and drop table is really confusing me.

$(document).ready(function () {

    $('#update_group').on('submit', function (event) { //Do I have to put my table in a form?
    event.preventDefault();
        $.ajax({
            url: 'update_payment_status.php',
            type: 'POST', //Not sure what to put here with the drag and drop table
            data: {
            paid: $("#paid").val(3), //Paid
            partially_paid: $("#partially_paid").val(2), //Partially Paid
            owes: $("#owes").val(1), //Owes
        },
        success: function (data) {
                //do something with the data that got returned
                $(".success").fadeIn();
                $(".success").show();
                $('.success').html('Payment Status Changed!');
                $('.success').delay(5000).fadeOut(400);
                alert(data);
            },
             error: function(jqXHR, textStatus,errorThrown )
            {
              // alert on an http error 
              alert( textStatus +  errorThrown );
            }
        });
        return false;
    });
});



So my question is how can I

This post has been edited by Dormilich: 21 July 2015 - 12:36 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Getting values from <tr>'s in a drag and drop table and se

#2 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1789
  • View blog
  • Posts: 5,702
  • Joined: 15-January 14

Re: Getting values from <tr>'s in a drag and drop table and se

Posted 21 July 2015 - 10:12 AM

Is that receive function the one that gets executed when you drop something?
Was This Post Helpful? 0
  • +
  • -

#3 pfar54  Icon User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 417
  • Joined: 30-April 15

Re: Getting values from <tr>'s in a drag and drop table and se

Posted 21 July 2015 - 10:58 AM

View PostArtificialSoldier, on 21 July 2015 - 10:12 AM, said:

Is that receive function the one that gets executed when you drop something?


Yes, I believe so. Just not sure how to grab that or assign values to it, so that it knows when it dropped and can send that data.
Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1789
  • View blog
  • Posts: 5,702
  • Joined: 15-January 14

Re: Getting values from <tr>'s in a drag and drop table and se

Posted 21 July 2015 - 11:31 AM

Well, do some testing, add some console.log statements inside that function to see if they output on the console when you drop something. If that does get executed, then check what e, ui, and this are set to. Hopefully one of them will be the column or element where you dropped.
Was This Post Helpful? 0
  • +
  • -

#5 pfar54  Icon User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 417
  • Joined: 30-April 15

Re: Getting values from <tr>'s in a drag and drop table and se

Posted 21 July 2015 - 12:41 PM

View PostArtificialSoldier, on 21 July 2015 - 11:31 AM, said:

Well, do some testing, add some console.log statements inside that function to see if they output on the console when you drop something. If that does get executed, then check what e, ui, and this are set to. Hopefully one of them will be the column or element where you dropped.


Transfers a result set from the last query

Per PHP manual
Was This Post Helpful? 0
  • +
  • -

#6 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1789
  • View blog
  • Posts: 5,702
  • Joined: 15-January 14

Re: Getting values from <tr>'s in a drag and drop table and se

Posted 21 July 2015 - 02:06 PM

That belongs in the other thread.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1