Problème notification

yosaku
Javascript

Bonsoir, je suis en train de réaliser le tutoriel sur les notifications en JS et je bloque sur une erreur qui doit être toute bête :

Uncaught SyntaxError: Unexpected token ILLEGAL jquery.notif.js:5 sur chrome et :
SyntaxError: unterminated string literal jquery.notif.js:5 sur Firefox.

Voici les codes en question HTML :

<!DOCTYPE HTML>
<html lang="fr" dir="ltr">
<head>
<title>notification</title>
<meta charset="UTF-8">
<meta name="description" content="" />
<link href="/~fruits/css/styles.css" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="/~fruits/img/favicon.png" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta name="keywords" content="... " />
<meta name="author" content=" " />
<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <link rel="stylesheet" href="css/styles-ie.css" media="screen">
<![endif]-->
</head>      
<body>
      <div id="notification">
                <div class="notification">
                        <div class="left"> <div class="icon"> </div></div>
                        <div class="right">
                                    <h2>Titre</h2>
                                    <p>Description</p>
                        </div>
                 </div>
      </div>

</body>
<script type="text/javascript" src="/~fruits/scripts/jquery.notif.js"></script>
<script type="text/javascript" src="/~fruits/scripts/jquery.js"></script>
</html>

et le JS correspondant : 

(function($){
    $.fn.notif = function(options) {
        var options = $.extend({
            html : '<div class="notification">\
                        <div class="left">\ 
                        <div class="icon">\ 
                        \
                        </div>\
                        </div>\
                        <div class="right">\
                                    <h2>Titre</h2>\
                                    <p>Description</p>\
                        </div>\
                 </div>'
        }, options);

        console.log(options);
    }
    $('body').notif({title: 'Mon titre', content: 'Mon contenu', icon : '' })
})(jQuery);

Je vois vraiment pas où est l'erreur, si quelqu'un à une idée.

Cordialement.

7 réponses

antho07
Réponse acceptée

Tu as bien importé jquery?
Il faut le charger dans la page en premier pour éviter les soucis.

antho07

Bonjour et ça :

(function($){

    $.fn.notif = function(options) {
        var html = "<div class=\"notification\">";
        html += "<div class=\"left\">";
        html += "<div class=\"icon\">";
        html += "";
        html +="</div>";
        html += "</div>";
        html +="<div class=\"right\">";
        html += "<h2>Titre</h2>";
        html +="<p>Description</p>";
        html +="</div>";
        html +="</div>";
        var options = $.extend({
            html : html

        }, options);

        console.log(options);
    }
    $('body').notif({title: 'Mon titre', content: 'Mon contenu', icon : '' })

})(jQuery);

Sachant que pour récuperer un template du genre, on peut toujours le mettre en display none dans une div avec l'id template
Puis faire un truc du style 

var html = $('#template').html();
$('#template').remove();

bien cordialement

Antho

yosaku
Auteur

Merci de ta réponse, même comme ça j'ai toujours une erreur a la ligne 5 : Uncaught SyntaxError: Unexpected identifier =(

antho07

Quelle est la ligne ou il plante cette fois?

antho07

La fonction que j'ai donné passe bien pourtant...

yosaku
Auteur

Alors la fonction passe bien juste un seul problème à la ligne 24 :
Uncaught ReferenceError: jQuery is not defined

yosaku
Auteur

Ca marche, vraiment une erreur bidon quoi ! ^^
Merci encore pour ton aide =)