Open Modal Window on Admin Dashboard to Edit Custom Field

enter image description here

I am working on a site where HR employees are managing applicants for jobs. I’m currently trying to add a modal window on a custom admin dashboard that will let a user quickly change an applicant’s status.

The dashboard lists applicants by job title, with a few of the more important fields displayed (resume download, the date they applied, etc.):

Clicking on the “change” button below the applicant’s status would open a modal window where the manager could select and save a new value:

I’ve figured out how to pass the appropriate post’s WordPress ID into the modal window, but beyond that I’m a bit stuck.

My change button is calling Thickbox, just to make the rendering quicker:

<a href="#TB_inline?height=300&width=400&inlineId=modal" class="thickbox" id="changeStatus" target="_blank" data-id="<?php echo $app['ID']; ?>"><small>[Change]</small></a>

And I have the modal window and script to pass variables in the same applicants.php file:

<?php add_thickbox(); ?>
    <div id="modal" class="reveal-modal" style="display: none;">
        <div>
            <h1>Edit [Applicant Name] Status</h1>
            <p><?php the_title(); ?></p>

            <div class="fetched-data"></div>

            <span class="input-text-wrap">
                <label><input type="radio" id="currAppStatusYes" name="currAppStatusRadio" value="yes"> Yes</label>
                <label><input type="radio" id="currAppStatusNo" name="currAppStatusRadio" value="no"> No</label
                <label><input type="radio" id="currAppStatusMaybe" name="currAppStatusRadio" value="maybe"> Maybe</label>
            </span>
        </div>
    </div>

    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery('a#changeStatus').on('click', function(e) {

            // get the id of the current post and pass that to the modal window to find the correct fields for editing
                var rowid = jQuery(this).data('id');
                jQuery('.fetched-data').html(rowid);
            });
        });
     </script>

I think I need to use Ajax and possibly some other built in WordPress functions but this is a little over my head. Any suggestions are appreciated!

Read more here:: Open Modal Window on Admin Dashboard to Edit Custom Field

Leave a Reply

Your email address will not be published. Required fields are marked *