前提・実現したいこと
WordPressウィジェットにメディアアップローダを実装しているのですが、jQueryで画像URLを取得してそれをinput要素に追加する時にinput要素がアクティブな状態になりません。これをアクティブにするにはどうすればいいでしょうか？
お知恵をお借りできれば幸いです。
発生している問題・エラーメッセージ
こちらが問題の動作です。（画像クリックで動作を確認できます）
理想は画像が選択された時に右下のボタンが「保存」になっていることです。
該当のソースコード
コードはこちらのサイトにあるものを使っています。
以下のコードの$button.siblings('input').val(attachment.url);の部分が画像URLを取得してinput要素に入力しているのですが、ただ文字列を渡しているだけなので、input要素がアクティブにならず、結果的に保存ボタンが動作していません。
jQuery(document).ready(function ($) {
$(document).on("click", ".upload_image_button", function (e) {
e.preventDefault();
var $button = $(this);
// Create the media frame.
var file_frame = wp.media.frames.file_frame = wp.media({
title: 'Select or upload image',
library: { // remove these to show all
type: 'image' // specific mime
},
button: {
text: 'Select'
},
multiple: false // Set to true to allow multiple files to be selected
});
// When an image is selected, run a callback.
file_frame.on('select', function () {
// We set multiple to false so only get one image from the uploader
var attachment = file_frame.state().get('selection').first().toJSON();
$button.siblings('input').val(attachment.url);
});
// Finally, open the modal
file_frame.open();
});
});-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+1
【jQueryで要素にフォーカスを当てる：focus() | UX MILK】
http://uxmilk.jp/45052
【.focus() | jQuery API Documentation】
https://api.jquery.com/focus/
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
check解決した方法
0
change()を使うことで解決しました。
$button.siblings('input').val(attachment.url).change();
参考：jQueryのval()で値を変更してもchangeイベントは発火しない
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.19%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2018/03/25 14:25
focusでは、input要素のvalueが変わったと保存ボタン側で認識しないようで相変わらず「保存」と表示されません。
言語化が難しいのですが、文字を入力するようにvalueが変わるというか、input要素に画像URLが追加されたタイミングで保存ボタンが押せるようにするためにはどうすればいいのでしょうか？
デモ画像のように、画像をアップロード（選択）したタイミングでは保存できず、URLをすべてコピーして貼り付けたり、一文字でも変更されると保存できるようになります。
2018/03/25 14:30
特に何もスクリプトが動いていないのであれば保存ボタンを書き換えればよいだけでは。
2018/03/25 16:23
今回の件は自己解決しましたが、今後気をつけます！