🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CodeIgniter

CodeIgniterは、PHP向けオープンソースのWebアプリケーションフレームワークです。CodeIgniterは覚える構文が少なく、自由度も高いため、PHPを理解していれば構築が簡単です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

2回答

2177閲覧

onChangeメソッドで数値更新後に自動保存

Satochika

総合スコア6

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CodeIgniter

CodeIgniterは、PHP向けオープンソースのWebアプリケーションフレームワークです。CodeIgniterは覚える構文が少なく、自由度も高いため、PHPを理解していれば構築が簡単です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2021/01/15 03:08

編集2021/01/15 06:49

ajaxを使って非同期で自動保存したい

PHPとJavaScriptを使って得点の更新を行えるシステムを作っています。
onChangeメソッドが発火するのは確認出来るのですが、自動保存が行えていない状況です。
input要素で得た数字をPOSTメソッドで送りデータベースに保存する想定です。
受け取り側の定義が出来ておらず、更新した数字が保存されません。

該当のソースコード

PHP

1<script type="text/javascript"> 2 function myfunc() { 3 autosaveOn = true; 4 $.ajax({ 5 url: '/admin/work_tasks/detail', 6 type: 'POST', 7 responseType: 'json', 8 data: { 9 'id': id, 10 'progress_status': progress_status, 11 }, 12 }) 13 } 14</script> 15 16ーーー中略ーーー 17 18<tr> 19 <th>得点</th> 20 <td class="report"> 21 <dl class="create-item"> 22 <dd><input type="number" onChange="myfunc()" max="100" min="0" id="progress_status" class="form-control text-original" name="task[progress_status]" value="<?= (int)$task['progress_status'] ?>"></dd> 23 </dl> 2425 </td> 26</tr>

試したこと

autosaveOn = true;を{if(!autosaveOn){autosaveOn = true;}としましたが、変わりませんでした。

よろしくお願いします。

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

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

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

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

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

tabuu

2021/01/15 03:50

PHPのソースコードがないのでご提示をお願いします。 自動保存とは何をどこに保存する想定でしょうか? >autosaveOn = true;を{if(!autosaveOn){autosaveOn = true;}としましたが、変わりませんでした。 提示されているソースコードから分かりませんが、autosaveOnをtrueにすると何かあるのですか?
Satochika

2021/01/15 04:04

ご回答頂きありがとうございます。 上記のコードは全てPHPで記述しています。 autosaveOn = true;で自動保存出来ると思ったのですが、実際には何も起こりませんでした。
m.ts10806

2021/01/15 04:36

> /admin/work_tasks/detail で動作するコードをご提示ください。
Satochika

2021/01/15 05:18

ご回答頂きありがとうございます。 こちらのURLはまだパスを通せていないため、動作しません。
m.ts10806

2021/01/15 05:21

では結局「自動保存」って何のことですか? 既にコメントで求められている「何をどこに保存する想定か」が応えられていません。
Satochika

2021/01/15 05:33

ご回答頂きありがとうございます。 input要素で得た数字をPOSTメソッドで送りデータベースに保存する想定です。
m.ts10806

2021/01/15 05:35

じゃあ、PHP側が書けてないと何もできないですよ。 何事も定義、受け取り側が先です。
Satochika

2021/01/15 06:16

ご回答頂きありがとうございます。 受け取り側の定義が出来ていませんでした。
m.ts10806

2021/01/15 06:19

「上記のコードは全てPHPで記述しています。」とあったので何の話かと。。。
Satochika

2021/01/15 06:26

「PHPで記述しています」というのは.phpの拡張子のファイル上で記述しているという意味でした。 わかりにくい説明になり、申し訳ございません。
m.ts10806

2021/01/15 06:45

それがフレームワークに乗っているものかどうか判断しかねます。 いずれにしても処理を書いてないのであれば、書くところから。 「自動保存」部分についても先にコメントに書かれたように質問本文に具体的に記載してください。
Satochika

2021/01/15 06:51

ご回答頂きありがとうございます。 質問本文を変更しました。
guest

回答2

0

ベストアンサー

POST の受け側について。

まずは下記のように動作確認用のフォームから試してみてはと思います。

<form action="/admin/work_tasks/detail" method="post"> <input type="text" name="id"> <input type="text" name="progress_status"> <input type="submit" value="send"> </form>

PHPの受け取り側が定義出来ていません。ルーティングでパスを通すやり方もわからないので、

もし受け側は何も作っていません、やりかたがわかりません、ということなら別質問を立ててみてはどうでしょうか。

投稿2021/01/25 05:44

68user

総合スコア2022

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

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

Satochika

2021/01/25 06:40

ご回答頂きありがとうございます。 そうですね、仰って頂いたように別質問で受け側の記述を解決した方が良いかもしれません。
guest

0

id="progress_status"のinput要素に対してonChangeを設けるなら理解できますが、
dl要素にイベントを設けて、意図したとおりに発火してますかねぇ?
(発火するっていうならしているんでしょうけど。)

それと、onChangeって、変化があればあるたびにイベント発火するので、
例えば13579って入力するのに1、13、135、1357、13579のそれぞれで発火するはず。
正常にイベント発火すれば5回も自動保存処理が動くのは、忙しない。
タイマーを加えて例えば300ms待ってから保存とかしたほうがいいかも。

それと、データの渡し方、

data: { 'id': id, 'progress_status': progress_status, },

javascript上でidって変数やprogress_statusって変数が存在しますよね?
progress_status = $("#progress_status").val();とかどこかに書いてますか?

data: { 'id': id, 'progress_status': $("#progress_status").val(), },

とかしないと引き継がれないような。

投稿2021/01/15 03:53

編集2021/01/15 04:25
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

Satochika

2021/01/15 04:10

ご回答頂きありがとうございます。 どちらでも発火はします。 一応input要素に変更しておきます。
Satochika

2021/01/15 04:44

ご回答頂きありがとうございます。 仰る通り、変更がある度にイベント発火します。 'progress_status': $("#progress_status").val(),と変更しましたが、何も変わりません。
退会済みユーザー

退会済みユーザー

2021/01/15 05:13 編集

urlは適切? なにかのフレームワークを使っていてmod_rewriteしているような気がするけども。 POST送信しているかは確認済み? ChromeならデベロッパーツールのNetworkタブで確認できるようですが。 デベロッパーツールでブレークポイントを張って待ち構えてみてはどうでしょう?
Satochika

2021/01/15 05:20

ご回答頂きありがとうございます。 こちらのURLはまだパスを通せていません。どのようにルーティングでパスを通せば良いのかわかりません。 フレームワークはCodeIgniterを使用しています。
退会済みユーザー

退会済みユーザー

2021/01/15 05:58 編集

それならば、質問タグに CodeIgniter も加えるべきだし、PHPユーザーが必ずしも CodeIgniter わかるわけじゃないんだからね。わたしはわからないし。 ajaxによるPOST送信ができているかどうか、まではサポートしようとは思いますが。 POST受信する処理が作られていないのに、保存できていませんjsが悪いんでしょうかと受け取れる質問内容は、完全にずれています。
Satochika

2021/01/15 06:14

ご回答頂きありがとうございます。 仰る通りです。 PHPの受け取り側が定義出来ていません。ルーティングでパスを通すやり方もわからないので、ご教授頂ければと思います。 よろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問