Q&A
htmlも提示できませんか？
###前提・実現したいこと
JavaとJavascriptで遷移レスなシングルページアプリを作成中です。
そこで「質問投稿 → 自動更新 → 質問一覧表示 → 再投稿」を遷移レスで実現したいです。
###発生している問題・エラーメッセージ
一度目は「質問投稿 → 自動更新 → 質問一覧表示」まで問題なく実現できたのですが、
そのまま2回目の投稿をすると /index.hml に対してGETの動きになってしまいます。
###ソースコード（メイン）
javascript
1$('#proposal').on('click', function() { 2 $('.content-header, div.row, .col-md-12, .box-info, .box').css( 'display', 'none'); 3 4 $('.content').hide().load('proposal.html').fadeIn(function() { 5 // list get 6 $.get( "http://localhost/proposal/list", function(data) { 7 json = JSON.parse(data); 8 $('#proposal_table').dynatable({ 9 dataset: { 10 records: json 11 } 12 }); 13 }); 14 15 // form post 16 $('#proposal_form').on('submit', function(event) { 17 event.preventDefault(); 18 var val1 = $('#proposal_form [name=theme]').val(); 19 var val2 = $('#proposal_form [name=content]').val(); 20 var method = 'POST'; 21 22 var url = 'http://localhost/proposal/form'; 23 var data = 24 {"id":null, "theme":val1, "content":val2, "status":"\<span class=\"label label-warning\"\>\<i class=\"fa fa-envelope\"\>\<\/i\> 未読\<\/span\>"}; 25 var page = "proposal"; 26 console.log("check: " + method, url, data, page); 27 28 callModal(method, url, data, page); 29 }); 30 }); 31});
###ソースコード（サブ）
javascript
1function callModal(method, url, data, page) { 2 3 swal({ 4 title: "送信します。よろしいですか？", 5 type: "warning", 6 showCancelButton: true, 7 confirmButtonColor: "blue", 8 confirmButtonText: "送信する", 9 cancelButtonText: "戻る", 10 animation: false, 11 closeOnConfirm: false 12 }, 13 function (){ 14 $.ajax({ 15 type : method, 16 url : url, 17 data : JSON.stringify(data), 18 contentType: 'application/json', 19 dataType : 'JSON', 20 scriptCharset : 'utf-8', 21 timeout: 10000 22 }) 23 .done(function(response){ 24 swal("送信完了しました", "元の画面に戻ります", "success"); 25 26 // clear form 27 $('input, textarea').val(""); 28 $("input:checkbox").attr("checked",false); 29 $("option").attr("selected",false); 30 31 // reload page 32 $('.content').empty(); 33 $('.content').load(page + '.html'); 34 $.get( "http://localhost/" + page + "/list", function(data) { 35 json = JSON.parse(data); 36 $('#' + page + '_table').dynatable({ 37 dataset: { 38 records: json 39 } 40 }); 41 }); 42 }) 43 .fail(function(response){ 44 swal("送信失敗しました", "お手数ですが不具合報告よりご連絡ください", "error"); 45 }); 46 }); 47}
###proposal.html (これをindex.htmlの.contentにロードしています)
html <section class="content-header"> <h1> <i class="fa fa-paper-plane"></i> 提案表 </h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-leaf"></i> ホーム</a></li> <li class="active"><i class="fa fa-paper-plane"></i> 提案表</li> </ol> </section> <div class="box box-default"> <div class="progress progress-xs progress-striped active"> <div class="progress-bar progress-bar-primary" style="width: 100%"></div> </div> <div class="box-header with-border"> <h3 class="box-title"><i class="fa fa-circle-o-notch text-light-blue"></i> 提案一覧</h3> </div><!-- /.box-header --> <div id="proposal_list" class="box-body no-padding"> <table id="proposal_table" class="table table-striped"> <thead> <th data-dynatable-column="id">No.</th> <th data-dynatable-column="created">登録日</th> <th data-dynatable-column="status">ステータス</th> <th data-dynatable-column="theme">テーマ</th> </thead> <tbody> </tbody> </table> <div class="box-header"> <h3 class="box-title"></h3> </div> </div><!-- /.box-body --> </div> <div class="box box-default"> <div class="progress progress-xs progress-striped active"> <div class="progress-bar progress-bar-primary" style="width: 100%"></div> </div> <div class="box-header with-border"> <h3 class="box-title"><i class="fa fa-circle-o-notch text-light-blue"></i> 提案する</h3> </div><!-- /.box-header --> <div class="box-body"> <form id="proposal_form" role="form"> <!-- text input --> <div class="form-group"> <label class="label label-primary">テーマ</label> <input class="form-control" name="theme" placeholder="" type="text" /> </div> <!-- textarea --> <div class="form-group"> <label class="label label-primary">内 容</label> <textarea class="form-control" name="content" rows="8" placeholder=""></textarea> </div> <button type="submit" id="proposal_submit" class="btn btn-primary">送信する</button> </form> </div><!-- /.box-body --> </div>
###上記説明
ソースコード（サブ） // reload page の部分で投稿直後に一覧をリロードしています。
リロード後、正常に投稿一覧が更新されていますが、2度目の投稿で勝手にGETで
「index.html?theme=test&content=test」に飛ばされてしまいます。
一日中解決できず困っていました。
行き詰ってしまったためどなたかお知恵をお貸しください。よろしくお願いいたします。
eripongさん、すみません！さきにご回答いただいた方の方法を試したところ直りました。拙いコードに目を通していただき感謝いたします。お時間頂きありがとうございました。
（過去メッセージ）
htmlを追記いたしました。proposal.htmlをindex.htmlのdivにjQueryでloadしています。すみませんがアドバイスいただけたら幸いです。
回答1件
0
ベストアンサー
こんにちは。
外しているかもしれませんがメインコードの下記の箇所を修正すると修正されたりしないでしょうか？
時間も経過していますので、質問時とコードが違うこともあるかと思いますので質問時と同じコードで試されてみてください。
javascript
1// 元々のコード 2$('#proposal_form').on('submit', function(event) { 3 4// 試して頂きたいコード 5$(document).on('submit', '#proposal_form', function(event) {
投稿2015/10/12 14:16
総合スコア69
すみません！治りました！（先ほどは修正いただいたコードを貼り間違えていました。
大変感謝です！！なぜ上記だといけるのか理解できていませんが、まずはお礼申し上げます。
修正前のコードでは、proposal_formにイベントハンドラが登録されますが、
loadすると新しくproposal_formが作られて上書きされ、
イベントハンドラは登録されないので、デフォルトの動作をしたのだと思います。
修正後のコードではdocumentにイベントハンドラが登録され、
これはloadによって上書きされないため、うまく動くと考えられます。
http://js.studio-kingdom.com/jquery/events/on
の以下の箇所が該当すると思います。
> .on()では選択要素とセレクターがありますが、選択要素は.onメソッドが呼ばれる前に
> ページ上に存在している必要があります。 .on()のような委任タイプのイベントの利点と
> して、もし新しい要素が後からjavaScriptの動的な処理によって選択要素内に
> 追加されたとしても、 セレクタにマッチしていればその新しい要素に対しても
> イベントハンドラが有効になります。
eripongさん解説いただきありがとうございます。
なるほど、proposal_formに上書きされてしまっていたわけですね。今後はきちんとdocumentに渡すようにします。
大変勉強になりました。重ね重ねお礼申し上げます！
eripong さん。補足有難う御座います。 m(_ _)m
あなたの回答
tips
プレビュー
