Manipulating data in WordPress Thickbox with jQuery

Question

I need to be able to have a modal pop up to make quick edits to data in the WordPress back end. Using thickbox I have the modal working, and to create a new entry works just fine. I want to use the same modal for editing and just use jQuery to change some of the data.

This is the code I use for my edit link

<a href="#TB_inline?width=600&height=175&inlineId=addNewPoll" data-id="<?php echo $poll->poll_id; ?>" data-question="<?php echo $poll->question; ?>" class="editPoll thickbox">Edit</a>

This is the code for the thickbox

    <div id="addNewPoll" style="display:none;">
        <h3 id="newPollHeader">Add A New Poll</h3>
        <form method="post" action="<?php echo admin_url('plugins.php?page=managemkpolls&noheader=true'); ?>">
            <p><input type="text" name="question" id="pollQuestion" placeholder="Question" size="60"></p>
            <p><input type="submit" value="Save Poll" class="button button-primary"></p>
            <input type="hidden" name="action" value="addPoll">
            <input type="hidden" name="id" value="" id="pollId">
        </form>
    </div>

This is my editPolls triggered JavaScript that is added with admin_print_footer_scripts

    <script type="text/javascript">
        jQuery(document).on("click", ".editPoll", function () {
            var id = jQuery(this).data('id');
            var question = jQuery(this).data('question');
            console.log(id + ' ' + question);
            jQuery("#pollId").val( id );
            jQuery("#pollQuestion").val( question );
            jQuery("#newPollHeader").html( 'Edit Your Poll' );
        });
    </script>

Everything in the source looks like it should. The link is good, the Javascript is added. When I click the link the modal opens, but it's just the standard add form. If I remove the thickbox class from the edit link, the console spits out the correct information.

The problem only happens when having thickbox with the editPoll class together. thickbox seems to kill any other script from running. I've tried changing the order of the classes to see if that fixes the problem, but it's a no-go.

Answer 1

Thanks to a comment above I went the Jquery UI route, made things easier. This is the updated code I used.

First I had to setup an admin_enqueue_scripts function:

add_action('admin_enqueue_scripts','loadScripts');

This is that function:

function loadScripts()
{
    wp_enqueue_style("jquery-ui-css", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.min.css");
    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-dialog');
}

My link changed to this:

<a data-id="<?php echo $poll->poll_id; ?>" data-question="<?php echo $poll->question; ?>" class="editPoll">

The modal code only removed the style

    <div id="addNewPoll">
        <h3 id="newPollHeader">Add A New Poll</h3>
        <form method="post" action="<?php echo admin_url('plugins.php?page=managemkpolls&noheader=true'); ?>">
            <p><input type="text" name="question" id="pollQuestion" placeholder="Question" size="60"></p>
            <p><input type="submit" value="Save Poll" class="button button-primary"></p>
            <input type="hidden" name="action" value="addPoll">
            <input type="hidden" name="id" value="" id="pollId">
        </form>
    </div>

And this is the new inline javascript:

    <script type="text/javascript">
        jQuery(function() {
            newPoll = jQuery( "#addNewPoll" ).dialog({
                autoOpen: false,
                height: 200,
                width: 600,
                modal: true,
            });

            jQuery(document).on("click", ".editPoll", function () {
                var id = jQuery(this).data('id');
                var question = jQuery(this).data('question');
                console.log(id + ' ' + question);
                jQuery("#pollId").val( id );
                jQuery("#pollQuestion").val( question );
                if(id){
                    jQuery("#newPollHeader").html( 'Edit Your Poll' );
                }
                newPoll.dialog( "open" );
            });
        });
    </script>

Now it works perfectly.