weird JavaScript console error

Question

After I upload an js file on my server through FTP none of the functions are executed and I'm getting this error:

Uncaught SyntaxError: Unexpected identifier

When I check to see the code everything is messed up, all the code is on one line something like this:

                $(function(){   var $document = $(document),    $element = $('.navbar-fixed-top'),  className = 'hasScrolled';  $document.scroll(function() {   $element.toggleClass(className, $document.scrollTop() >= 50);   }); $('#home').parallax("60%", 0.7);    $('#services').parallax("60%", 0.7);    $('#skills').parallax("60%", 0.2);  $('#testimonials').parallax("60%", 0.3);    }); $(window).load(function() { $('#portfolio-slider').flexslider({ animation: "fade",  directionNav: true, useCSS: false,  controlNav: false,  }); }); var url ='img/icons.svg';   var c=new XMLHttpRequest(); c.open('GET', url, false); c.setRequestHeader('Content-Type', 'text/xml'); c.send();    document.body.insertBefore(c.responseXML.firstChild, document.body.firstChild)  $(document).ready(function() {  $('.portfolio-item').hover(function(){  $(this).find(".caption").fadeIn(500)    },function(){   $(this).find(".caption").fadeOut(500)   })  $( ".search-btn" ).click(function() {   $( "input.filter__search" ).show( "slow" ); e.preventDefault(); }); var touch = Modernizr.touch,    badIE = $('html').hasClass('lt-ie10');  $('.img-holder').imageScroll({  imageAttribute: (touch === true) ? 'image-mobile' : 'image',    parallax: !badIE,   coverRatio: 0.8,    container: ".bg-portfolio", touch: touch    }); $('.tabs-blog').tabslet({   mouseevent: 'click',    attribute: 'href',  animation: true }); $('.tabs-testimonials').tabslet({   mouseevent: 'click',    attribute: 'href',  animation: true,    autorotate: true,   delay: 9000 }); }); $(window).load(function() { $('.flexslider').flexslider({   animation: "fade",  slideshow:false,    directionNav: false }); var mySwiper = $('.swiper-container').swiper({  mode:'horizontal',  loop: false,    freeMode: true, freeModeFluid: true,    grabCursor: true,   autoplay: 5000, autoplayDisableOnInteraction: true, calculateHeight: true,  resizeReInit: true, scrollbar: {    container : '.swiper-scrollbar',    draggable : true,   hide: false,    snapOnRelease: true }   }); }); $(document).ready(function(){   $('.tabs').tabslet({    mouseevent: 'click',    attribute: 'href',  animation: true,    autorotate: true,   delay: 9000 }); $('.venobox').venobox();    }); new Share(".social-share", {    networks: { facebook: { app_id: "abc123"    }   },  ui: {   flyout:  'bottom center',   button_background: 'none',  button_color:'#fff' });

Which is very weird because in my editor (Sublime Text 2) the code is organized properly.

Here is the code:

    $.scrollIt ({
upKey: 38,
downKey: 40,
scrollTime: 600,
activeClass: 'active',
onPageChange: null,
topOffset: -40
});


$(function(){
var $document = $(document),
$element = $('.navbar-fixed-top'),
className = 'hasScrolled';
$document.scroll(function() {
$element.toggleClass(className, $document.scrollTop() >= 50);
});

$('#home').parallax("60%", 0.7);
$('#services').parallax("60%", 0.7);
$('#skills').parallax("60%", 0.2);
$('#testimonials').parallax("60%", 0.3);
});

$(window).load(function() {
$('#portfolio-slider').flexslider({
animation: "fade",
directionNav: true,
useCSS: false,
controlNav: false,
});
});

var url ='img/icons.svg';
var c=new XMLHttpRequest(); c.open('GET', url, false); c.setRequestHeader('Content-Type', 'text/xml'); c.send();
document.body.insertBefore(c.responseXML.firstChild, document.body.firstChild)

$(document).ready(function() {
$('.portfolio-item').hover(function(){
$(this).find(".caption").fadeIn(500)
},function(){
$(this).find(".caption").fadeOut(500)
})
$( ".search-btn" ).click(function() {
$( "input.filter__search" ).show( "slow" );
e.preventDefault();
});

var touch = Modernizr.touch,
badIE = $('html').hasClass('lt-ie10');
$('.img-holder').imageScroll({
imageAttribute: (touch === true) ? 'image-mobile' : 'image',
parallax: !badIE,
coverRatio: 0.8,
container: ".bg-portfolio",
touch: touch
});

$('.tabs-blog').tabslet({
mouseevent: 'click',
attribute: 'href',
animation: true
});

$('.tabs-testimonials').tabslet({
mouseevent: 'click',
attribute: 'href',
animation: true,
autorotate: true,
delay: 9000
});
});

$(window).load(function() {
$('.flexslider').flexslider({
animation: "fade",
slideshow:false,
directionNav: false
});
var mySwiper = $('.swiper-container').swiper({
mode:'horizontal',
loop: false,
freeMode: true,
freeModeFluid: true,
grabCursor: true,
autoplay: 5000,
autoplayDisableOnInteraction: true,
calculateHeight: true,
resizeReInit: true,
scrollbar: {
container : '.swiper-scrollbar',
draggable : true,
hide: false,
snapOnRelease: true
}
});
});

$(document).ready(function(){
$('.tabs').tabslet({
mouseevent: 'click',
attribute: 'href',
animation: true,
autorotate: true,
delay: 9000
});

$('.venobox').venobox();
});

new Share(".social-share", {
networks: {
facebook: {
app_id: "abc123"
}
},
ui: {
flyout:  'bottom center',
button_background: 'none',
button_color:'#fff'
});

If I'm testing it on Firefox I'm getting this error:

SyntaxError: missing ; before statement

and the code looks messy. What can be wrong ? Is there a JavaScript issue? Is it server related ? Because if I'm testing it locally on Firefox the code looks like in the text editor ( not messy) and receive a different error:

SyntaxError: missing } after property list

UPDATE After I compared the file on the web server with the file from my local machine I've noticed that the file on the web server is missing this:

    $.scrollIt ({
upKey: 38,
downKey: 40,
scrollTime: 600,
activeClass: 'active',
onPageChange: null,
topOffset: -40
});

How can this happen?

Try running your code through jsbeautifier.org then take that output and put it in jshint.com. jsbeautifier makes it look nice, jshint tells you exactly where the issue is. — Jim Hall
– Jim Hall, Commented Jun 11, 2014 at 22:01
I've updated my question with new info and this seems to be the exact problem, please take a look — agis
– agis, Commented Jun 11, 2014 at 22:28

PeterKA · Accepted Answer · 2014-06-12 01:12:18Z

1

Your error I would suspect comes from parts of your code such as the following -- where you overlooked a ; -- see ????. JS can still work even if on one line --- that's how minified versions work. Semi-colons are strictly adhered to:

.... document.body.firstChild)????$(document).ready(function() {.....

Should be: .... document.body.firstChild);$(document).ready(function() {.....

.... $(this).find(".caption").fadeOut(500) })????$(".search-btn").click(function () { ...

Should be:

.... $(this).find(".caption").fadeOut(500) });$(".search-btn").click(function () { ...

And:

.... ui: { flyout: 'bottom center',button_background: 'none',button_color: '#fff' }????);...

Should be:

.... ui: { flyout: 'bottom center',button_background: 'none',button_color: '#fff' }});...

In the absence of line-breaks all there's to tell the JS interpreter where a statement ends is ;

HERE IS ANOTHER EXAMPLE that was so hard for me to catch -- Uncaught SyntaxError: Unexpected identifier

One other grave error --- a missing } at the end --- and now you have to have the parallax plugin added to jQuery away. ---> Other demo

edited Jun 12, 2014 at 1:12

answered Jun 11, 2014 at 22:21

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

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

4 Comments

PeterKA Over a year ago

@agis, two ;'s and a } and the error is gone. I know you've posted your new finding and I can't guess how that would happen. Was it truncated from the tail of the file or chopped off the middle?

agis Over a year ago

It is chopped from the beginning of the file

PeterKA Over a year ago

Wow! You're sure the FTP process is responsible for that? Are you able to replicate the issue? You're aware though that even if that piece was not chopped off, the one-liner would still have thrown the same error?

agis Over a year ago

I've fixed this by adding few " and " where they were missing as like you suggested. And now seems to work fine. Regarding that chopped off code, it was from the FTP because now seems to be there.

shardul94 · Accepted Answer · 2014-06-11 22:25:51Z

0

This error mostly occurs due to encoding issue or new line difference. Try changing your FTP client. FileZilla, a free FTP client, handles such issues pretty well.

https://filezilla-project.org/

answered Jun 11, 2014 at 22:25

shardul94

53 bronze badges

Comments

Denis Ivanov · Accepted Answer · 2014-06-11 22:29:40Z

0

Open the page in Chrome, then find the source file with your javascript and click on {} button, this will format code for you, so you can identify where the error is.

enter image description here

answered Jun 11, 2014 at 22:29

Denis Ivanov

9051 gold badge10 silver badges16 bronze badges

Collectives™ on Stack Overflow

weird JavaScript console error

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related