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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

2112閲覧

JavaScript .doneでページの更新を行いたいがうまく動作しない

Zu_Chan

総合スコア14

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/08/31 07:12

編集2017/09/01 09:47

###前提・実現したいこと
パスワードが一致したら、データベースにデータを挿入し、挿入が完了したら以後の更新を終了する処理を開発しています。
ajax の中身の処理の終了後(入力したパスワードが一致しているかの判定)、ページを更新しないとデータベースに挿入した結果が反映されないため、.doneでajax内部の処理後にページ更新をしようと思っているのですが、うまくいきません。
これは元々の仕様で更新ができない、または前後関係によりできない状態なのでしょうか。

知恵を貸していただけたら幸いです。
よろしくお願いします。

###9/1追記
fileNameは、データベース側の主キー(ID)をファイルの名前として使っています。
$fileName = basename($_SERVER['SCRIPT_NAME'],".php");
一部オリジナルのクラスライブラリを使用しているため、PDO部分の書き方が異なる場合があります。

9/1 POSTをGETに書き換えたところ、doneの中身が処理されるようになりました。
しかし、データベースがアップデートされない状態になりました。

###ソースコード
var input_Pass = window.prompt("管理パスワードを入力してください。");
if(input_Pass){
$.when(
$.ajax({
url:"../../php/finish_Password.php",
type:"POST",
data:{
input_Pass:input_Pass,
fileName:"<?php echo $fileName; ?>"
}
})
).done(
function(){
window.location.reload();
}
);
}else{
window.alert("キャンセルしました");
}
###finish_Password.php

<?php $mysql = ********************; //mysqlサーバーへのログイン $fileName = $_POST["fileName"]; $pass_Hash = $mysql-> select(********); if(password_verify($_POST["input_Pass"], $pass_Hash[0][0])){ $time = new DateTime(); $finishTime = $time->format('Y-m-d H:i:s'); $resp = $mysql-> update(************); } ?>

###9/1更新 パスワード認証
<script type="text/javascript">
function myEnter(){
var input_Pass = window.prompt("管理パスワードを入力してください。");
if (input_Pass) {
$.ajax({
url:"../../php/finish_Password.php",
type:"POST",
data:{
input_Pass:input_Pass,
fileName:"<?php echo $fileName; ?>"
}
})
.done(function (){
window.alert("確認テスト");
})
.fail(function (xhr, status) {console.log(xhr, status);
});
} else {
window.alert("キャンセルしました");
}
}
</script>

###9/1更新 finish_Password.php

<?php $mysql = //mysqlサーバーへのログイン $fileName = $_POST["fileName"]; $pass_Hash = $mysql-> select("******"); //$input_Pass = $_POST["input_Pass"]; //print_r($pass_Hash); if(password_verify($_POST["input_Pass"], $pass_Hash[0][0])){ $time = new DateTime(); $finishTime = $time->format('Y-m-d H:i:s'); //アップデートを一時的に止めています。 } ?>

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

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

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

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

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

m.ts10806

2017/08/31 07:25

プログラムコード(およびエラーメッセージ)は```で囲ってください。(わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください)
m.ts10806

2017/08/31 07:26

$fileNameはどのように設定されるのでしょうか?またphp側も関係するかもしれませんのでfinish_Password.phpのソースコードもあわせてご提示ください(パスワードなど機密情報にあたる部分は****やhogehogeなどで適当にマスクしてください)
m.ts10806

2017/08/31 07:59

fail()で何かエラーが返ってきていないかご確認願います。あとはphpが正しく実行されているかですね。php冒頭でfile_get_contents()とかで適当なテキストファイルを作るとかで確認できます。
Zu_Chan

2017/08/31 08:19

エラーはありませんでした・・・。パスワードの処理の終了後、ページを手動で更新すると終了日時が挿入される状態です。
Zu_Chan

2017/09/01 10:18

すみません、その後、終了ボタンのボタン種別を送信ボタンから通常ボタンに変えたところ、エラーが解決しました。ありがとうございました。
kei344

2017/09/01 10:20

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答3

0

ajaxの戻り値を参照せずにwhenの非同期処理だけまって
doneを実行していませんか?拾うべきはajaxのdoneでは?

投稿2017/08/31 08:17

yambejp

総合スコア114572

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

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

Zu_Chan

2017/08/31 08:27

すみません、見よう見まねでやっていて追いつけていません・・・。 whenの処理を行わないで記述すればよいということでしょうか?
guest

0

ベストアンサー

PHPのコードの最後でJavaScript側に何も返していないのが原因かと思います。NULL or {}などを返してみてはいかがでしょうか。

php

1if(password_verify($_POST["input_Pass"], $pass_Hash[0][0])){ 2 $time = new DateTime(); 3 $finishTime = $time->format('Y-m-d H:i:s'); 4 return '{}'; // or return null; 5 //アップデートを一時的に止めています。 6}

投稿2017/09/01 09:33

Tomak

総合スコア1652

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

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

Zu_Chan

2017/09/01 09:46

上記を追加後、POSTをGETに書き換えたところ、doneの中身が処理されるようになりました。 しかし、データベースがアップデートされない状態になりました。
Tomak

2017/09/01 09:51

いや~それはそうですよね・・・(笑)「//アップデートを一時的に止めています。」←ってコメント書いてありますし。 下記のようにDB更新してからreturnすればOKではないでしょうか? $resp = $mysql->update(********); return '{}' // or return null;
Zu_Chan

2017/09/01 09:56

コメントアウトを解除し、データベースを更新処理を行っても反映されませんでした。
Zu_Chan

2017/09/01 09:58

追記です。 $fileName = $_GET["fileName"];と記述すると、doneが実行されますが、データベースが更新されません。 POSTにすると、データベースが更新されますが、doneが実行されない状態です。
guest

0

$.when().done()ではなく、単純に$.ajax().done()です。
他には、$.ajax().then().done().fail().always()があります。

js

1var input_Pass = window.prompt("管理パスワードを入力してください。"); 2 3if (input_Pass) { 4 $.ajax({ 5 url:"../../php/finish_Password.php", 6 type:"POST", 7 data:{ 8 input_Pass:input_Pass, 9 fileName:"<?php echo $fileName; ?>" 10 } 11 }) 12 .done(function (){ 13 window.location.reload(); 14 }); 15} else { 16 window.alert("キャンセルしました"); 17}

投稿2017/08/31 09:57

Tomak

総合スコア1652

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

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

Zu_Chan

2017/09/01 07:35

回答ありがとうございます。 実装してみましたがうまくいきませんでした。 色々検証してみたところ、.doneでリロード以外にアラートなどをやってみたのですが、処理がされないので、.doneにまで行き着いていない可能性がでてきました。
Tomak

2017/09/01 07:49

.done()の後に、メソッドチェーンで.fail(function (xhr, status) {console.log(xhr, status);})のように設定するとAjaxのエラー内容が見られます。
Zu_Chan

2017/09/01 08:31

Safariのコンソールではエラーが確認できませんでした・・・。 変更したソースをのせます。
Zu_Chan

2017/09/01 09:20

Chromeでエラーを確認しました。 {readyState: 0, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …} "error"
Zu_Chan

2017/09/01 09:24

25行目のエラーので、今回console.logを追加した部分です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問