egoselfaxis
asked on
Implementing drag and drop based re-ordering of table rows for WordPress custom post types using the JQuery UI sortable plugin
I recently developed a custom WordPress plugin for a client that allows them to add, modify, and delete custom post types to/from the database.
The plugin currently displays the data in an HTML table, and orders the posts based on the post ID values (where the most recently added posts are appended as the bottom-most row of the table).
Also, .. the plugin generates copy & paste-able HTML code for the dynamically generated table .. which is then inserted into an HTML newsletter that's sent out weekly. An example of the HTML code that's dynamically generated is below:
I was recently thrown a curve ball by the client when I was asked to add drag and drop based re-ordering of these table rows. I'm not exactly sure how to go about that, .. which is why I've posted this question here.
How would I add drag and drop based re-ordering of these table rows using JQuery UI's sortable plugin (which I already have loaded in my WordPress plugin)? More importantly ... how would I implement this in such a way where it also updates the ordering in the database?
I'm currently displaying the rows in ASC order based on the ID values, and I understand that I'd need to change things so that the rows are reordered based on the "menu_order" column in the "wp_posts" table (which is where I'm storing my custom post types). I'm confident that this shouldn't be a problem. However, .. I'm still not exactly sure how to approach this.
Note that I am NOT using ajax to handle my form submissions, .. and re-programming everything so that it uses Ajax definitely isn't an option at this point. Instead, .. what I'd like to figure out how to do is something similar to the following:
1) The user can drag and drop any of the rows to their desired positions within the table.
2) When all of the rows are in the desired order, the user can click on an "Update" button that would update the "menu_order" values for all of those custom post types in the database (to reflect the same order that they were just re-arranged in).
3) When the page refreshes (ie: I'm not using ajax) .. all of the table rows would be displayed in the re-assigned order.
I'm assuming that some slight modifications to my HTML would be needed, as well as some JavaScript and PHP code snippets. So how would I go about this, exactly? Any help would be appreciated.
Thanks!
- Yvan
The plugin currently displays the data in an HTML table, and orders the posts based on the post ID values (where the most recently added posts are appended as the bottom-most row of the table).
Also, .. the plugin generates copy & paste-able HTML code for the dynamically generated table .. which is then inserted into an HTML newsletter that's sent out weekly. An example of the HTML code that's dynamically generated is below:
<div class="mcnTextContent">
<table width="100%" cellpadding="4" cellspacing="0" border="0">
<tr>
<thead>
<th align="left" width="1%"></th>
<th align="left" width="59%" nowrap><span style="font-family:roboto,helvetica neue,helvetica,arial,sans-serif;font-size:12px;font-weight:bold;text-decoration:underline;color:#004274;">ADDRESS</span></th>
<th align="left" width="20%" nowrap><span style="font-family:roboto,helvetica neue,helvetica,arial,sans-serif;font-size:12px;font-weight:bold;text-decoration:underline;color:#004274;">SOLD DATE</span></th>
<th align="left" width="20%" nowrap><span style="font-family:roboto,helvetica neue,helvetica,arial,sans-serif;font-size:12px;font-weight:bold;text-decoration:underline;color:#004274;">SOLD PRICE</span></th>
</thead>
</tr>
<tr>
<td align="left" valign="middle"><img src="https://gallery.mailchimp.com/4d0c6a0ad6b8b1831cff2d851/images/sample.png" height="25" width="25" alt=""></td>
<td align="left" valign="middle"><a href="http://google.com" target="_blank" style="font-family:roboto,helvetica neue,helvetica,arial,sans-serif;font-size:12px;color:#004274;">666 Boop Street</a></td>
<td align="left" valign="middle"><span href="#" style="font-family:roboto,helvetica neue,helvetica,arial,sans-serif;font-size:12px;color:#004274;">9/01/2017</span></td>
<td align="left" valign="middle"><span href="#" style="font-family:roboto,helvetica neue,helvetica,arial,sans-serif;font-size:12px;color:#004274;">$500,000</span></td>
</tr>
<tr>
<td align="left" valign="middle"><img src="https://gallery.mailchimp.com/4d0c6a0ad6b8b1831cff2d851/images/sample.png" height="25" width="25" alt=""></td>
<td align="left" valign="middle"><a href="http://google.com" target="_blank" style="font-family:roboto,helvetica neue,helvetica,arial,sans-serif;font-size:12px;color:#004274;">123 five street</a></td>
<td align="left" valign="middle"><span href="#" style="font-family:roboto,helvetica neue,helvetica,arial,sans-serif;font-size:12px;color:#004274;">9/22/2017</span></td>
<td align="left" valign="middle"><span href="#" style="font-family:roboto,helvetica neue,helvetica,arial,sans-serif;font-size:12px;color:#004274;">$600,000</span></td>
</tr>
<tr>
<td align="left" valign="middle"><img src="https://gallery.mailchimp.com/4d0c6a0ad6b8b1831cff2d851/images/sample.png" height="25" width="25" alt=""></td>
<td align="left" valign="middle"><a href="http://egoselfaxis.com" target="_blank" style="font-family:roboto,helvetica neue,helvetica,arial,sans-serif;font-size:12px;color:#004274;">1900 Royal Palm Way</a></td>
<td align="left" valign="middle"><span href="#" style="font-family:roboto,helvetica neue,helvetica,arial,sans-serif;font-size:12px;color:#004274;">9/21/2017</span></td>
<td align="left" valign="middle"><span href="#" style="font-family:roboto,helvetica neue,helvetica,arial,sans-serif;font-size:12px;color:#004274;">$700,000</span></td>
</tr>
<tr>
<td style="border-bottom:1px solid #4DC8FF;"></td>
<td style="border-bottom:1px solid #4DC8FF;"></td>
<td style="border-bottom:1px solid #4DC8FF;"></td>
<td style="border-bottom:1px solid #4DC8FF;"></td>
</tr>
</table>
</div> I was recently thrown a curve ball by the client when I was asked to add drag and drop based re-ordering of these table rows. I'm not exactly sure how to go about that, .. which is why I've posted this question here.
How would I add drag and drop based re-ordering of these table rows using JQuery UI's sortable plugin (which I already have loaded in my WordPress plugin)? More importantly ... how would I implement this in such a way where it also updates the ordering in the database?
I'm currently displaying the rows in ASC order based on the ID values, and I understand that I'd need to change things so that the rows are reordered based on the "menu_order" column in the "wp_posts" table (which is where I'm storing my custom post types). I'm confident that this shouldn't be a problem. However, .. I'm still not exactly sure how to approach this.
Note that I am NOT using ajax to handle my form submissions, .. and re-programming everything so that it uses Ajax definitely isn't an option at this point. Instead, .. what I'd like to figure out how to do is something similar to the following:
1) The user can drag and drop any of the rows to their desired positions within the table.
2) When all of the rows are in the desired order, the user can click on an "Update" button that would update the "menu_order" values for all of those custom post types in the database (to reflect the same order that they were just re-arranged in).
3) When the page refreshes (ie: I'm not using ajax) .. all of the table rows would be displayed in the re-assigned order.
I'm assuming that some slight modifications to my HTML would be needed, as well as some JavaScript and PHP code snippets. So how would I go about this, exactly? Any help would be appreciated.
Thanks!
- Yvan
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Ok, in that case, here are my follow-up questions:
1) Are you familiar with jQuery?
2) Have you ever implemented an AJAX solution before?
This might be more of a gig than a question as it would be easier for someone to simply add the pieces into your code to support this, but we could walk you through this if you have any experience with jQuery and AJAX. If you don't, then I recommend turning this into a gig as it would take a few hours to implement something like this.
1) Are you familiar with jQuery?
2) Have you ever implemented an AJAX solution before?
This might be more of a gig than a question as it would be easier for someone to simply add the pieces into your code to support this, but we could walk you through this if you have any experience with jQuery and AJAX. If you don't, then I recommend turning this into a gig as it would take a few hours to implement something like this.
ASKER
Good morning Andrew. To answer your questions -- yes -- I am familiar and experienced with both JQuery and Ajax. I've even implemented this whole drag-and-drop based reordering thing several times in the past (using unordered lists). I just can't quite grasp how I'd accomplish something similar using table rows in a Wordpress plugin, .. as I'm trying to keep it as a single PHP file .. which I've succeeded at doing so far.
I did a bit of experimenting with that "Post Types Order" plugin you've recommended, by the way .. and although I thought it wasn't working initially, .. I soon learned that I needed to first register my custom post types within my plugin (which wasn't really necessary in my case until now). Once I did that, I was then able to reorder the posts for that custom plugin. (So thank you for that recommendation).
However .. aside from the fact that I don't think my client will especially like having to manage their custom post types in 2 different places, .. what makes the re-ordering cumbersome using this approach is that only the post titles are being displayed for each of the posts on the re-ordering screens, which isn't enough information for them to know how to re-order things. The custom post types are Real Estate listings, you see, .. so sometimes they'll want to re-order the listings based on price, .. which would be difficult since they don't get to see that price on the re-ordering screen.
On that note .. do you know if there's any way to get some of that additional data to display next to the post titles on the re-ordering screens? For example ... something like "post_title -- post_excerpt" .. for each post? Or will it only display the post titles?
- Yvan
I did a bit of experimenting with that "Post Types Order" plugin you've recommended, by the way .. and although I thought it wasn't working initially, .. I soon learned that I needed to first register my custom post types within my plugin (which wasn't really necessary in my case until now). Once I did that, I was then able to reorder the posts for that custom plugin. (So thank you for that recommendation).
However .. aside from the fact that I don't think my client will especially like having to manage their custom post types in 2 different places, .. what makes the re-ordering cumbersome using this approach is that only the post titles are being displayed for each of the posts on the re-ordering screens, which isn't enough information for them to know how to re-order things. The custom post types are Real Estate listings, you see, .. so sometimes they'll want to re-order the listings based on price, .. which would be difficult since they don't get to see that price on the re-ordering screen.
On that note .. do you know if there's any way to get some of that additional data to display next to the post titles on the re-ordering screens? For example ... something like "post_title -- post_excerpt" .. for each post? Or will it only display the post titles?
- Yvan
Oh yes, there's yet another plugin for that.
It's called Admin Columns from CodePress.
https://wordpress.org/plugins/codepress-admin-columns/
It's called Admin Columns from CodePress.
https://wordpress.org/plugins/codepress-admin-columns/
ASKER
Ah .. I've worked with that plugin before as well. But you can't really re-order the posts from this screen though, can you? As I recall, the drag n' drop interface for the Post Types Order plugin is entirely separate from the posts listing screen. So I'm not sure if this would work or not.
Assuming that I'm mistaken about this .. I guess the one other thing left that I'd need to figure out is how to auto increment the "menu_order" column for my custom post types in the database when the records are added using my custom plugin.
As you know, .. the menu_order value always defaults to 0 when posts are added. Do you by any chance know of a custom method/action that I could add to my functions.php file that would handle this for my custom post types?
- Yvan
Assuming that I'm mistaken about this .. I guess the one other thing left that I'd need to figure out is how to auto increment the "menu_order" column for my custom post types in the database when the records are added using my custom plugin.
As you know, .. the menu_order value always defaults to 0 when posts are added. Do you by any chance know of a custom method/action that I could add to my functions.php file that would handle this for my custom post types?
- Yvan
Um, not the case. I use it all the time and re-order all of my posts with this plugin.
Your last question there should be opened as a new question to be fair for people in this forum. They should have the ability to answer that one as well separate from this as we are starting to stack multiple problems into an ongoing chain of questions.
Your last question there should be opened as a new question to be fair for people in this forum. They should have the ability to answer that one as well separate from this as we are starting to stack multiple problems into an ongoing chain of questions.
ASKER
The Admin Columns plugin allows you to reorder posts? I see no mention of that on the plugin page ... for either the free or premium versions.
No, that one doesn't allow you to re-order posts.
*This is why it's important to ask 1 question per post.*
Originally I sent over this plugin to re-order posts: POST TYPES ORDER
Your response below:
"I did a bit of experimenting with that "Post Types Order" plugin you've recommended, by the way .. and although I thought it wasn't working initially, .. I soon learned that I needed to first register my custom post types within my plugin (which wasn't really necessary in my case until now). Once I did that, I was then able to reorder the posts for that custom plugin. (So thank you for that recommendation). "
Then you asked another question:
"On that note .. do you know if there's any way to get some of that additional data to display next to the post titles on the re-ordering screens? For example ... something like "post_title -- post_excerpt" .. for each post? Or will it only display the post titles?"
My response to that is below:
To add special columns to custom post types to display in the admin menus, use this plugin: ADMIN COLUMNS
--------------------------
2 different plugins, 2 different functions.
1st plugin re-orders your posts on demand.
2nd plugin adds those extra columns you need
*This is why it's important to ask 1 question per post.*
Originally I sent over this plugin to re-order posts: POST TYPES ORDER
Your response below:
"I did a bit of experimenting with that "Post Types Order" plugin you've recommended, by the way .. and although I thought it wasn't working initially, .. I soon learned that I needed to first register my custom post types within my plugin (which wasn't really necessary in my case until now). Once I did that, I was then able to reorder the posts for that custom plugin. (So thank you for that recommendation). "
Then you asked another question:
"On that note .. do you know if there's any way to get some of that additional data to display next to the post titles on the re-ordering screens? For example ... something like "post_title -- post_excerpt" .. for each post? Or will it only display the post titles?"
My response to that is below:
To add special columns to custom post types to display in the admin menus, use this plugin: ADMIN COLUMNS
--------------------------
2 different plugins, 2 different functions.
1st plugin re-orders your posts on demand.
2nd plugin adds those extra columns you need
ASKER
I asked you if there's any way to get some of that additional data to display next to the post titles on the re-ordering screens .. not on the posts listing screen. Just forget it. I see now that I'm not going to get any more out of you here. Thanks for your time.
This is a confusing statement to me, which needed clarification.
"additional data to display next to the post titles on the re-ordering screens .. not on the posts listing screen"
To me, that is one and the same based on the comment you made saying that once you registered the post type properly, you could them re-order it properly. Based on that, you are now following the proper WordPress Codex and the only screen you can add additional columns to is the same screen that you can re-order the posts on.
Now, if you want that within your plugin you created and is not following the WordPress codex, that's a different topic entirely, one which I can't answer because I can't see any of your code other than some of the HTML you provided us.
My recommendation, stretch yourself and follow the WordPress codex. You have clearly demonstrated that you have the capabilities to develop plugins, so we can help, we are encouraging that you follow the codex so we can better assist you with your needs and questions.
"additional data to display next to the post titles on the re-ordering screens .. not on the posts listing screen"
To me, that is one and the same based on the comment you made saying that once you registered the post type properly, you could them re-order it properly. Based on that, you are now following the proper WordPress Codex and the only screen you can add additional columns to is the same screen that you can re-order the posts on.
Now, if you want that within your plugin you created and is not following the WordPress codex, that's a different topic entirely, one which I can't answer because I can't see any of your code other than some of the HTML you provided us.
My recommendation, stretch yourself and follow the WordPress codex. You have clearly demonstrated that you have the capabilities to develop plugins, so we can help, we are encouraging that you follow the codex so we can better assist you with your needs and questions.
ASKER
My apologies Andrew. What I wasn't at all aware of (until the last 15 minutes or so) was the the posts actually CAN be reordered on the posts listing screen using the Post Types Order plugin.
Up until now, I was always proceeding to the "Re-Order" screen to do the reordering .. which lacked the displaying of of any additional meta data except for the post title. I see now that the combining of both plugins that you've recommended will allow me to do exactly what I need. So thank you.
- Yvan
Up until now, I was always proceeding to the "Re-Order" screen to do the reordering .. which lacked the displaying of of any additional meta data except for the post title. I see now that the combining of both plugins that you've recommended will allow me to do exactly what I need. So thank you.
- Yvan
You are welcome. Thanks for your patience with us as we try to fully understand your questions.
ASKER
No .. I am not. So the plugin you're referencing (which I'm familiar with) won't work in my situation. I need the drag-and-drop functionality within the tables .. for which each row represents a custom post.