CODEWITHSUNDEEP
javascriptjqueryencoding
user1487380
user1487380

Reputation: 362

Strange trouble with javascript code

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>&#34;); 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 ....

Upvotes: 1

Views: 1503

Answers (3)

user1487380
user1487380

Reputation: 362

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.

Upvotes: 1

jsalonen
jsalonen

Reputation: 30481

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 &#34; 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/

Upvotes: 2

KooiInc
KooiInc

Reputation: 122888

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.

Upvotes: 1

Related Questions