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

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

ただいまの
回答率

88.57%

イベント発生が繰り返されると、イベント後の処理が行われない場合がある

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 531

sakura-shi

score 23

やりたいこと

mouseoverのイベント発生時にポップアップを表示させているが、少しマウスを動かしただけでも
当然イベントが発生し、その
イベント発生時に、呼び出し先のポップアップでは、ロードのタイミングで内部で売上明細を取得し表示させる処理を行っている。

(1)マウスポインタが金額セル上に移動した時には、直ちに移動先のセルでポップアップを表示するようにしたい

問題点

挙動として、1,2回のポイントではわかりにくい問題ですが、金額セルでポイントを何度か繰り返してみると、「Please wait...」の表示のまま、そのまま待ってもなにもポップアップの内容が表示されない、という問題がでている。

やってみたこと

ここでは小さなサイズのtableを掲載していますが、実際はもっと大きなtable。
■呼び出し側

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="description" content="popModal - jquery plugin for showing tooltips, titles, modal dialogs and etc">
<meta name="keywords" content="popup, dialog, notification-popups, modal-dialogs, html, javascript, notifications, modal, notify, confirm">
<title>popModal</title>

<style>
* {margin:0;font-family:Roboto,sans-serif;outline:0;box-sizing:border-box;font-size:14px}
body {background:#f1f1f1}

::-webkit-scrollbar {width:10px}
::-webkit-scrollbar-track {background-color:#f1f1f1}
::-webkit-scrollbar-thumb {background-color:#9699a2}
::-webkit-scrollbar-thumb:hover {background-color:#555}

#page {margin:30px auto 60px;width:40%;min-width:800px;min-height:500px}
#page_content {background:#fff;box-shadow:0 1px 5px #ccc;margin:20px 0 20px;border-radius:3px;position:relative;padding:30px 30px 60px}

@media (max-width: 840px){
#page {width:auto;min-width:0;margin:20px 20px 100px}
}
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500">
<link type="text/css" rel="stylesheet" href="popModal.css">
</head>
<body>
<div id="page">
  <div id="header">
    <div class="prjName">popModal</div>
    <div id="page_content">
      <div class="page_container">
        <div class="page" data-page="popModal">
    <div class="exampleContainer">
    <div class="exampleLive">
    <p>日別売上表</p>
<table border="1">
<tr>
  <th>日付/社名</th><th>A社</th><th>B社</th><th>C社</th>
</tr>
<tr data-date="2018-10-01">
  <td>2018-10-01</td>
  <td><span data-cc="100">123,000円</span></td>
  <td><span data-cc="101">456,000円</span></td>
  <td><span data-cc="102">789,000円</span></td>
</tr>
<tr data-date="2018-10-02">
  <td>2018-10-02</td>
  <td><span data-cc="100">123,000円</span></td>
  <td><span data-cc="101">456,000円</span></td>
  <td><span data-cc="102">789,000円</span></td>
</tr>
<tr data-date="2018-10-03">
  <td>2018-10-03</td>
  <td><span data-cc="100">123,000円</span></td>
  <td><span data-cc="101">456,000円</span></td>
  <td><span data-cc="102">789,000円</span></td>
</tr>
<tr data-date="2018-10-04">
  <td>2018-10-04</td>
  <td><span data-cc="100">123,000円</span></td>
  <td><span data-cc="101">456,000円</span></td>
  <td><span data-cc="102">789,000円</span></td>
</tr>
<tr data-date="2018-10-05">
  <td>2018-10-05</td>
  <td><span data-cc="100">123,000円</span></td>
  <td><span data-cc="101">456,000円</span></td>
  <td><span data-cc="102">789,000円</span></td>
</tr>
<tr data-date="2018-10-06">
  <td>2018-10-06</td>
  <td><span data-cc="100">123,000円</span></td>
  <td><span data-cc="101">456,000円</span></td>
  <td><span data-cc="102">789,000円</span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

<script src="./js/jquery-2.1.4.min.js"></script>
<script src="popModal.js"></script>
<script>
jQuery(function($){
  $('[data-cc]').mouseover(function(){
    $('#popModal_result').remove();
    $(this).popModal({
      html : {    url: '/example/list',
        method: 'GET',
        data: {    'cc': encodeURIComponent($(this).attr('data-cc')),
                'date': encodeURIComponent($(this).attr('data-date')) },
        dataTYpe: 'html',
        loadingText: 'Please wait...',
        errorText: 'An error has occurred'
            }
    });
    $('.popModal').css({top:"",left:""}).on('click',function(e){
      e.stopPropagation();
    });
});
//});

    $(window).scroll(function(){
      getActivePage();
    });
    getActivePage();

    function getActivePage() {
      var nav = $('.page');
      for (var i = 0; i < nav.length; i++) {
        if ($(nav[i]).outerHeight() + $(nav[i])[0].getBoundingClientRect().top > $(window).height()*0.7) {
          $('.tab').removeClass('active');
          $('.tab[data-tab="' + $(nav[i]).attr('data-page') + '"]').addClass('active');
          break;
        }
      }
    }

});
</script>
</body>
</html>

https://github.com/vadimsva/popModal/releases
からダウンロードしたファイルを参考にしています

■呼び出される側

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>売上明細</title>
<script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
<script>
$(function(){
  $(document).ready( function(){
    var cc = $("#cc").val();
    var date = $("#date").val();
    console.log("cc===" + cc);
    console.log("date===" + date);
    $.ajax({
      url: "/example/get-list",
      method: "POST",
      data: { cc: cc,
              date: date,
      },
      dataType: 'json',
    }).done(function(data) {
     $("#results").html(data.output);
    }).fail(function(data) {
      console.log(data);
    });
});
});
</script>

</head>
<body>
<div id="content">
  <div id="content-wrapper" style="max-height:400px;overflow-y:auto;">
<form>
<table width="400" border="1">
<tr>
  <td valign="top" style="text-align:left;">
  日付:<? echo $_GET['date']; ?> / 
  売上先:[<? echo $_GET['cc']; ?>]
  <input type="hidden" name="cc" id="cc"  value="<?php echo $_GET['cc']; ?>">
  <input type="hidden" name="date" id="date" value="<?php echo $_GET['date']; ?>">
  </td>
</tr>
</table>
</form>
  <div id="results" class="pos-left" style="width:400px;"></div>
  <div class="loading">
    <div class="loading_icon"></div>
  </div>
  </div>
</div>
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • 退会済みユーザー

    退会済みユーザー

    2018/10/29 01:28

    DOS攻撃対策のアクセス制限です。詳しくは調べてみてください。ちなみに私のほうで適当に試した分は、うまいこと動いてます。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/10/29 01:42

    また、挙動について質問される際は、状況を共有できるよう動くコードを示されたほうがよいかと。popModalで開くhtmlの問題かもしれませんし。

    キャンセル

  • sakura-shi

    2018/10/29 13:55 編集

    いくつかセルにポイントを繰り返すと、「Please wait...」となりそれ以上なにも画面の状態が変わらないのは、呼び出し側の問題ということでしょうか?たしかに呼び出し側ではやや処理は重いのですが。。。原因がわかりません。どなたかお願いできますか?

    キャンセル

回答 1

checkベストアンサー

+1

(PHPに関しては用意してませんが、)簡単なサーバーを立てて試したところ「Please wait ...」と表示されることはありませんでした。

そこでコードを見直して、考えてみました。
憶測ですが…(見当違いならごめんなさいね)

popModalに「Please wait ...」と表示されるということは、popModalを呼び出す際のajaxがタイムアウトしないままサーバー応答を待っていると考えられます。

そこから、サーバーがリクエストを持ったまま返していないと考えられます。
一度、サーバーの通信履歴か何かを確認して、受けたリクエストに対して、そのリクエストを返されているかどうかを確認してください。

…とそんな感じで流れを順に追って調査していけばよいかと。

また、あまりに頻繁にリクエストが発生することを避けるため、0.3秒に一回しかリクエストを送らないような仕組みを導入してもいいかもしれません。RxJSライブラリのThrottleなどが有用かと。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/10/31 12:00

    ありがとうございます。

    キャンセル

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

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

関連した質問

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