PeriodicalUpdaterのonSuccessで取得したhtmlの要素をjavascriptでいじる方法について

<script type="text/javascript">
        new Ajax.PeriodicalUpdater(
                'ajaxreload',//差し込む場所のid
                'http://~/table',//自動更新するurl
            {
                method: 'get',
                frequency: 2,
                onSuccess: hoge
            }
        )
        function hoge(req, json){
                alert("hello");
                var doc = req.responseXML;
                var members = doc.querySelectorAll('.copy');//読み込んだHTMLのclass="copy"をいじりたい
                （以下略）
                alert("hello222");
        }
</script>

tableのみ自動更新で読み込み表示をさせています。
PeriodicalUpdaterで読み込んだHTMLの要素に対してquerySelectorAllやaddEventListenerを当てるにはどのようにすれば良いのでしょうか？（ajaxでない箇所のhtmlの要素は取得できました）
https://amachang.hatenablog.com/entry/20051125/1132584378
を見てreq.responseXMLにquerySelectorAllを試してみたのですが取得をしてくれませんでした。
上記のコードにしてみるとalert("hello");は表示されるのですがalert("hello");を消してalert("hello222");を記載してみるとこちらは表示がされないので
var doc = req.responseXML;
var members = doc.querySelectorAll('.copy');
で処理が止まってしまっているのかなと思っています。

またhtmlの一部自動更新はPeriodicalUpdaterよりこちらのやり方の方が良いというものがあれば教えて頂きたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは、prototype.jsは詳しくありませんが、サンプルコードを載せてみます。
多分動くと思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8" />
5        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6        <title>Document</title>
7        <script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.min.js"></script>
8        <script type="text/javascript">
9            new Ajax.PeriodicalUpdater(
10                "ajaxreload", //差し込む場所のid
11                "hoge.html", //自動更新するurl
12                {
13                    method: "get",
14                    frequency: 2,
15                    onSuccess: hoge,
16                }
17            );
18            function hoge(req, json) {
19                var doc = new Element("div");
20                doc.innerHTML = req.responseText;
21                //これで指定したエレメントが取得できます。
22                var members = doc.querySelectorAll(".copy"); //読み込んだHTMLのclass="copy"をいじりたい
23                console.log(members);
24                members.forEach((node, i) => {
25                    node.addEventListener("click", (evt) => {
26                        alert(evt);
27                    });
28                    document.body.appendChild(node);
29                });
30            }
31        </script>
32    </head>
33    <body></body>
34</html>

scriptの部分

HTML
1<script type="text/javascript">
2new Ajax.PeriodicalUpdater(
3    "ajaxreload", //差し込む場所のid
4    "hoge.html", //自動更新するurl
5    {
6        method: "get",
7        frequency: 2,
8        onSuccess: hoge,
9    }
10);
11function hoge(req, json) {
12    var doc = new Element("div");
13    doc.innerHTML = req.responseText;
14    //これで指定したエレメントが取得できます。
15    var members = doc.querySelectorAll(".copy"); //読み込んだHTMLのclass="copy"をいじりたい
16    console.log(members);
17    members.forEach((node, i) => {
18        node.addEventListener("click", (evt) => {
19            alert(evt);
20        });
21        document.body.appendChild(node);
22    });
23}
24</script>

投稿2020/06/06 07:36

fake_shibe

総合スコア806

Palo_Punte

2020/06/06 09:42 編集

ご回答ありがとうございます document.body.appendChild(node);はどうして必要になるのでしょうか？

fake_shibe

2020/06/06 10:06

こんにちは、間違えてしまいました。申し訳ないです。以下が正しいかもしれません。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.min.js"></script> <script type="text/javascript"> new Ajax.PeriodicalUpdater( "ajaxreload", //差し込む場所のid "hoge.html", //自動更新するurl { method: "get", frequency: 2, onSuccess: hoge, } ); function hoge(req, json) { window.setTimeout(function () { var members = document.querySelectorAll("#ajaxreload .copy"); console.log(members); members.forEach((node, i) => { node.addEventListener("click", (evt) => { alert(evt); }); }); }); } </script> </head> <body> <div id="ajaxreload"></div> </body> </html>

Palo_Punte

2020/06/06 13:06

おおおお！ ajaxの場合ですとaddEventListenerがずっと効かなくて今日一日中悩んでいたのですが動きました！これはどうしてなのでしょうか？

Palo_Punte

2020/06/06 13:10

それと、document.querySelectorAll(".copy");にしてみても動いたのですがdocument.querySelectorAll("#ajaxreload .copy");はどういうやり方になるのでしょうか？

fake_shibe

2020/06/06 13:27

ajaxで通信が成功すると<div id="ajaxreload"></div>の中に新たに自動更新するurlのHTMLが挿入されます。 onSuccess: hoge, で新たに挿入されたHTMLを取得できます。document.querySelectorAll("#ajaxreload なんとかかんとか")で <div id="ajaxreload"></div>の中に挿入されたエレメントが取れます。取得できたエレメントにaddEventListenerを設定してやればいいです。

fake_shibe

2020/06/06 13:32 編集

document.querySelectorAll("#ajaxreload .copy"); ですが、idがajaxreloadの中にあるクラス名がcopyのものをすべて取得できます。 HTMLが下のようになっているものを取得できます。 <div id="ajaxreload"> <span class="copy"></span>//これを取得できます。 <span class="copy"></span>//これも取得できます。 </div>

Palo_Punte

2020/06/06 13:40

大変申し訳ございません説明不足でした addEventListener以降が効かなくて今日一日悩んでいたのですがwindow.setTimeoutをつけると認識がされるようになりましたどうしてwindow.setTimeoutがあれば認識がされるようになるのでしょうか？

fake_shibe

2020/06/06 13:50

<div id="ajaxreload">にDOMが挿入されるまで、ちょっと時間を置く必要があります。 window.setTimeoutで処理を遅らせています。

Palo_Punte

2020/06/06 14:01

そういう事だったのですねでもhtml部分更新などでググっていてもそのような情報の記載は見当りませんでしたので自力ですと中々難しいですね。１週間は悩んでしまいそうです質問させて頂いて本当に良かったです本当にありがとうございます

行動規範の内容に同意します