在属性列表之后丢失}

Question

I am trying to implement a content slider using jQuery in one of my website; however I keep getting this error:

missing } after property list

Here is my code:

<script type='text/javascript'>

featuredcontentslider.init({
id: 'slider1',  
contentsource: ['inline', ''],  
toc: '#increment',  
nextprev: ['prev', 'next'], 
revealtype: 'click', 
enablefade: [true, 0.1],  
autorotate: [true, 3000]
});
</script>

When I click on view source in Firefox I found that the last curly bracket is missing but in the file the code is fine, and using firebug debug console I got this error:

missing } after property list

I tried many things, searched for missing commas, eliminate most of the lines but could not find the source of the problem.

EDIT: Firebug points to this line:

});

as the one with error.

I just checked the script in IE8, Chrome and firefox and in all of the three broweser i get the code like this:

<script type='text/javascript'>

featuredcontentslider.init({
id: 'slider1',  
contentsource: ['inline', ''],  
toc: '#increment',  
nextprev: ['prev', 'next'], 
revealtype: 'click', 
enablefade: [true, 0.1],  
autorotate: [true, 3000]
);  <---- notice the missing bracket
</script>

I also tried to write one line only like so:

featuredcontentslider.init({  id: 'slider1'  });

and still ended up with the same error. In localhost the script works fine, however in the actual website the script is functioning correctly.

I am wondering is there a possibility that other js code in the page might affect the behaviour of this one?

Answer 1

Hmmm... this smells somewhat like a website cache error.

Perhaps the } was missing at one time, and even though you fixed it, your website is still serving the old file.

Have you tried:

• clearing the cache in your browser? (to see if it's browser-side)
• using curl or wget to view the raw javascript file (to see if there's a stale server-side cache)

Answer 2

This usually happens, when a property list is accidentally closed by a ";". Take a look at the following example (which produces the same error):

$('#test').dialog({
    autoOpen: true,
    resizable: true,
    draggable: true,
    width:530,
    modal: true,
    closeOnEscape: true,
    show: {
        effect: 'blind',
        duration: 1000
    },
    hide: {
        effect: 'fold',
        duration: 1000
    });
});

The ); after

hide: { ... }); 

should be removed.

Answer 3

Ok I solved the problem by adding an extra curly bracket but I am not sure why that solved the issue. My final script looks like this:

<script type='text/javascript'>

featuredcontentslider.init({
id: 'slider1',  
contentsource: ['inline', ''],  
toc: '#increment',  
nextprev: ['prev', 'next'], 
revealtype: 'click', 
enablefade: [true, 0.1],  
autorotate: [true, 3000]
   } <--- notice the extra bracket
});
</script>

and it is cross-browser compatible :)