jQuery Mobileでポップアップ(ダイアログ)表示

スポンサーリンク

この度、jQuery Mobileを使ったウェブシステムを開発することになりまして...

そこでちょっと悩んだことがあったので、私の他にも同じようなことで困っている人がいたとしたら参考になれば良いなぁということで、ちょっと書き留めておきます。

*こんなことで困っている人、いるかなぁ...私は困りましたが...(汗)

入力チェックでエラーがあったらポップアップ表示

ウェブシステムを作る際に、必ず必要になるのが情報の登録画面ですよね。

様々な情報を入力し、それをデータベースに登録したり、登録された内容をメールで送ったり...ウェブシステムでは、何かと登録画面が必要になります。

画面から情報を入力したら、内容が正しいかチェックしたいというのは誰しもが思うところ。

エラーがあれば、それを入力した人に気づいてもらいたい。

そうだ、そういう時はポップアップ画面(ダイアログ)を表示して気づいてもらうようにしよう!

jQuery MobileにはPopupウィジェットがあるじゃないか!

「jQuery Mobile ポップアップ」でGoogle先生に聞いてみたらたくさんの情報を提供してくれました。

「おう、なんとPopupウィジットがあるじゃないか!素晴らしい!」

で、早速Google先生に教えてもらったページを拝見。

こんな感じでポップアップ画面を表示できます。

 

「????これって確かにポップアップ画面は表示されるけど...私がやりたいことと違う!」

jQuery MobileのPopupウィジットはクリックで表示

上記の例は、「リンクをクリックするとリンク先の情報をポップアップ画面で表示する」というものなんですね。

これって、注意事項とか表示するには向いてるけど、私がやりたいのは、入力チェックでエラーがあった時に、「エラーだよ!」って入力した人にポップアップ画面で知らせたいのです。

流れとしては、

1.登録画面から情報を入力して、2.「登録」ボタンを押した後に、3.入力された内容をjavascriptでチェックして、4.もしエラーがあったらポップアップ画面を表示する

ということなのです。

つまり、入力チェックを行っているJavascriptからポップアップ画面を表示させたいのです。

リンクをクリックして...とは違うんだよねぇ。

Popup用のページを追加して

ということで、同じようなことで悩んでいる方は、以下の方法で解決できますよ!

*間違っている場合はご指摘くださいね

考え方としては、

1.Javascriptでポップアップ用のページを追加(append)する

2.上記1で追加したページに切り替える

ということなんです。

では、実際のコードサンプルを書いておきます。

 

(注) 同じID名が既にある場合を考慮して一応removeしてます
(1) ここで$MSGの内容をappendします。*data-role=”popup”だと平面的な画面が、data-role=”dialog”だとポップアップされた画面が表示されます
(2) ここで、(1)で追加したページに切り替えます。切り替えたページはダイアログ(data-role=”dialog”)なので、ページを切り替えるとポップアップ(ダイアログ表示)されるというわけです。

 

わかってしまえば「なるほど...」なのですが...

誰かのお役に立てれば幸いです。

ご注意:ダイアログウィジェットはバージョン1.4では非推奨になっています。今後はポップアップウィジェットを使ってダイアログを実装することが推奨されています。

この記事が気に入ったら
いいね ! してね

Twitter でzooを

スポンサーリンク

新しい出会いを、心からお待ちしております

運営管理者の遠藤浩明です

 

今ではすっかり身近になったコンピュータシステム。

パソコンやスマートホン、タブレットがないと、仕事もプライベートも何かと不自由な時代です。

しかし、アプリやシステムの使い方は知っていても、作ることについては多くの方がご存じないのが現実です。

「こんなアプリを作りたい!」「こんなシステムがあったら便利なのに...」

そんなことを少しでも考えたのなら、今が行動するタイミングです。

まずは、気軽に問い合わせてみてください。

新しい出会いを、心からお待ちしております。

 

ちょっと連絡してみる

コメントを残す

*