Uncaught SyntaxError: Unexpected token . when using ClassNotty

Question

I'm attempting to implement this example found here : ClassyNotty , I've imported the necessary references for the css and js.

If I do $.ClassNotty in the chrome console the js script is accessible, any idea?

 <h:head>
   <script  src="#{request.contextPath}/resources/js/jquery.classynotty.min.js"></script>
   <link rel="stylesheet" href="#{request.contextPath}/resources/css/jquery.classynotty.min.css"></link>
 </h:head>

---

<div>
  <a id="sample1" href="#">Messages!</a>
  <script>
    $(document).ready(function(){
     $("#sample1").click({
        $.ClassyNotty({
            title : 'Title',
            content : 'This is a notification'
           });
        });
     });                
  </script>
</div>

Answer 1

The error is because the .click() argument is an Object literal, {...} , which expects to contain key: value pairs rather than statements like $.ClassyNotty(...) .

$("#sample1").click({
    $.ClassyNotty({ /* ... */ });
  // ^ the parser expected a `:` here to separate a key and value
});

The argument to .click() should be a function instead, which does allow statements.

$("#sample1").click(function () {
  $.ClassyNotty({ /* ... */ });
});