Somehow adding to "Insert Into URL" posts are contradicting each other

Question

I added a second upload image ( doc_thumb_box ). They both work perfectly independent of each other. But when the second one is added, the first one (doc_uri_box ) no longer pastes the value of the URL into the box. Instead both boxes, if there is any content in them, become blank.

Is there something obvious that is contradicting the other?

public static function doc_thumb_box() {
global $post;

$thumb = get_post_meta( $post->ID, 'upload_image', true );

function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_enqueue_script('my-upload');
}

function my_admin_styles() {
wp_enqueue_style('thickbox');
}

if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
add_action('admin_print_scripts', 'my_admin_scripts');
add_action('admin_print_styles', 'my_admin_styles');
}

echo 'Enter a URL or upload an image for the thumb.';
echo '<br />';
echo '<br />';
echo '<label for="upload_image">';
echo '<input id="upload_image" type="text" size="36" name="upload_image" value=" ' . $thumb . '" />';
echo '<input id="upload_image_button" type="button" value="Upload Thumb" />';


echo "<script type=\"text/javascript\">
jQuery(document).ready(function() {

jQuery('#upload_image_button').click(function() {
 formfield = jQuery('#upload_image').attr('name');
 tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
 return false;
});

window.send_to_editor = function(html) {
 imgurl = jQuery('img',html).attr('src');
 jQuery('#upload_image').val(imgurl);
 tb_remove();
}

});
</script>\r\n";

}

public static function doc_uri_box() {
    global $post;

    $uri = get_post_meta( $post->ID, 'wpa_upload_doc', true );
    echo "<style type=\"text/css\">
#edit-slug-box {
display: none;
}

</style>";
   echo '<p>Please provide the abosulte url of the file (including the <code>http://</code>):</p>';
    echo '<input type="text" id="wpa_upload_doc" name="wpa_upload_doc" value="' . $uri . '" size="25" style="width:85%" />';
    echo '<input class="button" id="upload_doc_button" type="button" value="Upload Publication" alt="Upload Publication" />';
    echo "<script type=\"text/javascript\">

jQuery(document).ready(function() {
jQuery('#upload_doc_button').click(function() {
    formfield = jQuery('#wpa_upload_doc').attr('name');     
    tb_show('Upload Publication', 'media-upload.php?TB_iframe=1&width=640&height=263');
    return false;
});

window.send_to_editor = function(html) {
    var docurl = jQuery(html).attr('href');
    jQuery('#wpa_upload_doc').val(docurl);
    tb_remove();
}
});
</script>\r\n";
}

UPDATE

For the doc_uri_box() method, I have found that the window.send_to_editor code block is never executed! Strange indeed..

Answer 1

So it turns out I had a few unecessary variables in here.

1. I didn't need to define formfield as a var because it's unused. I defined it twice.
2. Because there are two functions sharing common variables, it's best that I nest the window.send_to_editor within each of the click functions.

This is the final version of both the jQuery functions ( the source of the problem)

jQuery('#upload_doc_button').live('click', function() {

    window.send_to_editor = function(html) {
        var docurl = jQuery(html).attr('href');
      jQuery('#wpa_upload_doc').val(docurl);
        tb_remove();
    }

    tb_show('Upload Publication', 'media-upload.php?TB_iframe=1&width=640&height=263');
    return false;
}); 


jQuery('#upload_image_button').click(function() {

 window.send_to_editor = function(html) {
  imgurl = jQuery('img',html).attr('src');
  jQuery('#upload_image').val(imgurl);
  tb_remove();
 }

 tb_show('', 'media-upload.php?type=image&TB_iframe=true');
 return false;
});