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

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

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

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

Q&A

解決済

1回答

2410閲覧

検索ボタンをクリックしてもダイアログが消えないようにするには

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

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

0グッド

0クリップ

投稿2015/06/06 08:47

編集2015/06/06 08:48
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> (function($) { $.fn.ipop = function() { var $this = $(this); var wx, wy; // ウインドウの左上座標 var mx, my; // マウスの座標 // ウインドウの座標を画面中央にする。 wx = $(document).scrollLeft() + ($(window).width() - $(this).outerWidth()) / 2; if (wx < 0) wx = 0; wy = $(document).scrollTop() + ($(window).height() - $(this).outerHeight()) / 2; if (wy < 0) wy = 0; // ポップアップウインドウを表示する。 $this.css('top', wy).css('left', wx).fadeIn(100); // 閉じるボタンを押したとき $this.find('.ipop_close').click(function(){ $this.fadeOut(100);}); // タイトルバーをドラッグしたとき $this.find('.ipop_title').mousedown(function(e) { mx = e.pageX; my = e.pageY; $(document).mousemove(mouseMove).mouseup(mouseUp); return false; }); function mouseMove(e) { wx += e.pageX - mx; wy += e.pageY - my; $this.css('top', wy).css('left', wx); mx = e.pageX; my = e.pageY; return false; } function mouseUp() { $(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp); } } })(jQuery); $(function() { $('#open1').click(function() { $("#mado1").ipop(); } ); $('#open2').click(function() { $("#mado2").ipop(); } ); }); </script> <style type="text/css"> .ipop_login { font-family: "Meiryo" !important; padding: 0; background-color: #fed; width: 282px; height: 140px; border: 1px solid #aaa; /* この3行は必須 */ position: absolute; display: none; z-index: 9999; } .ipop_serach { padding: 0; background-color: #fed; width: 320px; height: 400px; border: 1px solid #aaa; /* この3行は必須 */ position: absolute; display: none; z-index: 9999; } .ipop_title { font-family: "Meiryo" !important; font-size:20px; height: 25px; background-color: #fdc; cursor: move; } .ipop_close { cursor: pointer; float: right; }' </style> </head> <body> <input type="button" value="ログイン" id="open1"> <input type="button" value="検 索" id="open2"> <div class="ipop_login" id="mado1"> <div class="ipop_close">×</div> <div class="ipop_title">Login</div> <table border='1'> <tr width="282px"> <td>USER_ID</td><td><input type='text' style="width:170px;"></td> </tr> <tr width="282px"> <td>PASSWORD</td><td><input type='text' style="width:170px;"></td> </tr> </table> </div> <div class="ipop_serach" id="mado2"> <div class="ipop_close">×</div> <div class="ipop_title">検索</div> <?php echo "<form action='./test107.php' method='post'>"; echo"<input type='text' name='keyword' style='width:272px;'><input type='submit' value='検索'>"; echo "<form>"; $keyword = $_POST['keyword']; echo $keyword; ?> </div> </body>
</html>

今回は検索ボタンの方での質問でございます。
ログインはスルーしていただけら幸いでございます。

一番最初の検索ボタンをクリックしてダイアログを表示するまでは問題は
ないんですが、ダイアログが開いてキーワードを入れて横にある検索を
押すとダイアログが消えてしまいます。

一番最初のダイアログを検索を再度押してダイアログを開くと最初に入力した
キーワードの文字が表示されており、文字取得表示はできております。

ダイアログに表示されている検索を押してもダイアログが消えることなく
入力したキーワードが表示されているようにさせてたいのですが、どうすれば
できるのか教えて頂けないでしょうか?

予定ではheadにあるjQueryのソースをtest107.jsに保存を考えております。

<script type="text/javascript" src="./test107.js"></script>

※test107.jsはまだ作成しておりません。

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

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

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

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

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

ikuwow

2015/06/06 08:50

長いコードはMarkdownの```記法でシンタックスハイライトして見やすくしてもらえると助かります
退会済みユーザー

退会済みユーザー

2015/06/06 09:06

すいません。Markdownを調べてみましたが、書き方がよく分かりません。 下記のURLを載せましたのでそちらで見ていただきますでしょうか? http://low-cost-travel.lk6.co/test107.php
guest

回答1

0

ベストアンサー

お示しのスクリプトがtest107.phpとします。

<form>のactionで./test107.phpが指定されていますので 遷移先は同一スクリプトとなるかと思います。 URLをブラウザに入力して表示させた時と同じ動作となりますので 検索ダイヤログの検索ボタンをクリックしても、検索ダイヤログは 表示されないかと思います。

キーワードの有無によって制御したらいかがでしょうか。

lang

1 $(function() { 2 3 $('#open1').click(function() { 4 $("#mado1").ipop(); 5 } ); 6 7 $('#open2').click(function() { 8 $("#mado2").ipop(); 9 } ); 10<?php 11 if (isset($_POST['keyword'])) { // keywordがあれば表示 12 echo "$('#open2').click();"; 13 } 14?>

またはJavaScriptは

lang

1 $('#open2').click(function() { 2 $("#mado2").ipop(); 3 } ); 4 if ($('#kwd').text() != '') { 5 $('#open2').click(); 6 } 7

phpソースに少々手を加え

lang

1 echo '<div id="kwd">'.$keyword.'</div>';

JavaScriptを外部ファイルにする場合は後者のほうがいいかもです。
(keyword有無が判別できないため)

解決するためには色々な方法があるかと思いますのでどれが正解とかは無いかと存じます。
お好きな方法を考えるのもスキルアップになるかと思います。
頑張ってください。

投稿2015/06/06 09:36

packet1024

総合スコア342

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

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

退会済みユーザー

退会済みユーザー

2015/06/06 10:41

そうですね。おっしゃるとおりだと思います。 また、アドバイスのおかげでまたひとつ勧めました。 不快に感じたら申し訳ないのですが、若干反応が うん?と感じましたが希望通りの結果になりましたので WEB制作を続けながら少しずつ改善していこうと思います。 この度は本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問