1

このコードは Jquery にあり、正常に動作しますが、唯一の問題は、ページの div を変更しないことです

   $("a[rel^='meGusta']").click(function(){
            var usuario= $(this).data('usuario');
            var idea= $(this).data('idea');
            // llamada ajax
            $.ajax({
                url: '{{path('votarIdea')}}',
                data: {user: usuario, idea: idea},
                type: 'POST',
                dataType: 'html',
                success: function(){
                    var str= $(this).text().trim();
                    if (str == 'Me gusta'){
                        $(this).text("No me gusta");
                    }else{
                        $(this).text("Me gusta");
                    }

                    $('.popularityPopularidad').load('cambioVoto.html.twig');
                }
                //error: noCambio()
            });

votarIdea 関数はこれを返します:<span> Popularidad:</span> {{ total }}

だから私はこのdivを変更する必要があります：まず

<div class="popularityPopularidad">
    <span> Popularidad:</span> {{ votaciones[idea.getId()] }}
</div>

そして2番目

 <a href="#" rel="meGusta{{num}}" data-usuario="{{ usuario }}" data-idea= "{{idea.getId()}}">
        {% if (opc)%}
            No me gusta
        {% else%}
            Me gusta
        {% endif %}
        </a>

ファイアバグはこのエラーをスローします

TypeError: context.createDocumentFragment is not a function
error source line:
[Parar en este error]   

fragment = context.createDocumentFragment();

しかし、それをしないでください。何か案が。

4

1 に答える 1

5

私は自分自身で同様の問題に遭遇しました.どこにも解決策が見つからなかったので...ここにあります! （適切に印象的なドラムロールを想像してください）

何が起こっている

エラーメッセージは、誤解を招くものではないにしても、あまり表現的ではありません。これは言うべきことです：

jQuery 関数が、有効な jQuery オブジェクトではないオブジェクトを受け取りました (ただし、そうである必要があります)。

jQuery はほとんどの場合、「空の」オブジェクトにフォールバックするため、ここまでたどり着くのは実際にはそれほど簡単ではありません。ただし、次のような式を使用すると、確実にエラーが発生するはずです。

$({}).text("asb");
$({}).append("<p></p>");

奇妙なことに、これらはエラーをスローしません。

$({}).text(); // returns ""
$({}).html(); // returns undefined

これについてはあまり深く掘り下げていませんが、コンテキストが有効な jQuery オブジェクトでない場合、DOM を操作しようとすると、このエラーがスローされると言っても過言ではありません。

この質問の具体的な問題は、ajax 成功関数でthisは、html 要素ではなく、ajax イベント オブジェクトであることです。そのため、式$(this) は有効な jQuery オブジェクトを返さず$(this).text()、その後(または実際にはほとんどすべて) を呼び出すと、まさにこのエラーが発生します。

次の行でエラーを簡単に再現できます

$.get("VALID URL", function(){ $(this).append("foo"); }, "text");

ソリューション

したがってclick()、次のように、関数からのコンテキストを上位値に保存するだけです。

$("a[rel^='meGusta']").click(function(){
    var usuario= $(this).data('usuario');
    var idea= $(this).data('idea');
    var self = this; // <-- NEW LINE

    // llamada ajax
    $.ajax({
        url: "{{path('votarIdea')}}", // <-- Syntax error (see below)
        data: {user: usuario, idea: idea},
        type: 'POST',
        dataType: 'html',
        success: function(){
            var str= $(self).text().trim(); // <-- CHANGED LINE
            if (str == 'Me gusta'){
                $(self).text("No me gusta"); // <-- CHANGED LINE
            }else{
                $(self).text("Me gusta"); // <-- CHANGED LINE
            }

            $('.popularityPopularidad').load('cambioVoto.html.twig');
        }
        //error: noCambio()
    });
});

本当にエラーの原因となっている行を見つける方法 (Firebug を使用)

QA は正しいコード行を見つける方法を知らなかったようです。以下に簡単なガイドを示します。

  • エラーの原因となったアクションを繰り返します (または、ページの読み込み時にエラーが発生した場合は再読み込みします)。
  • エラーを右クリックし、コンテキスト メニューで[このエラーで中断] を選択します。
  • エラーの原因となったアクションを繰り返す
  • スクリプト ビュー (Firebug が自動的に開くはずです) で、スクリプト ビューが含まれていない行にジャンプするまで (ステップ アウト) ボタンをクリックしますステップアウト (Shift+F11)。jquery-*.js

「構文エラー」

元のコードには「構文エラー」がありました。ただし、twig はおそらく、javascript が実際に実行される前に単一引用符を含まない別のコードに置き換えたため、ブラウザーでサイトを開いたときに構文エラーは表示されませんでした。ただし、構文的に正しいコードを作成することをお勧めします。

于 2012-11-28T23:33:33.683 に答える