質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

358閲覧

jQueryで取得したデータをアクティブな状態でinput要素に入力する方法について

chef

総合スコア15

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/03/24 17:56

編集2018/03/24 17:57

前提・実現したいこと

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});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

【jQueryで要素にフォーカスを当てる:focus() | UX MILK】
http://uxmilk.jp/45052

【.focus() | jQuery API Documentation】
https://api.jquery.com/focus/

投稿2018/03/25 02:41

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chef

2018/03/25 05:25

ご回答いただきありがとうございます! focusでは、input要素のvalueが変わったと保存ボタン側で認識しないようで相変わらず「保存」と表示されません。 言語化が難しいのですが、文字を入力するようにvalueが変わるというか、input要素に画像URLが追加されたタイミングで保存ボタンが押せるようにするためにはどうすればいいのでしょうか? デモ画像のように、画像をアップロード(選択)したタイミングでは保存できず、URLをすべてコピーして貼り付けたり、一文字でも変更されると保存できるようになります。
kei344

2018/03/25 05:30

保存ボタンの仕様もそこで走っているコードも掲載されていないため、「input要素がアクティブにならず」に対してのみの回答です。 特に何もスクリプトが動いていないのであれば保存ボタンを書き換えればよいだけでは。
chef

2018/03/25 07:23

確かにそうですね、質問がわかりづらくすみませんでした! 今回の件は自己解決しましたが、今後気をつけます!
guest

0

自己解決

change()を使うことで解決しました。
$button.siblings('input').val(attachment.url).change();
参考:jQueryのval()で値を変更してもchangeイベントは発火しない

投稿2018/03/25 07:25

chef

総合スコア15

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問