Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I generated a new MetaBox for all standard posts in WordPress 3.1. There I generate a input:text field with the ID _meta_fotos[pic], which should hould the image url generated by the standard media-uploader. I want to use the standard media-uploader from the standard post window. So I generated the following JavaScript code.

jQuery(document).ready(function() {
  jQuery('#_meta_fotos\\[pic\\]').focusin(function() {
    formfield = jQuery('#_meta_fotos\\[pic\\]').attr('name');
    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('#_meta_fotos\\[pic\\]').val(imgURL);
    tb_remove();
  }
});

On the first step all works fine. But I don't get the real image URL. All I get back is a URL to the correct uploads-path with a filename blank.gif.

I checked if the ThickBox is called by the focusin-function: It is alright.

I think the problem ist in the send_to_editor-function. It returns in html the code from the underlaying main-Page and not from the popup-window of the media-uploader/thickbox.

Can anyone help me, to find the mistake? Any help is aprreciated!

share|improve this question
    
What are you getting back from the send to editor function, have a look at what's returned before you do anything with it... eg. alert( html );. –  t31os Mar 5 '11 at 14:32
    
It's funny! If I alert html if see an empty alert-box. But if I use var iFrame = jQuery('#TB_iframeContent', html); var iFrameDoc = iFrame[0].contentWindow.document; and alert the iFrameDoc i get a html Object. –  Guru 2.0 Mar 5 '11 at 15:19
    
Posted an answer, hopefully you'll find the clues you need to solve the problem.. :) –  t31os Mar 5 '11 at 15:39
add comment

3 Answers

up vote 2 down vote accepted

I hate it to answer my own question. But after hours of searching and trying I found a solution that works. I offer this solution, because it can't be interesting for others having the same problem. And for discussion, if there is a better way to get rid of the problem. Perhaps it is not very elegant, but it works ;-)

The peak is to change the click-event for the "Insert into Post"-Button in the ThickBox.

edit Because the code worked only for ONE image in the library I had cto chnge the line in the click-function. Now it works with more then one picture

jQuery(document).ready(function() {
  //change click event for insert into post
  (function(){ 
var tb_show_temp = window.tb_show; 
window.tb_show = function() { 
  tb_show_temp.apply(null, arguments); 
  var iframe = jQuery('#TB_iframeContent');
  iframe.load(function() {
    var iframeDoc = iframe[0].contentWindow.document;
    var iframeJQuery = iframe[0].contentWindow.jQuery;
    var buttonContainer = iframeJQuery('td.savesend');
    if (buttonContainer) {
      var btnSubmit = jQuery('input:submit', buttonContainer);
      iframeJQuery(btnSubmit).click(function(){
        fldID = jQuery(this).attr('id').replace('send', '').replace('[', '').replace(']', '');
        var imgurl = iframeJQuery('input[name="attachments\\['+fldID+'\\]\\[url\\]"]').val();
        jQuery('#_meta_fotos\\[pic\\]').val(imgurl);
        jQuery('#picPreview').attr('src', imgurl);
        tb_remove();
      });
    }
  });
   }
  })()
//open uploader
jQuery('#_meta_fotos\\[pic\\]').focusin(function() {
formfield = jQuery('#_meta_fotos\\[pic\\]').attr('name');
tb_show('Use pictures', 'media-upload.php?type=image&tab=library&TB_iframe=1');
return false;
});
});
share|improve this answer
    
Thanks a million for this!!! I spent 2 days until i found this one, Thanks Guru 2.0!! –  Syed Absar Aug 22 '12 at 8:47
add comment

I did something similar for a theme settings page i helped someone with, it looked a little different to what you have, but i'm going to post the code so you can compare.

jQuery:
Literally just the applicable parts taken from a working script i've used.

jQuery(document).ready( function($) {
    $('img.font').click(function() {    
        form_field = $(this).next().next('input'); 
        tb_show('', 'media-upload.php?tab=type&from=t31os&post_id=0&TB_iframe=true');
        return false;
    })
    .hover(function() {
        $(this).css({'cursor':'pointer'});
    }); 

    window.send_to_editor = function(html) {
        media_url = $(html).attr('href');
        tb_remove();
        $(form_field).val(media_url);
    }
});

In my case i had an image that trigeered the upload window, and passed back the value when the user clicked the Insert into settings field button(see below).

You'll notice that firstly there's a post ID passed in the media upload request, you should need this in order to see an Insert into post button in the window. Secondly there's an additional request parameter from=t31os, this allows me to selectively change the Insert into Post text, like so..

add_filter( 'gettext', 'change_insert_into_post', null, 2 );
function change_insert_into_post( $translation, $original ) {
    if( !isset( $_REQUEST['from'] ) )
        return $translation;

    if( $_REQUEST['from'] == 't31os' && $original == 'Insert into Post' )
        return 'Insert into settings field';

    return $translation;
}

Hope that helps.

Follow-up from comments:
Here's some images of the provided code working inside my theme options page(the arrow is my image to trigger the uploader).

The field
The field.

The uploader window
The uploader window.

The result
The result.

You'll notice i didn't bother with the gettext filter, and that's simply because it's not integral to the code functionality(that's a personal touch and makes no difference here).

Have you correctly enqueued the necessary scripts? Namingly media-upload and thickbox, along with the thickbox stylesheet.

share|improve this answer
    
Thanks for help, but... after playing with your code, I always get for $(html).attr('href') an undefined. –  Guru 2.0 Mar 5 '11 at 16:16
    
What are you clicking in the media window, are you using the "Insert into Post"(Insert into settings field) button? I've just used the above posted code inside my current theme(it wasn't there, but i've worked it in for testing) and it works perfectly for me(so you must be doing something different?). –  t31os Mar 5 '11 at 16:41
    
In the library I'm using the "Insert into Post" button. But I think there is in WP3.1 a problem with the html-parameter. But I see the "Insert Into" Button always. The Bug from WP 3.0 is gone ;-) –  Guru 2.0 Mar 5 '11 at 16:51
    
I'm using 3.1 and testing the code, it works fine here, see screenshots added to answer. –  t31os Mar 5 '11 at 17:21
    
Thanks for really good help. I found another idea in your Code (spliting between insert in textarea and field with additional parameter). But overall it didn't work. –  Guru 2.0 Mar 5 '11 at 17:53
show 1 more comment

I'm getting a similar result as Guru2.0... undefined. When I replace the media_url variable with "test"... it inserts "test" into the field value. But, no image url at all.

I thought it was a binding issue so I tried the jQuery live() function, but that was unsuccessful in the limited trial I used.

Would love for this to work!

~David

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.