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

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

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

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

CakePHP

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

JavaScript

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

Ajax

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

Q&A

解決済

3回答

7123閲覧

ajax処理が2回実行されないようにしたい

taiyo-2017

総合スコア49

PHP

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

CakePHP

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

JavaScript

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

Ajax

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

0グッド

3クリップ

投稿2018/01/18 11:47

編集2018/01/19 00:38

お世話になります。

ajaxを使ってファイルを読み込む処理1が正常終了し、ダイアログで「OK」を選択した場合に
改めてファイルを読み込む+登録を行う処理2を実行したいと考えています。

処理自体は行えるのですが、どうやら処理2が2回処理されてしまっているようです。

下記のように記述しているのですがどこを変更したら良いのでしょうか?
根本的に記述の仕方が間違っているのでしょうか?

アドバイス等よろしくお願いします。
JavaScript

javascript

1// test.js 2/* 初期処理 */ 3function imgReadDep() { 4 document.getElementById("filReadDep").value = ""; 5 document.getElementById("filReadDep").click(); 6} 7function chgReadDep() { 8 var fd = new FormData(); 9 if ($("input[name='filReadDep']").val() !== '') { 10 fd.append("file", $("input[name='filReadDep']").prop("files")[0]); 11 } 12 var selectTable = $("#hidReadDep").val(); 13 fd.append("select_table", $("#hidReadDep").val()); 14 var postData = { 15 type : "POST", 16 url : $('#check-csv-url').text(), 17 data : fd, 18 dataType : 'json', 19 processData : false, 20 contentType : false 21 }; 22 readCsvCheckAjax(postData); 23} 24 25/* 処理1 */ 26function readCsvCheckAjax(postData) { 27 $.ajax(postData).done(function(data) { 28 if (data.check) { 29 if (!window.confirm("処理1を実行してよろしいですか?")) { 30 alert("実行しませんでした"); 31 return; 32 } 33 readCsvRegitAjax(); 34 } else { 35 alert("処理1の実行に失敗しました。"); 36 } 37 }).fail(function(data) { 38 alert("処理1の実行に失敗しました。"); 39 }).always(function(data) { 40 }); 41} 42 43/* 処理2 */ 44function readCsvRegitAjax() { 45 var fd = new FormData(); 46 if ($("input[name='filReadDep']").val() !== '') { 47 fd.append("file", $("input[name='filReadDep']").prop("files")[0]); 48 } 49 var selectTable = $("#hidReadDep").val(); 50 fd.append("select_table", $("#hidReadDep").val()); 51 var postData = { 52 type : "POST", 53 url : $('#regit-dep-csv-url').text(), 54 data : fd, 55 dataType : 'json', 56 processData : false, 57 contentType : false 58 }; 59 $.ajax(postData).done(function(data) { 60 if (data.check) { 61 alert("処理2の処理は正常に終了しました。"); 62 } else { 63 alert("処理2の実行に失敗しました。"); 64 return; 65 } 66 }).fail(function(data) { 67 alert("処理2の実行に失敗しました。"); 68 }).always(function(data) { 69 }); 70}

追記:
記載できていませんでしたが、cakephp3を使用しており、
post後にcontrollerの処理を行うような仕様となっています。

現状としては処理1が行われた後で「処理1を実行してよろしいですか?」のダイアログが表示され、
キャンセルを押すとそのまま処理が終了します。
OKを押すと処理2が実行され「処理2の処理は正常に終了しました。」が2回表示されます。
表示だけではなく実際に処理2も2階行われており、データも2件登録されている状態となっています。

PGは以下のような記述をしています。
ctp

PHP

1<?php 2// index.ctp 3<html> 4<head> 5<meta charset="utf-8"> 6<link rel="stylesheet" href="/test/css/jquery-ui.css"> 7<script src="/test/js/jquery-3.2.1.js"></script> 8<script src="/test/js/jquery-ui.js"></script> 9<link rel="stylesheet" href="/test/css/style.css"> 10<link rel="stylesheet" href="/test/css/test.css"> 11<script src="/test/js/common.js"></script> 12<script src="/test/js/test.js"></script> 13</head> 14<body> 15<span id="check-csv-url" class="DisplayNone"> 16 <?= $this->Url->build(['action' => 'checkCsv']) ?> 17</span> 18<span id="regit-dep-csv-url" class="DisplayNone"> 19 <?= $this->Url->build(['action' => 'regitDepCsv']) ?> 20</span> 21 22<?=$this->Form->create(null, ['type' => 'file','url' => ['action' => 'check_csv'],'onsubmit' => 'return false;', 'name' =>'frmReadDep', 'id' =>'frmReadDep', 'enctype' => 'multipart/form-data' ])?> 23 <input id="filReadDep" name="filReadDep" type="file" value="" onChange="chgReadDep()" class="DisplayNone" /> 24 <button class="btnMa mt5px" onClick="imgReadDep()"><?= $this->Html->image("buttons.png")?></button> 25<?= $this->Form->end(); ?> 26<input type="hidden" id="hidReadDep" value="dep"> 27</body> 28</html>

controller

PHP

1<?php 2 3namespace App\Controller; 4 5use Cake\Core\Configure; 6use Cake\ORM\TableRegistry; 7use Cake\Event\Event; 8use Cake\Error\Debugger; 9use App\Controller\AppController; 10 11class TestController extends AppController 12{ 13 public function index(...$path) 14 { 15 } 16 17 /* 18 * CSV内容チェック 19 */ 20 public function checkCsv(...$path) 21 { 22 $result = [ 23 "check" => false, 24 "result" => false, 25 "message" => "" 26 ]; 27 28 // 処理 29 // 処理に成功した場合に 30 // $result['check'] = true; 31 $this->autoRender = false; 32 echo json_encode($result); 33 } 34 35 public function index(...$path) 36 { 37 } 38 39 /* 40 * CSV内容登録 41 */ 42 public function readDepRegist(...$path) 43 { 44 $result = [ 45 "check" => false, 46 "result" => false, 47 "message" => "" 48 ]; 49 50 // 処理 51 // 処理に成功した場合に 52 // $result['check'] = true; 53 $this->autoRender = false; 54 echo json_encode($result); 55 } 56}

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

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

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

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

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

yambejp

2018/01/18 11:49

「if (!window.confirm(処理1を実行してよろしいですか?")) {」の文字列のところクォーテーションがつかずに始まっています
taiyo-2017

2018/01/18 11:53

ご指摘ありがとうございます。修正を行いました。
mooey

2018/01/18 11:55

「OK」と2回押すことなく2度readCsvRegitAjax()が呼ばれることはないように見えますが、何をもって「どうやら処理2が2回処理されてしまっている」と判断していますか?
taiyo-2017

2018/01/18 12:05

ご質問ありがとうございます。質問内容の下部に現象の追記を行いました。
yambejp

2018/01/18 12:07

念のためhtml部分のサンプルも追記してもらえると助かります
taiyo-2017

2018/01/18 12:17 編集

HTMLの追記とそれに伴いjsに「imgReadDep()」を追記しました。
yambejp

2018/01/18 12:43

中途半端なPHPで書かれても再現できないので、結果として表示されるHTMLのサンプルを付けた方が良いと思います
taiyo-2017

2018/01/19 00:41

失礼しました。追記以降の内容を改めて修正しました。ご確認をお願いいたします。
defghi1977

2018/01/19 01:00 編集

jQueryのバージョンを追記願います. →すみませんありました. jquery-3.2.1.js
guest

回答3

0

statusがsuccessとcompleteの時に呼び出されている可能性が考えられます。

「function(data)」の部分を「function(data, status, xhr)」などに拡張して、
「if (status == "success")」の時に呼び出してみてはいかがでしょうか?

投稿2018/01/18 14:29

mno

総合スコア35

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

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

0

postされているurl側のスクリプトがおかしい可能性はないですか?
2回実行しているのではなく2回結果を返しているのでは?
予想の域をでませんが…

投稿2018/01/18 12:54

sousuke

総合スコア3828

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

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

taiyo-2017

2018/01/19 00:45

回答ありがとうございます。 postでは1度のみ処理を行うような記載をしています。 2重になっていない状態でajaxでpostを行ったのですが、1回のみ処理が行われており、post後の結果も取得できているようでした。 なので2重で呼び出していることが原因かと考えています。
guest

0

自己解決

自己解決いたしました。
結論としてはPGの記載ミスでした。
jsで
readCsvRegitAjax();
readCsvRegitAjax();
のように2回記載されており、記述通りに2回行われているだけでした。
質問内容では1回のみ呼び出しを行っているため、1度のみ呼び出される状態となっていました。
大変失礼いたしました。回答していただきありがとうございました!

投稿2018/01/19 01:06

taiyo-2017

総合スコア49

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問