Get selected image URL from wp.media.editor.attachment into text input fails. What am I doing wrong?
I have placed a media button as a post meta field to insert an image URL into a text field when Insert Into Page button is clicked. It works up to the point of opening the media repository window, selecting image and insert, however no value is passed to the input field.
Expected result
The result should be that the URL along with media ID are inserted as
https://avalon.com/dev/wp-content/uploads/2021/01/scp7147prko31.jpg|12
but no value is returned. I can enter a URL manually and the data is saved.
I have scanned my code thoroughly and tried numerous methods with the javascript where I figure is the source of the failure. The debug console indicates that there is a fault with an expected function named tabs
associated with the plugin classic editor but I cannot locate such. I even disabled the plugin and the failure persists.
I've stared down the code for now 4 hours and cannot define a solution, so I am seeking assistance to resolve.
Console Log
Uncaught TypeError: $(...).tabs is not a function
anonymous https://avalon.com/dev/wp-admin/post.php?post=2action=editclassic-editormessage=1:300
jQuery 2
mightThrow
process
post.php:300:21
The code
public static function mediabutton($fname, $value)
{
add_action('admin_enqueue_scripts', function() {
wp_enqueue_media();
});
$js = 'script
jQuery(function($)
{
if( $(.mb-insertimg).length 0 )
{
if( typeof wp !== undefined wp.media wp.media.editor ) {
$(.mb-insertimg).on(click, function(e) {
e.preventDefault();
wp.media.editor.send.attachment = function(props, attachment) {
$(#mb-socialimg).val(wp.media.attachment(attachment.id).get(url)+|+attachment.id);
};
wp.media.editor.open($(this));
return false;
});
}
}
$(a.clearit).on(click, function() {
$(#mb-socialimg).val();
});
});
/script';
$thumb= $imgUrl='';
if( !empty($value) )
{
if( strstr($value, '|') ) {
list($imgUrl, $imgId) = explode('|', $value);
$tid = wp_get_attachment_image_src($imgId, 'thumbnail');
$thumb = 'img src='.$tid[0].' /';
}else{
$imgUrl = $value;
$thumb = 'img src='.$value.' /';
}
}
$img = '
div class=mb-imginsert
spaninput type=text id=mb-socialimg name='.$fname.' value='.$imgUrl.' //span
spanbutton class=mb-insertimg buttonSelect Image/button/span
spana class=button clearit dashicons dashicons-no style=width: auto; href=javascript:;/a/span
span'.$thumb.'/span
/div
'.$js;
return $img;
}
Topic media-modal wp-editor jquery Wordpress
Category Web