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

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

ただいまの
回答率

90.50%

  • PHP

    20369questions

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

  • JavaScript

    16447questions

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

  • CakePHP

    2313questions

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

  • Ajax

    1090questions

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

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 3
  • VIEW 674

taiyo-2017

score 11

お世話になります。

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

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

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

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

JavaScript

// test.js
/* 初期処理 */
function imgReadDep() {
  document.getElementById("filReadDep").value = "";
  document.getElementById("filReadDep").click();
}
function chgReadDep() {
  var fd = new FormData();
  if ($("input[name='filReadDep']").val() !== '') {
    fd.append("file", $("input[name='filReadDep']").prop("files")[0]);
  }
  var selectTable = $("#hidReadDep").val();
  fd.append("select_table", $("#hidReadDep").val());
  var postData = {
    type : "POST",
    url : $('#check-csv-url').text(),
    data : fd,
    dataType : 'json',
    processData : false,
    contentType : false
  };
  readCsvCheckAjax(postData);
}

/* 処理1 */
function readCsvCheckAjax(postData) {
  $.ajax(postData).done(function(data) {
    if (data.check) {
      if (!window.confirm("処理1を実行してよろしいですか?")) {
        alert("実行しませんでした");
        return;
      }
      readCsvRegitAjax();
    } else {
      alert("処理1の実行に失敗しました。");
    }
  }).fail(function(data) {
      alert("処理1の実行に失敗しました。");
  }).always(function(data) {
  });
}

/* 処理2 */
function readCsvRegitAjax() {
  var fd = new FormData();
  if ($("input[name='filReadDep']").val() !== '') {
    fd.append("file", $("input[name='filReadDep']").prop("files")[0]);
  }
  var selectTable = $("#hidReadDep").val();
  fd.append("select_table", $("#hidReadDep").val());
  var postData = {
    type : "POST",
    url : $('#regit-dep-csv-url').text(),
    data : fd,
    dataType : 'json',
    processData : false,
    contentType : false
  };
  $.ajax(postData).done(function(data) {
    if (data.check) {
      alert("処理2の処理は正常に終了しました。");
    } else {
      alert("処理2の実行に失敗しました。");
      return;
    }
  }).fail(function(data) {
      alert("処理2の実行に失敗しました。");
  }).always(function(data) {
  });
}

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

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

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

ctp

<?php
// index.ctp
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/test/css/jquery-ui.css">
<script src="/test/js/jquery-3.2.1.js"></script>
<script src="/test/js/jquery-ui.js"></script>
<link rel="stylesheet" href="/test/css/style.css">
<link rel="stylesheet" href="/test/css/test.css">
<script src="/test/js/common.js"></script>
<script src="/test/js/test.js"></script>
</head>
<body>
<span id="check-csv-url" class="DisplayNone">
  <?= $this->Url->build(['action' => 'checkCsv']) ?>
</span>
<span id="regit-dep-csv-url" class="DisplayNone">
  <?= $this->Url->build(['action' => 'regitDepCsv']) ?>
</span>

<?=$this->Form->create(null, ['type' => 'file','url' => ['action' => 'check_csv'],'onsubmit' => 'return false;', 'name' =>'frmReadDep', 'id' =>'frmReadDep', 'enctype' => 'multipart/form-data' ])?>
  <input id="filReadDep" name="filReadDep" type="file" value="" onChange="chgReadDep()" class="DisplayNone" />
  <button class="btnMa mt5px" onClick="imgReadDep()"><?= $this->Html->image("buttons.png")?></button>
<?= $this->Form->end(); ?>
<input type="hidden" id="hidReadDep" value="dep">
</body>
</html>

controller

<?php

namespace App\Controller;

use Cake\Core\Configure;
use Cake\ORM\TableRegistry;
use Cake\Event\Event;
use Cake\Error\Debugger;
use App\Controller\AppController;

class TestController extends AppController
{
  public function index(...$path)
  {
  }

  /*
   * CSV内容チェック
   */
  public function checkCsv(...$path)
  {
    $result = [
      "check" => false,
      "result" => false,
      "message" => ""
    ];

    // 処理
    // 処理に成功した場合に
    // $result['check'] = true;
    $this->autoRender = false;
    echo json_encode($result);
  }

    public function index(...$path)
  {
  }

  /*
   * CSV内容登録
   */
  public function readDepRegist(...$path)
  {
    $result = [
      "check" => false,
      "result" => false,
      "message" => ""
    ];

    // 処理
    // 処理に成功した場合に
    // $result['check'] = true;
    $this->autoRender = false;
    echo json_encode($result);
  }
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • yambejp

    2018/01/18 21:43

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

    キャンセル

  • taiyo-2017

    2018/01/19 09:41

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

    キャンセル

  • defghi1977

    2018/01/19 09:48 編集

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

    キャンセル

回答 3

+1

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/01/19 09:45

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

    キャンセル

+1

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

check解決した方法

0

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • PHP

    20369questions

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

  • JavaScript

    16447questions

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

  • CakePHP

    2313questions

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

  • Ajax

    1090questions

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