[wp-hackers] Running jQuery Twice breaks Media Uploader

[David Law]

Have added two image based features to a theme that add a custom meta
box each to posts and pages, adds an uploads/selects an image from the
WordPress core media uploader/viewer. Two new image uploaders.

Both the uploaders work as expected, but having both features turned
on at the same time breaks the WordPress media viewer associated with
the post form (the add an image, add media). Using the Add an Image
button for example will allow uploading a new image or allow selecting
an image from the media viewer, but when clicking the Insert Into Post
button the pop up window becomes a white box with the X in the right
corner and Add an Image on the right. It's not inserting the image
code into the post or closing the pop up window as it should.

Figured it's the javascript, but haven't worked out how to fix it. I
think it's because the javascript is loaded twice on the page.

Both features use this javascript code (loaded twice):

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

var header_clicked = "false";

jQuery('#<?php echo $name; ?>_button').click(function() {
jQuery('html').addClass('<?php echo $name; ?>');
formfield = jQuery('#<?php echo $name; ?>').attr('name');
tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
header_clicked = "true";
return false;
});

// user inserts file into post. only run custom if user started
process using the above process
// window.send_to_editor(html) is how wp would normally handle the
received data

window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function(html){

if (header_clicked == "true") {
fileurl1 = jQuery('img',html).attr('src');
jQuery('#<?php echo $name; ?>').val(fileurl1);
tb_remove();
header_clicked = "false";
jQuery('html').removeClass('<?php echo $name; ?>');
} else {
window.original_send_to_editor(html);
}
};

});
</script>

Where $name is from the custom fields ($name is unique for each
uploader : thumb and photothumb).

When I delete one of the javascript instances the core media uploader
works as expected, but the uploader for one the feature stops working
(upload button does nothing). Confirms it's the double use of the
javascript breaking the core media uploader.

Has anyone used this sort of javascript code twice on a page and got
it working or know another way of using the WordPress core media
uploader (if there's another way can use the other way for one of the
uploaders)?

Funny thing is I rarely use the WordPress image uploader, don't like
the formatting of the images, I always upload via FTP and use custom
code. I'd uploaded the theme to about 40 of my sites before
discovering the issue, fortunatly didn't release it to theme users
otherwise I'd be getting hundreds of complaints!

David
-- 
http://www.stallion-theme.com/ Stallion WordPress SEO Theme
http://www.stallion-theme.com/stallion-wordpress-seo-plugin Stallion
WordPress SEO Plugin