asked on

jquery this retain its previous value with the wordpress media library select

i have a button in my WordPress admin to add hotels images.
when it is clicked it display an upload image link and a hidden text field to take the selected image.
the id of each button is incremented, so on select i can populate the right fields.
when i click the button the media library does open and i can populate the right field, but only regarding the first selected button, since it retain the first id.
i realize it is a scope issue, but i cannot make it work.
the second one i click, is the correct is when on click, but after selection it is the first id. this is my code:

 var mediaUploader;
    $(document.body).on('click','.upload_hotel_image',function(e){
        var that = $(this);
        var thethisid = that[0].id.split('-')[1];

        console.log('outside id: ', thethisid);
    if (mediaUploader) {
  mediaUploader.open();
  return;
    }
    mediaUploader = wp.media.frames.file_frame = wp.media({
  title: 'Choose Image',
  button: {
  text: 'Choose Image'
    }, multiple: false });
    // When a file is selected, grab the URL and set it as the text field's value
mediaUploader.on('select', function() {
        var attachment = mediaUploader.state().get('selection').first().toJSON();
        console.log('inside id: ', thethisid);
});
    mediaUploader.open();
    return false;
    });

Open in new window

now, if i comment the return in the if statement, everything works, but then the media modal does't close. i believe it is a scope issue. i just need the same id in the select part as in the click part.

any suggestions?

Julian Hansen

What does your HTML look like.

derrida

ASKER

hey Julian
i have a button that on click append this markup for each hotel:

		var hotelitirator = <?php echo $hotelcount ?> + 1;
		//alert(hotelitirator);
		$(document.body).on('click', '#add-hotel' ,addAnHotel);
		function addAnHotel(){
			$('#hotelslist').append('<hr><p class="form-field pwrapper"><label for="_hotel_name">Hotel Name</label><input type="text" name="_hotel_name[]" value=""></p><p class="form-field pwrapper"><label for="_hotel_url">Hotel URL</label><input type="text" name="_hotel_url[]" value=""></p><p><input role="edit" id="upload_image_button-'+hotelitirator+'" type="button" class="button upload_hotel_image" value="Upload image"/><input id="h-image-'+hotelitirator+'" class="hotel_image-'+hotelitirator+'" type="text" name="hotel_attachment_path[]" value=""><img id="h-preview-'+hotelitirator+'" class="hotel-priview-'+hotelitirator+'" style="width:200px;border:5px solid #FFF" src=""></p><hr>');
			hotelitirator++;
			return false;
		}

Open in new window

i have the same markup when displaying existing hotels. this is why i start with hotelcount + 1.
by the way, if i eneter everything manually, all works, i mean saving so the database and displaying from there. but i need to integrate the wordpress media library. so i added to each append the button with a hidden text field ( right now not hidden) and a preview.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

derrida

ASKER

so as always it works, and i really appriciate the help and details. one question though, where are the buttons to give you the credits?

derrida

ASKER

ok found the button, which should not be an issue to find, may i say.
in any case, great help from Julian

Julian Hansen

Thank you and you are welcome.

PS The issues of the interface have been noted and they are being addressed.