Question

I have this code in Jquery and work fine, but the only problem is don´t change de div on a page

   $("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 function return this: <span> Popularidad:</span> {{ total }}

so I have to change this div: first

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

and second

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

firebug throw this error

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

fragment = context.createDocumentFragment();

but don´t do it. Any idea.

Answer 1

I just ran into a similar problem myself, and since I could not find a solution anywhere else… here it is! (please imagine a suitably impressive drum roll)

What is happening

The error message is not very expressive, if not misleading. This is what it should say:

A jQuery function received an object that is not a valid jQuery object (but should be)

Now, it is actually not that easy to get to this point, as jQuery falls back to an “empty” object in almost all cases. However, expressions similar to the following should get you to the error reliably:

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

Oddly enough, these do not throw an error:

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

I have not dug much deeper into this, but I think it is quite safe to say that any attempt at manipulation of the DOM will throw this error if the context is not a valid jQuery object.

The specific problem of this question is that in the ajax success function, this is not the html element, but the ajax event object. So the expression $(this) does not return a valid jQuery object, and subsequently calling $(this).text() (or most anything actually) will cause exactly this error.

You can easily reproduce the error with the following line

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

The solution

So what you have to do is just save the context from the click() function in an upvalue like this:

$("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()
    });
});

How to find the line that really causes the error (using Firebug)

Since the QA did not seem to know how to find the correct code line, here is a short guide:

• Repeat the action that causes the error (or reload if it happens on page load)
• right-click on the error and select break on this error in the context menu
• repeat the action that caused the error
• In the script view (Firebug should open it automatically), click on the (step out) button until the script view jumps to a line that is not in jquery-*.js

The “Syntax error”

In the original code there was a “syntax error”. However, twig probably replaced it with different code that does not contain single quotes before the javascript actually was executed, thus the syntax error would not appear when opening the site in a browser. However, it is still a good idea to write syntactically correct code.