Strange trouble with javascript code

Question

I have one simple code :

$(document).ready(function(){
    $(".button").click(function(){
        var f = $(this).closest('form');
        if(f != null){
            $(f).append('<div class="loadmask"></div>');                        
        }
    });
});

as you can see, I want to append a div with class 'loadmask' to the parent form. The strange thing here $(f).append('<div class="loadmask"></div>'); had been encoded to $(f).append("<div class="loadmask"></div>"); and throws a javascript error.

UPDATE:

I have change my code to

$(document).ready(function(){           
            $(".button").click(function(){
                $(this).parent('form').append("<div class='loadmask'></div>");
            });
         });

still get javascript error:

SyntaxError: missing ) after argument list
[Break On This Error]   

$(this).parent('form').append("<div class="loadmask"></div>&#34;);

and at eclipse console:

00:57:17,593 ERROR [MinifierUtil:108] 22: 65: missing ) after argument list
00:57:17,593 ERROR [MinifierUtil:108] 22: 79: unterminated string literal
00:57:17,593 ERROR [MinifierUtil:108] 1: 0: Compilation produced 2 syntax errors.
00:57:17,593 ERROR [MinifierUtil:74] JavaScript Minifier failed for  


         $(document).ready(function(){          
            $(".button").click(function(){
                $(this).parent('form').append("<div class="loadmask"></div>&#34;);
            });
         });

I use eclipse Juno (ecoding project with UTF-8), liferay 6.1 ga-1 and jsf-2.0, icefaces-3 ....

Check the closing quotes '. Did you copy paste it from somewhere? " translates to " — kayen
– kayen, Commented Oct 16, 2012 at 11:04
You could consider using .parents() instead of .closest(). Here's why - closest() tests the element itself and then traverses upwards through its ancestors in the DOM tree; while parents() immediately skips checking the element itself and directly starts evaluating the parents for a match. — Kent Pawar
– Kent Pawar, Commented Oct 16, 2012 at 11:18
@jsalonen: SyntaxError: unterminated string literal [Break On This Error] $(f).append('<div class="loadmask"></div>'); — user1487380
– user1487380, Commented Oct 17, 2012 at 0:43

jsalonen · Accepted Answer · 2012-10-16 11:11:14Z

2

I cannot reproduce your problem. What I suspect is that for some reason there is an additional character encoded in your JavaScript file that gets represented as " by jQuery. &#34 happens to be the entity for quotation mark (") so make sure you don't have that as an extra in your code. Try cleaning your JavaScript source file and try again.

Also note that closest never returns null. If form element is not found, an empty list is returned (this can be easily verified by running the code on a formless page). Thus you could safely write your code simply as:

$(document).ready(function(){
    $(".button").click(function(){
        $(this).closest('form').append('<div class="loadmask"></div>');
    });
});

See this Fiddle for a proof: http://jsfiddle.net/p48Rb/3/

edited Oct 16, 2012 at 11:11

answered Oct 16, 2012 at 11:05

jsalonen

30.7k15 gold badges93 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KooiInc · Accepted Answer · 2012-10-16 11:06:15Z

1

Try using if (f.length), because $(this).closest('form') returns a jQuery object which either has length > 0 (form is the first element) or not (length 0 evaluates to falsy). In other words, f is never null.

answered Oct 16, 2012 at 11:06

KooiInc

124k32 gold badges145 silver badges181 bronze badges

Comments

user1487380 · Accepted Answer · 2013-03-13 03:12:10Z

1

I really dont know why, but it seem that my xhtml (jsf2.0) can not decode html char inside script code.

(& symbol on && operator will raise the same error)

just change

$(this).parent('form').append("<div class="loadmask"></div>"); to $(this).parent('form').append("div").addClass("loadmask");

and with &, use a child if statement instead of && will solve its issue.

answered Mar 13, 2013 at 3:12

user1487380

3624 gold badges9 silver badges26 bronze badges

Collectives™ on Stack Overflow

Strange trouble with javascript code

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related