前提・実現したいこと
WordPressウィジェットにメディアアップローダを実装しているのですが、jQueryで画像URLを取得してそれをinput要素に追加する時にinput要素がアクティブな状態になりません。これをアクティブにするにはどうすればいいでしょうか?
お知恵をお借りできれば幸いです。
発生している問題・エラーメッセージ
こちらが問題の動作です。(画像クリックで動作を確認できます)
理想は画像が選択された時に右下のボタンが「保存」になっていることです。
該当のソースコード
コードはこちらのサイトにあるものを使っています。
以下のコードの$button.siblings('input').val(attachment.url);
の部分が画像URLを取得してinput要素に入力しているのですが、ただ文字列を渡しているだけなので、input要素がアクティブにならず、結果的に保存ボタンが動作していません。
JavaScript
1jQuery(document).ready(function ($) { 2 3 $(document).on("click", ".upload_image_button", function (e) { 4 e.preventDefault(); 5 var $button = $(this); 6 7 8 // Create the media frame. 9 var file_frame = wp.media.frames.file_frame = wp.media({ 10 title: 'Select or upload image', 11 library: { // remove these to show all 12 type: 'image' // specific mime 13 }, 14 button: { 15 text: 'Select' 16 }, 17 multiple: false // Set to true to allow multiple files to be selected 18 }); 19 20 // When an image is selected, run a callback. 21 file_frame.on('select', function () { 22 // We set multiple to false so only get one image from the uploader 23 24 var attachment = file_frame.state().get('selection').first().toJSON(); 25 26 $button.siblings('input').val(attachment.url); 27 28 }); 29 30 // Finally, open the modal 31 file_frame.open(); 32 }); 33});
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/25 05:25
2018/03/25 05:30
2018/03/25 07:23