- ベストアンサー
指定されるdiv の部分の再読み込み処理について
javascript についてあまりわからないですが、javascript で以下のようなことをしたいですが、よくやり方がわかないので、わかっている方は教えていただきたいです。 <div id="sample"> この部分には、DBからデータを取り出す処理が入っているとする </div> form でsubmitをすると、id が sampleのところの処理を更新してくれる ようなjavascript はどうやって実現しますか？ よろしくお願いします。
- ikutame
- お礼率14% (13/90)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
超適当に書いて見た。適切に直してね <script> function Getdata() { var xmlHttp = (window.ActiveXObject)?new ActiveXObject("Msxml2.XMLHTTP"):new XMLHttpRequest(); xmlHttp.open("POST","DB_Access.php",true); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); var Querydata="prm1=val1&prm2=val2&prm3=val3"; //<=から取ればよい。 xmlHttp.send("Querydata"); xmlHttp.onreadystatechange = function(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { document.getElementById("sample").innerHTML=xmlHttp.responseText; } }; } </script> <form action="#"> ------ <input type="submit" onclick="Getdata();return false;"> </form>
その他の回答 (2)
- taporu
- ベストアンサー率44% (46/104)
Ajaxは途中まで、javascriptと同じの処理をします。 例： <html> <head> <script type="text/javascript"> <!-- function DBdata() { //実行する処理 } //--> </script> </head> <body> <input type="bottom" value="クリック" onclick="DBdata();"> <div id="sample"></div> </body> </html> こんな感じでいいと思います
- yyr446
- ベストアンサー率65% (870/1330)
これはAJAXというやつですね。 javascriptで直接DBからデータを取り出すような事は普通は しません。サーバーサイドのプログラムを使います。 javascriptは、フォームに入力されたデータを、非同期通信リクエストでサーバーサイドのプログラムにGET又はPOSTして、レスポンスのDOM要素を<div>の要素にセットするという仕事をさせます。 サーバーサイドのプログラムは、送信されたデータを基にDBアクセスして結果をXHTMLで出力します。 ※AJAXを検索すれば具体的な方法が見つかります。
関連するQ&A
- javascriptで指定するdivを読み込み
初歩的な質問ですみません。 どなたか詳しい方教えてください。 同一ページ内で、指定したdivの内容を読み込みしたいのですが javascriptで以下のことは可能でしょうか？ <html> <body> <div id="sample">内容内容内容内容内容内容</div> • • • ここにもsampleの内容を読み込んで表示させたい。 </body> </html>
- ベストアンサー
- JavaScript
- <div>を移動するには？
以下のようなhtmlがあります。 -------------------------------------------- <html> <body> <div id="wrapper"> <div id="d1">ここは第1番です。<form type="input" name="b1" value="Topへ"></form></div> <div id="d2">ここは第2番です。<form type="input" name="b2" value="Topへ"></form></div> <div id="d3">ここは第3番です。<form type="input" name="b3" value="Topへ"></form></div> <div id="d4">ここは第4番です。<form type="input" name="b4" value="Topへ"></form></div> <div id="d5">ここは第5番です。<form type="input" name="b5" value="Topへ"></form></div> </div> </body> </html> -------------------------------------------- 例えばボタン"b3"を押すと、<div id="d3">が一番上に移動するようにするには、どうしたら良いでしょうか？ 残りのdivはそのままの順位で下にずれることになります。 sortなどは使えないと思いますし、どうすればイイのか見当がつきません。 もしお分かりの方おられましたら、ヒントだけでもお願い致します。
- ベストアンサー
- JavaScript
- divのheight指定で画面一杯に表示したい
よろしくお願い致します。 <div>の<height>を100%に指定して、 タブレット等での表示時、縦でも横でも画面一杯に 表示させたいと考えています。 とりあえず css で以下は宣言済みです。 html, body { height: 100%; margin: 0px; padding: 0px; } 親子構造としては以下を想定しています(いくらか簡略化しています) <html> <body> <div id="H" style="height:60px;"> (1)ここにヘッダー的なもの </div> <div id="B" style="height:100%; overflow: auto;"> (2)この部分を縦一杯にしたい </div> </body> </html> (2)の部分にはjavascriptでサーバから取得した XMLのデータを埋め込んでおります。 その際、選択行の色付け等を行いたかった為、 大枠を<div>でくくり、その中に<table>で表組みしています。 最終的な構造は以下のようになっているはずです。 <div id="B" style="height:100%; overflow: auto;"> <div id="rdiv1"><table id="rtbl1"><tr><td ・・・ /td></tr></table></div> <div id="rdiv2"><table id="rtbl2"><tr><td ・・・ /td></tr></table></div> <div id="rdiv3"><table id="rtbl3"><tr><td ・・・ /td></tr></table></div> ・・・ </div> 行ごとの<div>や、その中の<table>でも height: 100%; は指定しています。 また、1行あたりの高さは<td style="height: 40px;">と指定しています。 (rowspanを使ってのぶち抜きを行っているため) html と body に height:100%; を指定しているので、 予想ではヘッダー用のdivが指定の高さで表示され、 次のdivが残りの高さ分一杯に表示。 その中のデータは overflow:auto; でスクロールできる。 と考えていたのですが、実際はjavascriptで埋め込んだdiv、 及びtableの高さまで伸びてしまい画面上を大きくはみ出してしまいます。 （divのoverflowが全く機能しません） 100%ではなく 500px としてみたところ、 そのサイズに収まってスクロールできました。 （縦一杯ではありませんがdivのoverflowは機能しました） 何とか height 100% を実現して、 divのスクロールバーのみでの表示を行いたいのですが、 何か指定が足りないのでしょうか？
- ベストアンサー
- CSS
- 入力内容をリアルタイムに取得・表示する処理
次のような内容でテキストエリアに入力された特定のキーワードをカウントしているのですが、カウントの値をリアルタイムに取得・表示にはどのような処理を加えたら良いのでしょうか。 <form id="post" name="post" method="post" action="post.php"> <texarea id="text" class="text-edit" name="text"></textarea> <input id="submit" name="submit" type="submit"> </form> (<div id="keyword-counter"></div>をここに追加) <div id="word-counter">文字数</div> <script type="text/javascript"> jQuery( function($) { function KeywordCounter() { var input_text = document.post.content.value; var word = input_text.split('キーワード').length -1; } $('#word-counter') .before('<div id="keyword-counter"></div>').bind('keyup', KeywordCounter); KeywordCounter(); }); </script>
- ベストアンサー
- JavaScript
- onclick→次ページでサーブレットDB処理表示
http://okwave.jp/qa/q8302602.htmlの質問の続きとなるのですが、 JavaScriptからサーブレットのURLにsubmitするコードですが、 以下のように２つ書いてみましたが、合っていますでしょうか？ そして次に何を書けばいいでしょうか？ function submit_func() { // フォームオブジェクトに対して値をサブミットを実行する form2.submit(); } <body> <form name="form2" action="/test/sample.do" method="POST"> <p><a href="javascript:form2.submit()">リンク直接</a></p> <p><a href="javascript:submit_func()">リンク関数</a></p> </form>
- ベストアンサー
- JavaScript
- <Div>の中の要素の数を調べる
こんにちは。 タイトルの文が合っているのか分かりませんが、こういうことです。 たとえば、<div id="box">～～</div>の中に、 <a href="...">～</a>が何個あるかを調べて書き出す方法はありませんでしょうか。 JavaScriptで実現したいんですが、慣れてないので上手く出来ません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- JQueryの変数の扱いで弱っています。
お世話になります。 JQuery初心者です。 ３日程、ハマリ、行き詰まったので、相談させて下さい。 アマゾンのレビューの「レビューは参考になりましたか？」「はい」「いいえ」の 様なものを作りかけています。 その際、以下の様な記述をしています。 （肝心な部分抜粋） ---------------------------------------------- 大元 正常に稼働 ---------------------------------------------- <!-- JQuery --> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> <!-- $(document).ready(function(){ $("#form1").submit(function() { //●●●この #form1 の部分を変数にしたい var str = $(this).serialize(); 処理 }}; --> </script> </head> <body> <form id="form1" method="post" action=""> //●●●#form1とはコノ部分 <select name="option"> <option value="yes" selected>参考になった</option> <option value="no">参考にならなかった</option> </select> <input type="submit" name="submit" value="投票する"/> </body> </html> ---------------------------------------------- 上記の記述で正常に稼働しています。 が、1つのページにフォームを複数作り、それぞれのフォームにIDをふって、 それぞれ正常に稼働させたいのです。 そこで、javascriptの $("#form1").submit(function() { ここの #form1 部分を変数にして、複数のフォームに対応させたいと思っています。 が！ 以下の様に改良したところ、正常に稼働しません。 ---------------------------------------------- 以下、改良部分 うまく稼働せず ---------------------------------------------- -------javascript部分 $("input").click(function(){ //●●●ここを改良 変数作成 id2= $(this).attr("class"); sharp="#form"; id3 = sharp + id2; }); $("id3").submit(function() { //●●●ここを改良 変数指定 -------フォーム部分 <form id="form1" method="post" action=""> <input type="submit" name="submit" value="投票する" class="1"/> //●●●ここを改良 class="1" を追加 ------------------------------------------------- つまり、classの「1」をjavascript部分で読み取って、#form の文字列と組み合わせて #form1 として、機能させたいのですが、うまくいきません。 （何故か、$("#form"+id2) の部分がうまく機能しません。） ※要は複数のフォームのidに、１つのjavascriptで対応させたいだけで、 上記の様な、まわりくどいやり方には全くこだわっていません。 どうか、迷える子羊に愛の手を！
- ベストアンサー
- AJAX
- 連続処理要求の禁止について
ASPかJAVAScriptで質問するか 迷ったのですが、ASPで質問させて頂きます。 以下の流れで処理が走ります。 1.ASPで作成されたHTMLを表示する。 2.表示されたHTMLでSubmitボタンを押下する。 3.OnSubmitでHTMLに入力されたデータをチェックする（JAVAScript） 4.チェックが正常ならSubmitし、自ページをロードする。 5.ASPで入力したデータを取得し、DBに登録する 6.DBに正常登録されたら違うURLに飛ぶ といった流れの中でSubmitボタンを押下後、 再度Submitボタンが押されても無効にしたいのですが、 何か方法をご存知でしたら御教授ください。 できたら、フラグとかを立てずに、 JAVAScriptの処理中やサーバからの応答待ちといった ステータスを取得して制御したいと思っています。 フラグを立てなければ無理といった情報でも知りたいので、 御教授お願いいたします。
- 締切済み
- Microsoft ASP
- <div>タグでサイドバーを作るときの幅の指定方法
全体を囲むdivの中にサイドバーとメインコンテンツ用のdivを入れたいと思っています。 <div id="allContents" style="width:100%;"> <div id="sideBar" style="float:left; width:200px;"></div> <div id="main" style="float:right;"></div> </div> で、このときに、右側に表示される#main部分の幅を「残り全部」にしたいのですが、 widthに何を指定したら良いのでしょうか？ サイドバー部分が200px固定で、残りのメイン部分の幅はブラウザの右端までにしたいのです・・。 （Javascriptで#main部分の長さを取ろうと思っているので、中に何も入っていなくても divの大きさが一杯までなるようにしたいのです・・） ご教授よろしくお願いします。
- ベストアンサー
- HTML
- Windowsから既存WebのFORMのSubmitにパラメータをわたす。
１．Windowsから既存Webのcgiにパラメータを渡して、表示されるデータをローカルのDBに保存したい。 以下が、WebのFORMのSubmit部分で、submit後に表示されるWebデータを取得したいのです。<form action="http://www.XXX.jp/cgi.exe" method=POST> <input type=HIDDEN name="CNAME" value="/list"> <input type=SUBMIT value="一覧"> </form> どの様にすれば、実現できますでしょうか？ よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
補足
返答してくれてありがとうございます。 実は、DBにアクセス処理も書いてありますが、ただ、formのSubmitをおしたら、どういうに<div> の部分を再度読み込みさせるのが、よくわからないですが、button押すというイベントから、どうやってdiv の 部分を起動するのを解決すれば、いいでしょうか？ ありがとうございます。