last day (14 days later) » 

2:01 PM
1
A: Drag and Drop Table - moving cells to different columns

fuyushimoyaWhen you use $("#paid, #partially_paid, #owes" ).sortable({ you're making the their child element to be sortable, so, the result is make the elements in each td sortable and can be dragged to each other. As if you allow td to be dragged to other column, then you may have to calculate how many tds...

 
Even when I put a div around my php code this still doesn't work.
I edited my question to show you how I did it.
 
You want to move the whole column, include titles?
 
No, I don't want to include titles. The area I wrapped the div's around is the actual data that I want to move.
 
So after movement, the source td will become empty then?
 
I'm really not sure how to structure this. Your answer is what I am looking to do in a sense and it will get me going, but I am doing this with items from my db and if I move all of the table cells out of one column, I need the column to echo my else statement. However, with my code nothing will even move.
 
2:01 PM
Ahh, Got it, I'll change my code then.
@Becky Edited, please see the td's behavior after you remove all of the divs and move a div back to an empty td.
 
I'm not sure what is wrong, but nothing is moving. I have all of the Jquery libraries in the file. Then the JS you posted and the table I last put in my question on here.
 
Hi
Gotta make sure the final effect is what you want.
Im my snippets.
 
You mean the 'Nothing' that comes up when all table cells are moved out of that column?
 
Yep
Is that what you want to get?
 
Ideally I would like it say what is in my else statements, but it isn't a big deal.
 
2:05 PM
lol I believe you can make it yourself, so I just use a simple case.
Anyway, the issues now is the drag can't even work, right?
Would you mind paste your <head> in html to show that the js libs that you've included?
 
Sure.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 
You got 2 jquery, their diff is whether it support IEX or not
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></s‌​cript> change the bottom one to this
see that ui
 
Yea what is the ui for?
 
It mean's its a ui-lib, that its depend on jquery, and they might have same creators.
Anyway, you have to include the jquery, then jquery-ui, so something like draggable, Autocomplete can work.
 
ahh ok. I replaced that and it still won't drag or do anything.
 
2:11 PM
Are you using chrome
 
yes
 
Press f12, and see the console, tell if there's any red text that indicates errors.
 
There aren't any errors in the console.
 
Then switch to Elements, click on <html> and paste every thing here
let's see if there's something wrong when it become a real page.
 
Alright. Trying to copy all of it now.
It wouldn't let me copy all of it, so I will copy what is shows from the html from my actual file manager'
<!DOCTYPE html>

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<title>SFL</title>
<meta charset="UTF-8">
<meta name="description" content="Sunday Funday League">
<meta name="keywords" content="Football, Fantasy Football, League" />
<body>
<p>You are the creator!<p>
<li><a href="logout.php">Sign out</a></li>


<a href="manageUsers.php">Manage Users</a>


<table class="paymentTable" id="dragTable">
<tr>
<th class="thPayment">Paid</th>
<th class="thPayment">Partially Paid</th>
<th class="thPayment">Owes</th>
</tr>
<tr>
<td class="tdPayment" id="paid">
<div>
Paul </div>
</td>
<td class="tdPayment" id="partially_paid">
<div>
No one has made a partial payment
</div>
</td>
<td class="tdPayment" id="owes">
 
2:20 PM
Ok, I'll try to run this codes.
 
Thanks
 
There's something strange at <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></s‌​‌​cript>
</s..cript>
it seems it hide 2 invisible char here.
I removed the invisible chars and it worked.
 
How do I remove the invisible chars?
I'm not too sure what you mean by that.
 
Copy <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></s‌​‌​cript>
 
I have no sort of spacing or anything inbetween it?
 
2:24 PM
paste in chat box
and try to backspace,
you'll find that when delete to </s, it'll not direclty delete s
 
Great, it worked!
 
Haha
 
How would it gain hidden characters like that? Is that common?
 
No, its strange
I'm not sure where it come from
 
Weird.
 
2:27 PM
However, a good web editor(like sublime text) will show you there's some strange issue.
 
Notepad++ won't?
 
Nope
Actually Im not sure.
 
I'll have to see if it does. I don't think I've ever had that issue before
I really appreciate all of your help!
 
You can see what I see when I got it on my sublime
Np, remember to accept answer, and have a nice day :D
 
Yea, I've never seen a red line under code like that before
 

last day (14 days later) »