1. #1
    Membre du Club
    Profil pro
    Inscrit en
    décembre 2011
    Messages
    51
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : décembre 2011
    Messages : 51
    Points : 48
    Points
    48

    Par défaut Javascript qui ne s'execute pas

    Bonjour à tous,

    Je débute dans le développement Web en regardant un des tutos PHP de Honoré HOUNWANOU sur Youtube (sans vouloir faire de pub, ce mec est bluffant dans sa manière d'expliquer).
    A un moment donné, il insère deux toutes petites lignes de JS à la fin du code...mais ça ne marche pas
    Ce que doit faire cette fonction est simple, c'est utiliser une lib nommé tabby pour autoriser la tabulation dans un textarea.
    Et je ne vois absolument pas le problème et je ne sais pas où trouver un quelconque log des erreurs s'il y en a. J'ai passé 2h à m'exciter là-dessus et comme je suis sur le point de me flageller à coup de ciboulette, je viens vers vous pour trouver ce qui à tous les coups doit être une évidence (style, le ; ou le " qui manque).

    Ci-dessous, les lignes qui sont responsables de mon tourment! Elles sont à la fin, juste avant la balise de fermeture du body.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <script>
     
    $("#code").height($(window).height(400) - 50);
    $("#code").tabby();
     
    </script>
    Et voici le code de la page produit par le navigateur (Opera 47.0)

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
     
    <!DOCTYPE html>
    <html lang="fr">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
            <meta name="description" content=PiouPiou Network !>        <meta name="author" content="Damien">
     
            <title>PiouPiou Network !</title>
            <!-- Bootstrap core CSS -->
            <link href="./assets/css/bootstrap.min.css" rel="stylesheet">
            <link href="./assets/css/main.css" rel="stylesheet">
            <link href="./assets/css/parsley.css" rel="stylesheet">
            <link href="./libraries/font-awesome/css/font-awesome.min.css" rel="stylesheet">
            <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
     
     
     
            <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
            <!--[if lt IE 9]>
              <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
              <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
            <![endif]-->
     
     
     
        </head>
        <body>
     
     
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.php">PiouPiou Network !</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class=""><a href="index.php">Accueil</a></li>
                                        <li class=""><a href="profil.php?id=2">Profil</a></li>
                        <li class="active"><a href="share.php?id=2">Partager</a></li>
                                        <li class=""><a href="logout.php">Déconnexion</a></li>
                    <!-- Variante plus simple avec un ternaire -->
                    <!-- on remplace set_rubrique('page'); par ($title == 'Inscription') ? 'active' : ''; -->
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>        <div class="main-content">
     
        <div id="share">
            <form action="" method="POST" autocomplete="off">
     
                <textarea name="code" id="code" required="required">0</textarea>
     
                <div class="btn-group options">
     
                    <input class="btn btn-danger" type="submit" value="Tout effacer !" name="delete" />
                    <input class="btn btn-success" type="submit" value="Sauvegarder" name="save" />
     
                </div>
     
            </form>
        </div>
    </div>
     
    <script src="/assets/js/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     
    <script src="/assets/js/tabby.js"></script>
     
     
    <script>
     
    $("#code").height($(window).height(400) - 50);
    $("#code").tabby();
        
    </script>
    </body>
     
    </html>
     
    <!-- Pas de footer -->

    et la lib Tabby en question

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    /*
     *	Tabby jQuery plugin version 0.12
     *
     *	Ted Devito - http://web.archive.org/web/20110716201529/http://teddevito.com/demos/textarea.html
     *
     *	Copyright (c) 2009 Ted Devito
     *	 
     *	Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following 
     *	conditions are met:
     *	
     *		1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
     *		2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer  
     *			in the documentation and/or other materials provided with the distribution.
     *		3. The name of the author may not be used to endorse or promote products derived from this software without specific prior written 
     *			permission. 
     *	 
     *	THIS SOFTWARE IS PROVIDED BY THE AUTHOR ``AS IS'' AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 
     *	IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE AUTHOR BE 
     *	LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 
     *	PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 
     *	THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT 
     *	OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     *
     */
     
    // create closure
     
    (function($) {
     
    	// plugin definition
     
    	$.fn.tabby = function(options) {
    		//debug(this);
    		// build main options before element iteration
    		var opts = $.extend({}, $.fn.tabby.defaults, options);
    		var pressed = $.fn.tabby.pressed; 
     
    		// iterate and reformat each matched element
    		return this.each(function() {
    			$this = $(this);
     
    			// build element specific options
    			var options = $.meta ? $.extend({}, opts, $this.data()) : opts;
     
    			$this.bind('keydown',function (e) {
    				var kc = $.fn.tabby.catch_kc(e);
    				if (16 == kc) pressed.shft = true;
    				/*
    				because both CTRL+TAB and ALT+TAB default to an event (changing tab/window) that 
    				will prevent js from capturing the keyup event, we'll set a timer on releasing them.
    				*/
    				if (17 == kc) {pressed.ctrl = true;	setTimeout("$.fn.tabby.pressed.ctrl = false;",1000);}
    				if (18 == kc) {pressed.alt = true; 	setTimeout("$.fn.tabby.pressed.alt = false;",1000);}
     
    				if (9 == kc && !pressed.ctrl && !pressed.alt) {
    					e.preventDefault; // does not work in O9.63 ??
    					pressed.last = kc;	setTimeout("$.fn.tabby.pressed.last = null;",0);
    					process_keypress ($(e.target).get(0), pressed.shft, options);
    					return false;
    				}
     
    			}).bind('keyup',function (e) {
    				if (16 == $.fn.tabby.catch_kc(e)) pressed.shft = false;
    			}).bind('blur',function (e) { // workaround for Opera -- http://web.archive.org/web/20110716201529/http://www.webdeveloper.com/forum/showthread.php?p=806588
    				if (9 == pressed.last) $(e.target).one('focus',function (e) {pressed.last = null;}).get(0).focus();
    			});
     
    		});
    	};
     
    	// define and expose any extra methods
    	$.fn.tabby.catch_kc = function(e) { return e.keyCode ? e.keyCode : e.charCode ? e.charCode : e.which; };
    	$.fn.tabby.pressed = {shft : false, ctrl : false, alt : false, last: null};
     
    	// private function for debugging
    	function debug($obj) {
    		if (window.console && window.console.log)
    		window.console.log('textarea count: ' + $obj.size());
    	};
     
    	function process_keypress (o,shft,options) {
    		var scrollTo = o.scrollTop;
    		//web.archive.org/web/20110716201529/http://var/ tabString = String.fromCharCode(9);
     
    		// gecko; o.setSelectionRange is only available when the text box has focus
    		if (o.setSelectionRange) gecko_tab (o, shft, options);
     
    		// ie; document.selection is always available
    		else if (document.selection) ie_tab (o, shft, options);
     
    		o.scrollTop = scrollTo;
    	}
     
    	// plugin defaults
    	$.fn.tabby.defaults = {tabString : String.fromCharCode(9)};
     
    	function gecko_tab (o, shft, options) {
    		var ss = o.selectionStart;
    		var es = o.selectionEnd;	
     
    		// when there's no selection and we're just working with the caret, we'll add/remove the tabs at the caret, providing more control
    		if(ss == es) {
    			// SHIFT+TAB
    			if (shft) {
    				// check to the left of the caret first
    				if ("\t" == o.value.substring(ss-options.tabString.length, ss)) {
    					o.value = o.value.substring(0, ss-options.tabString.length) + o.value.substring(ss); // put it back together omitting one character to the left
    					o.focus();
    					o.setSelectionRange(ss - options.tabString.length, ss - options.tabString.length);
    				} 
    				// then check to the right of the caret
    				else if ("\t" == o.value.substring(ss, ss + options.tabString.length)) {
    					o.value = o.value.substring(0, ss) + o.value.substring(ss + options.tabString.length); // put it back together omitting one character to the right
    					o.focus();
    					o.setSelectionRange(ss,ss);
    				}
    			}
    			// TAB
    			else {			
    				o.value = o.value.substring(0, ss) + options.tabString + o.value.substring(ss);
    				o.focus();
    	    		o.setSelectionRange(ss + options.tabString.length, ss + options.tabString.length);
    			}
    		} 
    		// selections will always add/remove tabs from the start of the line
    		else {
    			// split the textarea up into lines and figure out which lines are included in the selection
    			var lines = o.value.split("\n");
    			var indices = new Array();
    			var sl = 0; // start of the line
    			var el = 0; // end of the line
    			var sel = false;
    			for (var i in lines) {
    				el = sl + lines[i].length;
    				indices.push({start: sl, end: el, selected: (sl <= ss && el > ss) || (el >= es && sl < es) || (sl > ss && el < es)});
    				sl = el + 1;// for "\n"
    			}
     
    			// walk through the array of lines (indices) and add tabs where appropriate						
    			var modifier = 0;
    			for (var i in indices) {
    				if (indices[i].selected) {
    					var pos = indices[i].start + modifier; // adjust for tabs already inserted/removed
    					// SHIFT+TAB
    					if (shft && options.tabString == o.value.substring(pos,pos+options.tabString.length)) { // only SHIFT+TAB if there's a tab at the start of the line
    						o.value = o.value.substring(0,pos) + o.value.substring(pos + options.tabString.length); // omit the tabstring to the right
    						modifier -= options.tabString.length;
    					}
    					// TAB
    					else if (!shft) {
    						o.value = o.value.substring(0,pos) + options.tabString + o.value.substring(pos); // insert the tabstring
    						modifier += options.tabString.length;
    					}
    				}
    			}
    			o.focus();
    			var ns = ss + ((modifier > 0) ? options.tabString.length : (modifier < 0) ? -options.tabString.length : 0);
    			var ne = es + modifier;
    			o.setSelectionRange(ns,ne);
    		}
    	}
     
    	function ie_tab (o, shft, options) {
    		var range = document.selection.createRange();
     
    		if (o == range.parentElement()) {
    			// when there's no selection and we're just working with the caret, we'll add/remove the tabs at the caret, providing more control
    			if ('' == range.text) {
    				// SHIFT+TAB
    				if (shft) {
    					var bookmark = range.getBookmark();
    					//web.archive.org/web/20110716201529/http://first/ try to the left by moving opening up our empty range to the left
    				    range.moveStart('character', -options.tabString.length);
    				    if (options.tabString == range.text) {
    				    	range.text = '';
    				    } else {
    				    	// if that didn't work then reset the range and try opening it to the right
    				    	range.moveToBookmark(bookmark);
    				    	range.moveEnd('character', options.tabString.length);
    				    	if (options.tabString == range.text) 
    				    		range.text = '';
    				    }
    				    // move the pointer to the start of them empty range and select it
    				    range.collapse(true);
    					range.select();
    				}
     
    				else {
    					// very simple here. just insert the tab into the range and put the pointer at the end
    					range.text = options.tabString; 
    					range.collapse(false);
    					range.select();
    				}
    			}
    			// selections will always add/remove tabs from the start of the line
    			else {
     
    				var selection_text = range.text;
    				var selection_len = selection_text.length;
    				var selection_arr = selection_text.split("\r\n");
     
    				var before_range = document.body.createTextRange();
    				before_range.moveToElementText(o);
    				before_range.setEndPoint("EndToStart", range);
    				var before_text = before_range.text;
    				var before_arr = before_text.split("\r\n");
    				var before_len = before_text.length; // - before_arr.length + 1;
     
    				var after_range = document.body.createTextRange();
    				after_range.moveToElementText(o);
    				after_range.setEndPoint("StartToEnd", range);
    				var after_text = after_range.text; // we can accurately calculate distance to the end because we're not worried about MSIE trimming a \r\n
     
    				var end_range = document.body.createTextRange();
    				end_range.moveToElementText(o);
    				end_range.setEndPoint("StartToEnd", before_range);
    				var end_text = end_range.text; // we can accurately calculate distance to the end because we're not worried about MSIE trimming a \r\n
     
    				var check_html = $(o).html();
    				$("#r3").text(before_len + " + " + selection_len + " + " + after_text.length + " = " + check_html.length);				
    				if((before_len + end_text.length) < check_html.length) {
    					before_arr.push("");
    					before_len += 2; // for the \r\n that was trimmed	
    					if (shft && options.tabString == selection_arr[0].substring(0,options.tabString.length))
    						selection_arr[0] = selection_arr[0].substring(options.tabString.length);
    					else if (!shft) selection_arr[0] = options.tabString + selection_arr[0];	
    				} else {
    					if (shft && options.tabString == before_arr[before_arr.length-1].substring(0,options.tabString.length)) 
    						before_arr[before_arr.length-1] = before_arr[before_arr.length-1].substring(options.tabString.length);
    					else if (!shft) before_arr[before_arr.length-1] = options.tabString + before_arr[before_arr.length-1];
    				}
     
    				for (var i = 1; i < selection_arr.length; i++) {
    					if (shft && options.tabString == selection_arr[i].substring(0,options.tabString.length))
    						selection_arr[i] = selection_arr[i].substring(options.tabString.length);
    					else if (!shft) selection_arr[i] = options.tabString + selection_arr[i];
    				}
     
    				if (1 == before_arr.length && 0 == before_len) {
    					if (shft && options.tabString == selection_arr[0].substring(0,options.tabString.length))
    						selection_arr[0] = selection_arr[0].substring(options.tabString.length);
    					else if (!shft) selection_arr[0] = options.tabString + selection_arr[0];
    				}
     
    				if ((before_len + selection_len + after_text.length) < check_html.length) {
    					selection_arr.push("");
    					selection_len += 2; // for the \r\n that was trimmed
    				}
     
    				before_range.text = before_arr.join("\r\n");
    				range.text = selection_arr.join("\r\n");
     
    				var new_range = document.body.createTextRange();
    				new_range.moveToElementText(o);
     
    				if (0 < before_len)	new_range.setEndPoint("StartToEnd", before_range);
    				else new_range.setEndPoint("StartToStart", before_range);
    				new_range.setEndPoint("EndToEnd", range);
     
    				new_range.select();
     
    			} 
    		}
    	}
     
    // end of closure
    })(jQuery);
     
    /*
         FILE ARCHIVED ON 20:15:29 Jul 16, 2011 AND RETRIEVED FROM THE
         INTERNET ARCHIVE ON 09:12:25 Sep 06, 2017.
         JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.
     
         ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
         SECTION 108(a)(3)).
    */
    Je vous remercie d'avance pour votre aide.
    Cordialement,

    Damien.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 946
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 946
    Points : 25 481
    Points
    25 481

    Par défaut

    Bonjour,
    la première chose à faire est de regarder si tes fichier javascript sont bien chargés et/ou si tu n'as pas d'autres erreurs.
    Pour cela il te faut ouvrir la console en appuyant sur F12, plein de bonnes choses à découvrir.

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    décembre 2011
    Messages
    51
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : décembre 2011
    Messages : 51
    Points : 48
    Points
    48

    Par défaut

    Alllelouia!!!!!

    J'ai trouvé la console!!! Bonheur et volupté!!!
    Et du coup, c'était bien un simple problème de chargement des libs.

    j'avais écrit :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <script src="/assets/js/jquery.js"></script>
    Alors qu'il fallait écrire

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <script src="assets/js/jquery.js"></script>
    Notez le / en moins (j'étais sûr que c'était une annerie dans ce goût là). Mon IDE trouvait bien le fichier et du coup je comprenais encore moins pourquoi ça n'allait pas.
    Mais une fois dans la console, plus aucun doute, ça m'a pris 3 sec à corriger.

    NoSmoking, un très merci...car sans jeu de mot aucun (bon, ok si), j'étais en train de fumer :p (bon ok aussi, c'était nul, j'aurai pu m'abstenir)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Code javascript qui ne s'execute pas sous IE
    Par sheira dans le forum JavaScript
    Réponses: 2
    Dernier message: 09/05/2011, 17h49
  2. Réponses: 0
    Dernier message: 04/10/2010, 11h47
  3. fonction javascript qui ne s'execute pas
    Par Neferet dans le forum JavaScript
    Réponses: 11
    Dernier message: 20/01/2009, 18h08
  4. [POO] Methode de classe qui ne s'exécute pas
    Par gregal dans le forum Débuter
    Réponses: 2
    Dernier message: 11/04/2006, 12h01
  5. [FLASH 8] Un trace qui ne s'execute pas ?
    Par memess dans le forum Flash
    Réponses: 13
    Dernier message: 30/11/2005, 16h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo