Unidentified error in Jquery

Question

This error occurred in a script of mine, but in my script there is no such line break that the error is showing.

The description of the error is exactly this:

Uncaught Syntax Error: Unexpected Token ILLEGAL

Can anyone tell exactly why this mistake?

The error is happening in the append.

           $(function () {
                $("body").on("click",".voltar", function(){
                    $("#fotos").animate({height: 'toggle'});
                    $("#albuns").animate({height: 'toggle'});
                });  
                $("body").on("click", ".album", function () {
                    $("#albuns").animate({height: 'toggle'});
                    $.ajax({
                        method: 'POST',
                        url: '../codes/album.php',
                        data: {
                            id : $(this).attr('data-id')
                        },
                        success: function (result) {
                            var retorno = JSON.parse(result);
                            $("#fotos").css("display","initial");                            
                            $("#fotos").empty();          
                            $(retorno).each(function(key, value){$("#fotos").append("<div class='col-lg-3 col-sm-3 col-md-3 col-xs-6 center'><img class='img' src=" + retorno[key].URL + "><br /><small>" + retorno[key].NOME + "</small></div>");})
                            $("#fotos").append("<a class='btn btn-default voltar'>Voltar</a>");
                        } // fim success
                    }); // fim ajax                          
                });
            })

One detail I forgot to add is that in linux server my previous codes and those that were suggested do not present any error, even because I tested and works well. But in windows server, in which I need this code, is that it is presenting these errors.

Answer 1

Javascript is line break sensitive, you cannot break lines in the middle of a string delimited by quotation marks, unless you finish the line with the character \, which will ignore the interpretation of the next character, in case the line break.

Example:

var stringLegal = "Essa\
 string\
 é\
 aceitável";
var stringIlegal = "Essa
 aqui
 não"; //dispara Unexpected Token Illegal

Answer 2

Instead of doing the append within the loop, do this only once after finishing the loop.

var html = "";
$(retorno).each(function(key, value) {
  html += "<div class='col-lg-3 col-sm-3 col-md-3 col-xs-6 center'>";
  html += "<img class='img' src=" + retorno[key].URL + " /><br />";
  html += "<small>" + retorno[key].NOME + "</small>";
  html += "</div>";
});

html += "<a class='btn btn-default voltar'>Voltar</a>";
$("#fotos").append(html);

Why do this?

• Organization: it is easier for you to read the code, note that I have separated into lines that "simulate" an identation.
• Performance: calling the append only once is more efficient.
• And finally, you’re sure that your string is error-free.

Answer 3

I managed to solve it, but it was on the basis of the test, I didn’t quite understand why you solved it, but come on:

The code now:

$(function () {
                $("body").on("click",".voltar", function(){
                    $("#fotos").animate({height: 'toggle'});
                    $("#albuns").animate({height: 'toggle'});
                });  
                $("body").on("click", ".album", function () {
                    $("#albuns").animate({height: 'toggle'});
                    $.ajax({
                        method: 'POST',
                        url: '../codes/album.php',
                        data: {
                            id : $(this).attr('data-id')
                        },
                        success: function (result) {
                            var retorno = JSON.parse(result);
                            $("#fotos").css("display","initial");                            
                            $("#fotos").empty();          
                            var html = "";
                                $(retorno).each(function(key, value) {
                                  html += "\<div class='col-lg-3 col-sm-3 col-md-3 col-xs-6 center'>";
                                  html += "<img class='img' src=" + retorno[key].URL + " /><br />";
                                  html += "<small>" + retorno[key].NOME + "</small>";
                                  html += "\</div\>";
                                  });
                                html += "<a class='btn btn-default voltar'>Voltar</a>";
                                $("#fotos").append(html);
                        } // fim success
                    }); // fim ajax                          
                });
            })

Note that on the line the last error was like this before:

html += "</div>";

I just added a backslash inside the tag:

 html += "</div\>";

And it worked properly.

If anyone understood why this, please explain, for though I have solved the problem, I want to understand well what happened, without counting that it can help solve other future problems faster. It will be useful for me and for those who see this question.

Answer 4

Well, if it works on a Linux server and not on a Windows server, it’s likely that the problem is charset. Try deleting this part of the code and manually readjusting it in a different editor in Windows OS. This occurs in many cases because the end of line in DOS is \r\n while on Unix \n, may be that in this server exchange has been added a line break in Unix mode that is not recognized by your editor in Windows, but your browser interprets it.