Having trouble with jQuery variable scope in an image upload plugin

  • So I am building an image upload metabox that allows you to dynamically add image upload fields. When the code is static I can handcode the id of the textfield that houses the image url meta. Dynamically I need to use a variable that will be populated with that id based on which upload button you push.

    Everything works great so far in that I’m getting the correct ids and can alert them as a test. The problem is that the upload_id variable is not crossing into window.send_to_editor bit. I am guessing this may have something to do with scope and that part being part of some external wordpress code but really I have no idea.

    All I need is to get that variable to read across functions and this should work perfectly. I appreciate your help.

    <script>
jQuery(document).ready(function() {

var upload_id = '';

jQuery('.uploadbutton').click(function() {

	upload_id = $(this).prev().attr("id");

	window.send_to_editor = function(html) {
 		imgurl = jQuery('img',html).attr('src');
 		jQuery(upload_id).val(imgurl);
 		tb_remove();
	}

 tb_show('', 'media-upload.php?post_id=1&type=image&TB_iframe=true');
 return false;
});

});
</script>
Viewing 9 replies - 1 through 9 (of 9 total)

  • You’ve got to tell jQuery that it’s an id. If the id is “img1”, you’re currently telling jQuery to get jQuery(img1), but jQuery doesn’t know that img1 is an id and is instead looking for a jQuery term called img1 (which, of course, doesn’t exist).

    Instead, change upload_id = $(this).prev().attr("id"); to upload_id = '"#'+$(this).prev().attr("id")+'"';

    This way, your send_to_editor function like would read (to jQuery): jQuery("#img1").val(imgurl); (You might need to change your imgurl variable to imgurl = '"'+jQuery('img',html).attr('src')+'"')

    Let me know if that works.

    Thread Starter luetkemj

    (@luetkemj)

    No that didn’t work either.

    I did find this script on stackoverflow that does.

    However I’m running into another problem…
    I am dynamically adding form fields and if I add a new one and try to use the upload button it doesn’t work. If however I add a new field, save the post, and then use the upload button it works perfectly. Almost as though the new elements are not instantiating(?) themselves properly. This seems odd as the remove button works just fine without saving the post.

    I think you need to setup your jquery click function as a live function, so it will work with elements that been added to the DOM after the page has loaded, else it will only bind to elements available onload, if i’m not mistaken(i could be wrong, i know PHP better than JS / jQuery).

    I’d have tried something along these lines myself…

    jQuery(document).ready(function() {
	jQuery('.uploadbutton').live('click', function() {
		upload_id = $(this).prev().attr("id");
 		tb_show('', 'media-upload.php?post_id=0&type=image&TB_iframe=true');
 		return false;
	});
	window.send_to_editor = function(html) {
 		imgurl = jQuery('img',html).attr('src');
 		jQuery(upload_id).val(imgurl);
 		tb_remove();
	}
});

    You can read more about live events on the link below, which(if i’m not mistaken) you’ll need when working with elements you’re dynamically adding and/or removing from the page after load.

    https://api.jquery.com/live/

    I could be wrong of course, still wrapping my head around jQuery and JS scope(getting there, slowly but surely)..

    Hope that the above is helpful in some way… ??

    Thread Starter luetkemj

    (@luetkemj)

    You are awesome! Thank you so much! Such a simple fix (that I should have known). Really appreciate it!

    Happy to help.. ??

    is it possible to get the ID instead of the src? Need to be able to use the different thumbnail sizes.

    best, Dc.

    Hi, the code

    window.send_to_editor = function(html) {
 		imgurl = jQuery('img',html).attr('src');
 		jQuery(upload_id).val(imgurl);
 		tb_remove();
	}

    Works if I have in variabel
    html = <a href='...'><img src="..." /></a>

    but if I change the code to:

    window.send_to_editor = function(html) {
 		imgurl = jQuery('a',html).attr('href');
 		jQuery(upload_id).val(imgurl);
 		tb_remove();
	}

    with
    html = <a href='...'><img src="..." /></a>

    it will nothing return. Why?!?

    Can anybody help me?

    Habs gerade gefunden. Mega einfacher Mini Bug ??

    don’t know if you found the answer but i’ll post anyway.

    window.send_to_editor = function(html) {
 		imgurl = jQuery('a',html).attr('href');
 		jQuery(upload_id).val(imgurl);
 		tb_remove();
	}

    becomes

    window.send_to_editor = function(html) {
 		imgurl = jQuery(html).attr('href');
 		jQuery(upload_id).val(imgurl);
 		tb_remove();
	}

    and if you need it for the images also, your can do a jquery check on html to see if it has <img> tag or not and change the imgurl based on that

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Having trouble with jQuery variable scope in an image upload plugin’ is closed to new replies.