Media Uploader inserts image URL into last form element WordPress
- SOLVED
I am using the built-in WordPress Media Uploader with a SlideShow plugin I'm working on, and it more or less works fine, except for one small detail.
On the main plugin page, I'm using a foreach loop to generate an input form field for each image in my slide show, and it looks about like this (unnecessary code removed):
<?php
foreach( $wpdb->get_results("SELECT id FROM " . $slides_table_name . " WHERE slide_parent=" . $id . " ORDER BY id;") as $key => $object)
{
$slide_id = $object->id;
$parent = $object->slide_parent;
$image = $object->image
?>
<td>
<input id="upload_image_<?php echo $slide_id; ?>" type="text" size="40" name="<?php echo $base_setting . '_' . $slide_id; ?>" value="<?php echo get_option($base_setting . '_' . $slide_id); ?>" />
</td>
<td>
<input id="upload_image_button_<?php echo $slide_id; ?>" value="Upload New Image" type="button" />
</td>
</tr>
<?php
}
?>
Once generated, the form fields look like this:
<td>
<input id="upload_image_2" type="text" size="40" name="slide_2" value="" />
</td>
<td>
<input id="upload_image_button_2" value="Upload New Image" type="button" />
</td>
<td>
<input id="upload_image_3" type="text" size="40" name="slide_3" value="" />
</td>
<td>
<input id="upload_image_button_3" value="Upload New Image" type="button" />
</td>
<td>
<input id="upload_image_4" type="text" size="40" name="slide_4" value="" />
</td>
<td>
<input id="upload_image_button_4" value="Upload New Image" type="button" />
</td>
Notice that the ID of each form field is unique.
Next, is the jQuery that hooks each input field (upload_image_button_ID) to the Media Uploader. It is also in a foreach loop like this:
foreach( $wpdb->get_results("SELECT id FROM " . $slides_table_name . ";") as $key => $object)
{
$slide_id = $object->id;
?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#upload_image_button_<?php echo $slide_id; ?>').click(function() {
formfield = jQuery('#upload_image_<?php echo $slide_id; ?>');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#upload_image_<?php echo $slide_id; ?>').val(imgurl);
tb_remove();
}
});
</script>
<?php
}
When generated, the final jQuery looks like this:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#upload_image_button_2').click(function() {
formfield = jQuery('#upload_image_2');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#upload_image_2').val(imgurl);
tb_remove();
}
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#upload_image_button_3').click(function() {
formfield = jQuery('#upload_image_3');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#upload_image_3').val(imgurl);
tb_remove();
}
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#upload_image_button_4').click(function() {
formfield = jQuery('#upload_image_4');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#upload_image_4').val(imgurl);
tb_remove();
}
});
</script>
Notice that each block of jQuery code is directly tied to a specific form element ID.
As I said, everything works great, except for one small detail. When you click "Insert into Post" after selecting an image, the image url gets placed into the very last form element.
So, for example, if I try to insert an image with the Upload New Image button on the first form field (with ID #upload_image_button_2), the URL should get sent to #upload_image_2, but it instead, it gets sent to #upload_image_4.
And it doesn't matter how many form fields I have. If I have ten unique input fields, no matter which I try to insert an image into, the URL will always get sent to the last one.
Ideas?
Answers (1)
John Cotton answers:
It because the window.send_to_editor function gets redefine each time in the loop.
You should only have one set of this code:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#upload_image_button_4').click(function() {
formfield = jQuery('#upload_image_4');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#upload_image_4').val(imgurl);
tb_remove();
}
});
</script>
and use ids/replace to work with the specifc input/button
Pippin Williamson comments:
That almost works, except I'm not sure how to structure the foreach loops for the jQuery now.
I've set up a foreach loop to output the IDs of the buttons inside of the window.send_to_editor function, but now it sends to all of them.
John Cotton comments:
Assuming you've added a class to your input text boxes, then something like:
jQuery(document).ready(function() {
var txtBox_id = '';
jQuery('.upload_image_button').click(function() {
txtBox_id = '#'+this.attr("id").replace('_button', '');
formfield = jQuery(txtBox_id);
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery(txtBox_id).val(imgurl);
tb_remove();
}
});
That isn't perfect as it uses an extra variable, but you get the idea...
JC
John Cotton comments:
Sorry, that line should read:
txtBox_id = '#'+jQuery(this).attr('id').replace('_button', '');
Pippin Williamson comments:
I'm not sure I understand this line entirely:
txtBox_id = '#'+this.attr("id").replace('_button', '');
Why the .replace? And how is it supposed to get the unique ID number?
Pippin Williamson comments:
Ah, excellent!
It works perfect now! Though still not sure I understand that line.