0

I have the following javascript which talks to about 6 elements. The first three open a thickbox for media upload and what not upon clicking on a specified button, the last three target the input element that the src of that media should dumped too.

The problem I am having is that if I click on button #upload-background-image-one and then find a media I want, click "send to post" it gets inserted into: #background-size-three which is the third input. It should be placed into: #background-size-one but its not. in fact any button that is clicked to open a thick box media uploader will put the contents of "Send to Post" into the third input box.

So How do I target the specific input for each thick box that can be opened? (Which I thought I already was)

Js:

( function($) {
    $(document).ready(function() {

        // Show WP Thickbox with image uploader.
        $('#upload-background-image-one').click(function() {
            formfield = $('#background-size-one').attr('name');
            tb_show('', 'media-upload.php?type=image&TB_iframe=true');
            return false;
        });

        // Take the selected image and insert only the src path into the text field.
        window.send_to_editor = function(html) {
            img_url = $('img', html).attr('src');
            $('#background-size-one').val(img_url);
            tb_remove();
        }

        // Show WP Thickbox with image uploader.
        $('#upload-background-image-two').click(function() {
            formfield = $('#background-size-two').attr('name');
            tb_show('', 'media-upload.php?type=image&TB_iframe=true');
            return false;
        });

        // Take the selected image and insert only the src path into the text field.
        window.send_to_editor = function(html) {
            img_url = $('img', html).attr('src');
            $('#background-size-two').val(img_url);
            tb_remove();
        }

        // Show WP Thickbox with image uploader.
        $('#upload-background-image-three').click(function() {
            formfield = $('#background-size-three').attr('name');
            tb_show('', 'media-upload.php?type=image&TB_iframe=true');
            return false;
        });

        // Take the selected image and insert only the src path into the text field.
        window.send_to_editor = function(html) {
            img_url = $('img', html).attr('src');
            $('#background-size-three').val(img_url);
            tb_remove();
        }
    });

})(jQuery);
3
  • You're setting or overwriting the lambda function attached to window.send_to_editor three times. The third time you're putting it in the element with an id of background-size-three, which if I read your question correctly is what's always happening. That's why it's always happening. I'm assuming you're calling window.send_to_editor somewhere else, maybe in tb_show()? Jan 14, 2015 at 0:13
  • I wouldn't know as tb_show() and tb_open() are apart of Wordpress. Do you know of any examples on how to achieve what I am trying to achieve? using Thick box in Wordpress
    – TheWebs
    Jan 14, 2015 at 0:17
  • Looks like you got it below, that answer looks like much cleaner js, good stuff. Jan 14, 2015 at 0:22

1 Answer 1

0

The correct way to do this is to:

    $('#upload-background-image-one').click(function() {
        formfield = $('#background-size-one').attr('name');
        tb_show('', 'media-upload.php?type=image&TB_iframe=true');

        // Take the selected image and insert only the src path into the text field.
        window.send_to_editor = function(html) {
            img_url = $('img', html).attr('src');
            $('#background-size-one').val(img_url);
            tb_remove();
        }

        return false;
    });

because when you click on a button you instantiate a call back function you can do everything in that function. Scope is then tied to that fucntion

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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