Ajaxを使用してページを更新する方法を説明します

アレクサンドル・ドミトレンコ

オブジェクトTaskにはbooleanフィールドが含まれていますdoneAjaxステータス変更後にページ更新するにはどうすればよいですか?そして代わりにtrue-false表示値が完了しました-不完全ですか?

routers.rb:

resources :tasks do
    member do
      post 'done'
    end
  end

コントローラ:

def done
    @task = Task.find(params[:id])
    @task.update_attributes(:done => params[:done])

    respond_to do |format|
      format.js {}
    end

  end

見る:

....
 <td><%= task.done %></td>
 <td><%= check_box_tag 'done', task.id , task.done, :class => "task-check", remote: true %></td>
....

<script>
  $(".task-check").bind('change', function(){
    $.ajax({
      url: '/tasks/'+this.value+'/done',
      type: 'POST',
      data: {"done": this.checked},
    });
  });

</script>

更新

編集されたスクリプト

<script>
  $(".task-check").bind('change', function(){
    $.ajax({
      url: '/tasks/'+this.value+'/done',
      type: 'POST',
      data: {"done": this.checked},
    }).done(function(ajax_response){
     location.reload();
    });
  });

</script>

およびコントローラー

def done
    @task = Task.find(params[:id]) # make sure you have this
    @task.update_attributes(:done => params["done"])

    render :json => { data: "Success", is_done: params[:done] }
  end

再起動せずにページコンテンツを更新するにはどうすればよいですか?

toddmetheny

コントローラ:

def done
  @task = Task.find(params[:id]) # make sure you have this 
  @task.update_attributes(:done => params["done"])

  render :json => { data: "Success", is_done: params[:done] }
end

見る:

 ....
 <td><%= task.done %></td>
 <td><%= check_box_tag 'done', task.id , task.done, :class => "task-check" %></td>
 ....

 <script>
  $(".task-check").on('change', function(e){
    // removed remote-true. you can preventDefault if you need to but doubt page tries to refresh from a checkbox getting checked. e.preventDefault() if you need it
    $.ajax({
      type: "POST",
      url: '/tasks/done',
      type: 'POST',
      data: {done: $('.task-check').val()},
    }).done(function(ajax_response){
      // update whatever you want after it completes 
    });
   });

 </script>

これをテストしませんでしたが、私はいつもこれらを書いています。ペイロードの後で機能しない場合はお知らせください。不足しているものを特定します。

値を「incomplete」から「complete」に更新するだけの場合は、incompleteと呼ばれる要素をターゲットにするだけです。たとえば、「task-status」のクラスがある場合は、その要素をターゲットにして、関数の.done部分で更新できます。例えば:

$('.task-status').text('Complete')

以前に不完全と言ったものを置き換える必要があります。テキスト入力の場合は、代わりに.val()を使用できます。ページ上のテキストだけの場合は、.text()が機能するはずです。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

AJAXを使用してdivまたはWebページを自動更新する方法

ajaxを使用してページデータを更新する

jQuery / AJAXを使用してPerlDancerでページを更新する非常に簡単な方法はありますか?

属性の更新を制限する方法を説明します

laravelでhasManyrelatioinsを使用して更新ページを作成する方法

pubnubtimetokenを使用してページの更新を処理する方法

ajaxを使用してX秒ごとにhtmlページを更新します

DBからPHP値を取得し、AJAXを使用してページを更新する方法

結合を使用してテーブルの結果を取得する方法を説明しますか?

ページを更新せずに、ajax / jQueryを使用してデータベースから値を表示する方法

AJAXとLARAVELを使用して、ページを更新せずにMySQLにデータを挿入する方法

XSLTを使用してページXMLNSを明らかにする

Chaliceを使用してAWSLambdaで「説明」を設定する方法

python reを使用してこれを説明する方法は?

for ... rangeループを適切に使用する方法を説明します

sedのマンページのどの部分がファイルの行を削除する方法を説明しています

AJAXを使用してJSPページラベル値を更新する

ajaxを使用してページをfloatingdivとして表示する

Volleyを使用してエラーメッセージの説明を取得する方法

ezdxfを使用してAutoCADレイヤーの説明を編集する方法

CLIを使用してAWSのポリシーを説明する

Confluence:VBAを使用して既存のページを更新します

PowerShellを使用してSharepointWikiページのaspxを更新します

useEffectを使用して更新せずにすべてのデータを削除し、ページを更新する方法

分度器でbrowser.sleepを使用して説明する方法

DNNDDRモジュール-現在のページ名と説明を取得します

AJAXとJQueryを使用してdivにhtmlページをロードする方法

ホバーして画像の上に説明を表示する方法

JQueryを使用してファイルをダウンロードする方法またはAjaxを使用してエラーページを表示する方法

TOP 一覧

  1. 1

    モーダルダイアログを自動的に閉じる-サーバーコードが完了したら、Googleスプレッドシートのダイアログを閉じます

  2. 2

    セレンのモデルダイアログからテキストを抽出するにはどうすればよいですか?

  3. 3

    CSSのみを使用して三角形のアニメーションを作成する方法

  4. 4

    ドロップダウンリストで選択したアイテムのQComboBoxスタイル

  5. 5

    ZScalerと証明書の問題により、Dockerを使用できません

  6. 6

    PyCharmリモートインタープリターはプロジェクトタブにサイトパッケージのコンテンツを表示しません

  7. 7

    Windows 10でのUSB入力デバイスの挿入/取り外しの検出

  8. 8

    Excel - count multiple words per cell in a range of cells

  9. 9

    PictureBoxで画像のブレンドを無効にする

  10. 10

    Windows 10 Pro 1709を1803、1809、または1903に更新しますか?

  11. 11

    スタート画面にシャットダウンタイルを追加するにはどうすればよいですか?

  12. 12

    Python / SciPyのピーク検出アルゴリズム

  13. 13

    Luaの文字列から特定の特殊文字を削除するにはどうすればよいですか?

  14. 14

    Pythonを使用して、リストからデータを読み取り、特定の値をElasticsearchにインデックス付けするにはどうすればよいですか?

  15. 15

    LinuxでPySide2(Qt for Python)をインストールするQt Designerはどこにありますか?

  16. 16

    goormIDEは、ターミナルがロードするデフォルトプロジェクトを変更します

  17. 17

    QGISとPostGIS(マップポイント(米国の地図上にraduisを使用した緯度と経度)

  18. 18

    MLでのデータ前処理の背後にある直感

  19. 19

    ターミナルから「入力ソースの変更」ショートカットを設定する

  20. 20

    パンダは異なる名前の列に追加します

  21. 21

    同じクラスの異なるバージョンを使用したクラスローディング:java.lang.LinkageError:名前の重複クラス定義を試行しました

ホットタグ

アーカイブ