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

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

ただいまの
回答率

87.49%

Ajaxで2回目の投稿がGETに変わってしまう。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 3,494

score 76

前提・実現したいこと

JavaとJavascriptで遷移レスなシングルページアプリを作成中です。
そこで「質問投稿 → 自動更新 → 質問一覧表示 → 再投稿」を遷移レスで実現したいです。

発生している問題・エラーメッセージ

一度目は「質問投稿 → 自動更新 → 質問一覧表示」まで問題なく実現できたのですが、
そのまま2回目の投稿をすると /index.hml に対してGETの動きになってしまいます。

ソースコード(メイン)

$('#proposal').on('click', function() {
    $('.content-header, div.row, .col-md-12, .box-info, .box').css( 'display', 'none');
    
    $('.content').hide().load('proposal.html').fadeIn(function() {
        // list get
        $.get( "http://localhost/proposal/list", function(data) {
            json = JSON.parse(data);
            $('#proposal_table').dynatable({
                dataset: {
                    records: json
                }
            });
        });
        
        // form post
        $('#proposal_form').on('submit', function(event) {
    event.preventDefault();
        var val1 = $('#proposal_form [name=theme]').val();
        var val2 = $('#proposal_form [name=content]').val();
        var method = 'POST';
        
        var url = 'http://localhost/proposal/form';
        var data = 
        {"id":null, "theme":val1, "content":val2, "status":"\<span class=\"label label-warning\"\>\<i class=\"fa fa-envelope\"\>\<\/i\> 未読\<\/span\>"};
        var page = "proposal";
        console.log("check: " + method, url, data, page);
        
    callModal(method, url, data, page);
        });
    });
});

ソースコード(サブ)

function callModal(method, url, data, page) {
         
    swal({
        title: "送信します。よろしいですか?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "blue",
        confirmButtonText: "送信する",
        cancelButtonText: "戻る",
        animation: false,
        closeOnConfirm: false
    },
    function (){
        $.ajax({
            type : method,
            url : url,
            data : JSON.stringify(data),
            contentType: 'application/json',
            dataType : 'JSON',
            scriptCharset : 'utf-8',
            timeout: 10000
        })
        .done(function(response){
            swal("送信完了しました", "元の画面に戻ります", "success");

            // clear form
            $('input, textarea').val("");
            $("input:checkbox").attr("checked",false); 
            $("option").attr("selected",false);
            
            // reload page
            $('.content').empty();
            $('.content').load(page + '.html');
            $.get( "http://localhost/" + page + "/list", function(data) {
                json = JSON.parse(data);
                $('#' + page + '_table').dynatable({
                    dataset: {
                        records: json
                    }
                });
            });
        })
        .fail(function(response){
            swal("送信失敗しました", "お手数ですが不具合報告よりご連絡ください", "error");
        });
    });
}

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」に飛ばされてしまいます。

一日中解決できず困っていました。
行き詰ってしまったためどなたかお知恵をお貸しください。よろしくお願いいたします。
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • eripong

    2015/10/12 23:24

    htmlも提示できませんか?

    キャンセル

  • teramasa

    2015/10/12 23:48 編集

    eripongさん、すみません!さきにご回答いただいた方の方法を試したところ直りました。拙いコードに目を通していただき感謝いたします。お時間頂きありがとうございました。

    (過去メッセージ)
    htmlを追記いたしました。proposal.htmlをindex.htmlのdivにjQueryでloadしています。すみませんがアドバイスいただけたら幸いです。

    キャンセル

回答 1

checkベストアンサー

+2

こんにちは。

外しているかもしれませんがメインコードの下記の箇所を修正すると修正されたりしないでしょうか?
時間も経過していますので、質問時とコードが違うこともあるかと思いますので質問時と同じコードで試されてみてください。

// 元々のコード
$('#proposal_form').on('submit', function(event) {

// 試して頂きたいコード 
$(document).on('submit', '#proposal_form', function(event) {

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/10/13 00:13

    http://js.studio-kingdom.com/jquery/events/on
    の以下の箇所が該当すると思います。

    > .on()では選択要素とセレクターがありますが、選択要素は.onメソッドが呼ばれる前に
    > ページ上に存在している必要があります。 .on()のような委任タイプのイベントの利点と
    > して、もし新しい要素が後からjavaScriptの動的な処理によって選択要素内に
    > 追加されたとしても、 セレクタにマッチしていればその新しい要素に対しても
    > イベントハンドラが有効になります。

    キャンセル

  • 2015/10/13 00:16

    eripongさん解説いただきありがとうございます。
    なるほど、proposal_formに上書きされてしまっていたわけですね。今後はきちんとdocumentに渡すようにします。
    大変勉強になりました。重ね重ねお礼申し上げます!

    キャンセル

  • 2015/10/13 10:03

    eripong さん。補足有難う御座います。 m(_ _)m

    キャンセル

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

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る