jquery on wordpress meta box input fields

Question

i have a bunch of meta boxes in my wordpress theme. on the click of a button w/ class="meta_upload_button" i want to launch the default media uploader. thanks to some online tutorials I have that part mostly working. i am trying to adapt the code to work for multiple input/button pairs.

<input type="text" />
<button type="button" class="meta_upload_button">Upload</button>

ids, names and values are all dynamically generated by the WPAlchemy MetaBox class.

the problem it that my code is changing the value on the last text input field no matter which button i click on, which makes me think it is a jquery selection problem. however i used my fancy color debugging method and applied a border color to the input box that precedes the button clicked. that works just fine. but in the send_to_editor function the same declaration doesn't select the right input.

var ww = $('#post_id_reference').text();

$('.meta_upload_button').each(function() {

 var button = $(this);

 $(this).click(function() {

  //test- result= changes border color on correct input
        button.prev('input').css("border","3px solid red");


  window.send_to_editor=window.send_to_editor_clone;
  tb_show('', 'media-upload.php?post_id=' + ww + '&type=image&TB_iframe=true');
  return false;
 });

  //my version of the send_to_editor
 window.send_to_editor_clone = function(html){
        //grabs the URL of the selected image
  imgurl = $('img',html).attr('src');

  forminput = button.prev('input');

        //changes the value on the LAST input 
  forminput.val(imgurl);
  tb_remove();
 }

}); //end each

Answer 1

OK, I think I see what the problem is.

$('.meta_upload_button').each

runs the body of the function once for each button. Every time it runs, the variable

window.send_to_editor_clone

gets set to some function which is supposed to populate the text field. But, there is only one window, so window.send_to_editor is just going to be equal to the last value it was assigned. In this case, it's the function where button has the last value it's going to have - i.e., it's the last button, which is the behavior you described.

How do you fix it? I'm not really sure. Are you stuck with only being able to access this thing through window.send_to_editor(html)? Ideally you would only define that function once, but have the particular button passed into it as a parameter.

Googling around for send_to_editor doesn't tell me much about how to deal with this. You might be able to do it as follows:

var ww = $('#post_id_reference').text();

var which_button;

$('.meta_upload_button').each(function() {

 var button = $(this);

 $(this).click(function() {
   which_button = button;    


  tb_show('', 'media-upload.php?post_id=' + ww + '&type=image&TB_iframe=true');
  return false;
 });
}); //end each

//my version of the send_to_editor
window.send_to_editor_clone = function(html){
  //grabs the URL of the selected image
  imgurl = $('img',html).attr('src');

  forminput = which_button.prev('input');

  //changes the value on the LAST input 
  forminput.val(imgurl);
  tb_remove();
}
window.send_to_editor=window.send_to_editor_clone;    

This would only work if window.send_to_editor gets called after the click handler. Otherwise, it gets much nastier to deal with. It would be possible with a setTimeOut, I think, but at that point it becomes a concurrency thing, which is harder to think about.

Answer 2

@forefinger - thank you so much! the problem w/ my use of each makes sense now and i would never have seen that. i also would have sworn that i'd tried something similar to which_button, but i woke up today, saw your answer- and boom it worked!

var ww = $('input[name=post_ID]').val();

$('.meta_upload_button').each(function() {

    var button = $(this);

    $(this).click(function() {
        which_button = button;
        window.send_to_editor=window.send_to_editor_clone;
        tb_show('', 'media-upload.php?post_id=' + ww + '&type=image&TB_iframe=true');
        return false;
    });


    window.send_to_editor_clone = function(html){
        imgurl = $('img',html).attr('src');
        forminput = which_button.prev('input');
        forminput.val(imgurl);

        tb_remove();
    }

}); //end each

send_to_editor is another of those wordpress functions that barely has any documentation. but above, i need to need to keep the cloned send_to_editor in the click function so that it is only called on clicking buttons in my metaboxes and does not interfere w/ the media buttons on the regular post.