QA@IT

jquery activity indicatorを使ったらA Node was inserted somewhere it doesn't belong

3423 PV

お世話になります
jquery activity indicatorを使って、サイトを作成していたところ
表題のエラーが、jquery activity indicator自体で発生してしまい、
何ともしがたい状況になっております。

そもそも上記のエラーがよくわかってないのですが、どういったときに起きるエラーなのでしょうか
ご教示お願いいたします。

  • 補足追記しました。 -

回答

昨日たまたま同じ問題に直面したのでfixしてpull request送りました。
自分の場合はinsertRuleが問題でした。
どうやらinsertRuleがstyle sheetの先頭行にruleを追加するみたいで、先頭行に@charsetなどが書かれていた場合は正しく動かなくなるみたいでした。
参考になるかわかりませんが載せておきます。

@@ -140,6 +140,7 @@
         if (!animations[steps]) {
           var name = 'spin' + steps;
           var rule = '@-webkit-keyframes '+ name +' {';
+          var style = document.createElement('style');
           for (var i=0; i < steps; i++) {
             var p1 = Math.round(100000 / steps * i) / 1000;
             var p2 = Math.round(100000 / steps * (i+1) - 1) / 1000;
@@ -147,7 +148,13 @@
             rule += p1 + value + p2 + value; 
           }
           rule += '100% { -webkit-transform:rotate(100deg); }\n}';
-          document.styleSheets[0].insertRule(rule);
+          style.type = 'text/css';
+          if (style.styleSheet) {
+            style.styleSheet.cssText = rule;
+          } else {
+            style.appendChild(document.createTextNode(rule));
+          }
+          document.getElementsByTagName('head')[0].appendChild(style);
           animations[steps] = name;
         }
         el.css('-webkit-animation', animations[steps] + ' ' + duration +'s linear infinite');

https://github.com/neteye/jquery-plugins/pull/59/files

編集 履歴 (0)
  • まさにこれと同じ問題でした!
    そうですよね。ギッハブですもんね。修正してリクエスト送るのありですよね。
    ありがとうございます!
    -

jquery activity indicatorのエラー解決については Chan-teraさんの回答を参照してください。
ここではA Node was inserted somewhere it doesn't belongエラーについて説明しています。

コードがないと何とも言えませんが、手軽にそのエラーを起こすなら
以下の様にすれば起こせると思います。

<div>
    <div></div>
</div>
$("div div").append($("div"));
// $("div > div").append($("div"));  // これでも起きます。

http://jsfiddle.net/j2qZA/

ノードの従属関係がおかしくなる場合ですね。


追記しました

上のHTMLにおいて $("div div").parent()[0] == $("div")[0] が成り立ちます([0]はjQueryオブジェクトではなくNodeを取得するため)。
つまり $("div div")$("div") の子であるという事です。
子である要素に、親である要素を追加すると、どちらも親でどちらも子であるという矛盾した関係になります。

jQueryではないただのjavascriptの場合は以下の様になります。

<!--idつけました-->
<div id="p">
    <div id="c"></div>
</div>
var parentDiv = document.getElementById("p");
var childDiv = document.getElementById("c");
// console.log(childDiv.parentNode == parentDiv); // trueが出る
childDiv.appendChild(parentDiv);

さっきと同じことですが、これでエラーが起きなかった場合、parentDiv は childDiv の「親でもあり子でもある」 を満たさなければならず矛盾します。
実際には矛盾するというエラーではなくて、「ノードがふさわしくない場所に挿入された」というエラーですが、この例ではそういうことです。

編集 履歴 (3)
  • 失礼しました。
    追加情報を記載します

    また、不勉強で申し訳ないのですが、ノードの従属関係がおかしくなるとはどういうことでしょうか??

    上記の例の場合

    <div>
    <div><div></div></div>
    </div>

    になるだけではないのでしょうか??
    -
  • なるほどです。理解しました。ありがとうございます -

追加情報でソースを記載します

<table>
・・・
<tr>
<td><div id="count1"></div>人</td>
</tr>
</table>

上記コード上に

$('#count'+i).activity();

*iはループを回しているため、0とか1が入ります。

よろしくお願いいたします

編集 履歴 (0)
  • これだけではおきないですが、$('#countN')に対して値を挿入する部分のコード( activityで待たせた後、非同期でロードかなにかして何人かを示す値をセットしてると思いますが、そのセットの部分だけでも構いません)も示せますか? -
  • また新しく追記します。よろしくお願いします -
  • すみません、解決しました!activity-indicatorが悪さしてました -
  • 了解しました。 -

以下ソースコードで受け取ったところで、インジケータを解除してます

var param = '';
        param += 'mode=getmatchingcount';
        param += '&manuscriptid='+manuscriptid; //蜴溽ィソID
        $.ajax({
            url:'/ajax',
            dataType:'json',
            data : param,
            success: function(data) {
                //$('#count'+id).activity(false);
                var count = data.ResultSet.totalResultsReturned;
                $('#count'+id).text(count);
                $('#countview'+id).val(1);
            },
            error : function(){
                console.log("test");
            }
        })
編集 履歴 (1)
ウォッチ

この質問への回答やコメントをメールでお知らせします。