Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'd like to implement a similar functionality as WP Categories screen in the Admin area. Where you can add category and it will appear in the list of all categories straight away.

I have a CD custom post type and I would like to add tracks to a CD in the same way as WP Categories are added. So that after general CD info there will be an empty "New track info" form where a track's info is inserted and after hitting "Add track" - a track will appear under the general CD info, and again displaying an empty "New track info" form to add another track to a CD. (Hope that makes sense).

Also, it will be grate if I could reorder track records by dragging and dropping.

That's a lot of "wishing" that I don't know how to go on about. I'm a novice and unfortunately can't figure it out myself. I would really appreciate if people could point me on the right direction with this ...

I would really appreciate any help!

Many thanks, Dasha

share|improve this question
add comment

2 Answers

up vote 3 down vote accepted

first your form that calls the ajax must have the an action filed with the value of the ajax hook for example your ajax call is:

add_action('wp_ajax_show_all_tracks', 'show_all_tracks');

the your form action field must be:

<input type="hidden" name="action" value="show_all_tracks" />

thats for start' so as for adding tracks you need to add a function to add javascript to the track edit form or add it to your code by changing

function add_post_enctype() {
    echo '
    <script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("#post").attr("enctype", "multipart/form-data");
        jQuery("#post").attr("encoding", "multipart/form-data");
    });
    </script>';
}

to

function add_post_enctype() {
    echo '
    <script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("#post").attr("enctype", "multipart/form-data");
        jQuery("#post").attr("encoding", "multipart/form-data");
        jQuery("#Add Track").click(function() {
            jQuery.ajax({
                type: "post",url: "<?php echo admin_url('admin-ajax.php'); ?>",
                data: { 
                    action: 'add_track',
                    ad_type: jQuery( '#tr_name' ).val() ,
                    ad_type: jQuery( '#tr_time' ).val() ,
                    ad_type: jQuery( '#tr_lyrics' ).val() ,
                    _ajax_nonce: jQuery( '#nonce' ).val() , 
                },
                success: function(html){ //so, if data is retrieved, store it in html
                    if (html.indexOf('ok') > -1 || html.indexOf('true') > -1) {
                        alert('track added');
                    }

                }
            });
            return false;
        });

    });
    </script>';}

the create an ajax do action hook

add_action('wp_ajax_add_track', 'add_track');

then the function itself to add the tracks:

function add_track(){
check_ajax_referer( "add_track" );
/* save to the custom field array that holds the track data.
and return OK as string  i know you can manage that*/
}

and last is change your form from:

<form id="add-track-form" name="add-track-form" action="" method="post">
<input type="hidden" name="mytheme_meta_box_nonce" value="'<?php wp_create_nonce(basename(__FILE__)) ?>'" />
<?php foreach($this->_meta_box['form'] as $el){
    $this->display_field($el);
    } ?>
<input type="submit" id="add-track" name="add-track" value="Add Track" />

to

 <form id="add-track-form" name="add-track-form" action="" method="post">
<input type="hidden" name="nonce" id="nonce" value="<?php echo wp_create_nonce( 'add_track' ); ?>" />
    <?php foreach($this->_meta_box['form'] as $el){
        $this->display_field($el);
        } ?>
    <input type="submit" id="add-track" name="add-track" value="Add Track" />
</form>

hope this helps and its really more of a draft but it should get you in the right direction.

ohad.

share|improve this answer
    
I think this just made me have an AHA moment with the admin-ajax.php usage. By adding your custom action like this, and sending it with ajax as you have, the function you created to do what you want to do, is inturn added as if it were a function that existed in admin-ajax.php??? Is that sort of how you might say it? It makes a whole lot more sense to me now, I've used admin ajax before but never really got my head wrapped around how to use it with custom stuff. –  jaredwilli Jan 31 '11 at 16:30
    
Well yah that is the beauty of it all –  Bainternet Jan 31 '11 at 16:33
add comment

I think you have widgets and custom posts confused a little bit. The WP_Widget class is used to build configurable multi-instance widgets that can be used in your site theme. My recommendation for that one question was to use the widget framework as inspiration to create a similar (but completely separate) class for creating multi-instance meta boxes on the post edit screen. I discuss the functionality a bit more in a related Trac ticket (feature request).

After reading your question, here's what I gather:

  • You have a custom post type for CDs
  • Each CD can have multiple tracks
  • You want the ability to add tracks one-at-a-time through a custom edit form
  • You want to add tracks via AJAX (after hitting the "Add track" button, the track information is automatically added to the CD and you can add another track)
  • You would like the ability to dynamically drag-and-drop tracks into a different order

While this sounds like a very complex system at a first glance, it's actually not too complicated. It's just comprised of several different elements, and the complexity lies in getting them to work together.

Custom Post Type

First you'll need a custom post type: CDs. It sounds like you already have this set up, great start!

Custom Meta Fields

You'll also need to create several custom meta fields for your custom post type to hold your track details. They should probably take the form of track_X where X is the track number. As a start, you can set these manually: track_1, track_2, etc.

You'll also need another custom meta field called track-order. This will be an array that defines the order in which the tracks are displayed. For example, if track-order were [1, 3, 2], you would display track_1 then track_3, then track_2.

That, by itself, is the very minimum you'll need. If you set it all up, you can add things manually by defining each track and then explicitly setting the order of the tracks. I'd actually suggest starting there and making sure you can get the system to work the way you want and display properly first. Adding AJAX controls to the interface and a drag-and-drop UI is all presentational - i.e. it doesn't affect how the back end of the system works, just how you interact with the data.

AJAX the Interface

Once you've got your custom fields in place, you'll create an AJAX-powered meta box to dynamically add track_X custom meta to your post. This will allow you to add just one track or 100 tracks to each CD without having to pre-define a number of tracks.

Sortable List

Then you'll need to use jQuery or another JavaScript library to enable a Sortable interface for your list of tracks. This will be tied in to your AJAX system and will dynamically update the data stored in track-order so that things display properly.

The last two parts (AJAX and jQuery) aren't WordPress-specific, which is why I didn't go into too much detail. So to get you started, take a look at adding custom meta fields and custom meta boxes for your custom post type. That should be enough to get you started.

share|improve this answer
    
thanks a lot! I'm stuck with AJAXifying the meta boxes. I'll try to look and ask around. Hope you won't mind if I use your breakdown points of what I'm trying to do, they are much clearer than mine... –  dashaluna Nov 3 '10 at 14:28
    
Basically, you're going to need to add some JavaScript code to intercept clicks on the "Add track" button. You can submit the update directly to admin-ajax.php to save the data. Then you'll use a JavaScript callback to dynamically add the new element in the UI. Adding AJAX to a meta box is similar to adding AJAX to a plug-in admin UI. There are some great tutorials referenced in the Codex. –  EAMann Nov 3 '10 at 15:51
    
I'm stuck with adding "Add track" form to the meta box. All the meta boxes and all other info that you specify for a post appear in the main form element: <form id="post" method="post" action="post.php" name="post" enctype="multipart/form-data"> But I can't have a <form> element within anoter <form> element. I'm sooo confused now how can I add "Add Track" from to a meta box :S –  dashaluna Nov 4 '10 at 17:31
    
Dasha, post your code in a pastebin so we can see what you're doing and offer suggestions. –  EAMann Nov 4 '10 at 17:32
    
.. posted it <a href="wordpress.pastebin.com/npJrYaWZ">here</a>; I've got to adding 15 static fields in a meta box by using "fields" array (in main $meta_boxes array). Then I tried to add a form for AJAX by using "form" array (in main $meta_boxes array) and got stack with it. I've used <a href="deluxeblogtips.com/2010/04/… tutorial for adding a meta box</a> as I found it to be clear. –  dashaluna Nov 5 '10 at 12:21
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.