La bonne syntaxe?

**DoumCSS** · 23/07/2013, 18h22

Je veux insérer une fonction de smileys à l'intérieur d'un script existant de chat... Je cherche la bonne syntaxe pour le faire. Un peu d'aide svp?

Ma fonction est: replaceEmoticons(text) que je ne mettrai pas ici pour rien... je veux l'insérer dans cette ligne où "+item.m+" = "Mon texte à remplacer":

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxmessagefrom">'+item.f+':&nbsp;&nbsp;</span><span class="chatboxmessagecontent">'+item.m+'</span></div>');

Merci d'avance!

**NoSmoking** · 25/07/2013, 19h04

Bonjour à toi aussi,

Ma fonction est: replaceEmoticons(text) que je ne mettrai pas ici pour rien...

je veux bien respecter ta propriété intellectuelle mais dans ce cas aide nous quand même à comprendre ce que tu n'arrives pas à faire.

**DoumCSS** · 26/07/2013, 13h36

Envoyé par NoSmoking

Bonjour à toi aussi,
je veux bien respecter ta propriété intellectuelle mais dans ce cas aide nous quand même à comprendre ce que tu n'arrives pas à faire.

héhé... Moi aussi je veux bien respecter ta propriété intellectuelle... lol

J'ai voulu mettre ça au plus court dans ma question.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxmessagefrom">'+item.f+':&nbsp;&nbsp;</span><span class="chatboxmessagecontent">'replaceEmoticons(+item.m+)'</span></div>');

ma fonction "replaceEmoticons(), j'essaie de plusieurs façons de l'insérer dans ma requête mais je ne trouve pas la bonne SYNTAXE. Donc cela prend-il des quotes? double quotes? back slashes, etc...

**Darkaurora** · 26/07/2013, 20h25

replaceEmoticons(+item.m+) choquant!!

'début chaine'+variable+'fin de chaine';

mettre une variable entre + + permet la concaténation or ici tu cherche juste à passer item.m en paramètre à ta fonction replaceEmoticons( );

si ta fonction retourne quelque chose tu devrais essayer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span class="chatboxmessagecontent">'+replaceEmoticons(item.m)+'</span>

**DoumCSS** · 26/07/2013, 22h02

J'avais effectivement pensé à cette façon de l'écrire. Il s'agit d'un petit système de chat à la "facebook style".

Par contre, ce qui ne fonctionne pas, c'est lorsque je tape par exemple:" Bonjour!

" et j'appuie sur "Enter" pour envoyer le message, lors de l'affichage immédiat, le smiley ne s'affiche pas, il écrit "Bonjour! ¦)". Mais si j'actualise la page, il s'affiche...

Je peux vous montrer le code complet de chat.js ici:

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
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
 
var windowFocus = true;
var username;
var chatHeartbeatCount = 0;
var minChatHeartbeat = 1000;
var maxChatHeartbeat = 33000;
var chatHeartbeatTime = minChatHeartbeat;
var originalTitle;
var blinkOrder = 0;
 
var chatboxFocus = new Array();
var newMessages = new Array();
var newMessagesWin = new Array();
var chatBoxes = new Array();
 
$(document).ready(function(){
	originalTitle = document.title;
	startChatSession();
 
	$([window, document]).blur(function(){
		windowFocus = false;
	}).focus(function(){
		windowFocus = true;
		document.title = originalTitle;
	});
});
 
 
 
 
 
function replaceEmoticons(text) {
  var emoticons = {
    ':D' : 'rire.gif',
    ':P'  : 'grimace.gif',
    ':)'  : 'sourire.gif',
    'o0'  : 'perdu.gif',
	':-/'  : 'confus.gif',
	':S'  : 'merde.gif',
	':('  : 'triste.gif',
	';)'  : 'clindoeil.gif',
	':|'  : 'neutre.gif',
	':c'  : 'pleurer.gif',
	';P'  : 'grimace_clin.png',
	':vball:'  : 'vball.gif'
  }, url = "http://www.zonevolley.com/images/", patterns = [],
     metachars = /[[\]{}()*+?.\\|^$\-,&#\s]/g;
 
  // build a regex pattern for each defined property
  for (var i in emoticons) {
    if (emoticons.hasOwnProperty(i)){ // escape metacharacters
      patterns.push('('+i.replace(metachars, "\\$&")+')');
    }
  }
 
  // build the regular expression and replace
  return text.replace(new RegExp(patterns.join('|'),'g'), function (match) {
    return typeof emoticons[match] != 'undefined' ?
           '<img src="'+url+emoticons[match]+'"/>' :
           match;
  });
}
 
 
 
 
 
 
function restructureChatBoxes() {
	align = 0;
	for (x in chatBoxes) {
		chatboxtitle = chatBoxes[x];
 
		if ($("#chatbox_"+chatboxtitle).css('display') != 'none') {
			if (align == 0) {
				$("#chatbox_"+chatboxtitle).css('right', '20px');
			} else {
				width = (align)*(250+7)+20;
				$("#chatbox_"+chatboxtitle).css('right', width+'px');
			}
			align++;
		}
	}
}
 
function chatWith(chatuser) {
	createChatBox(chatuser);
	$("#chatbox_"+chatuser+" .chatboxtextarea").focus();
}
 
function createChatBox(chatboxtitle,minimizeChatBox) {
	if ($("#chatbox_"+chatboxtitle).length > 0) {
		if ($("#chatbox_"+chatboxtitle).css('display') == 'none') {
			$("#chatbox_"+chatboxtitle).css('display','block');
			restructureChatBoxes();
		}
		$("#chatbox_"+chatboxtitle+" .chatboxtextarea").focus();
		return;
	}
 
	$(" <div />" ).attr("id","chatbox_"+chatboxtitle)
	.addClass("chatbox")
	.html('<div class="chatboxhead"><div class="chatboxtitle">'+chatboxtitle+'</div><div class="chatboxoptions"><a href="javascript:void(0)" onclick="javascript:toggleChatBoxGrowth(\''+chatboxtitle+'\')">—</a> <a href="javascript:void(0)" onclick="javascript:closeChatBox(\''+chatboxtitle+'\')">X</a></div><br clear="all"/></div><div class="chatboxcontent"></div><div class="chatboxinput"><textarea class="chatboxtextarea" onkeydown="javascript:return checkChatBoxInputKey(event,this,\''+chatboxtitle+'\');"></textarea></div>')
	.appendTo($( "body" ));
 
	$("#chatbox_"+chatboxtitle).css('bottom', '0px');
 
	chatBoxeslength = 0;
 
	for (x in chatBoxes) {
		if ($("#chatbox_"+chatBoxes[x]).css('display') != 'none') {
			chatBoxeslength++;
		}
	}
 
	if (chatBoxeslength == 0) {
		$("#chatbox_"+chatboxtitle).css('right', '20px');
	} else {
		width = (chatBoxeslength)*(250+7)+20;
		$("#chatbox_"+chatboxtitle).css('right', width+'px');
	}
 
	chatBoxes.push(chatboxtitle);
 
	if (minimizeChatBox == 1) {
		minimizedChatBoxes = new Array();
 
		if ($.cookie('chatbox_minimized')) {
			minimizedChatBoxes = $.cookie('chatbox_minimized').split(/\|/);
		}
		minimize = 0;
		for (j=0;j<minimizedChatBoxes.length;j++) {
			if (minimizedChatBoxes[j] == chatboxtitle) {
				minimize = 1;
			}
		}
 
		if (minimize == 1) {
			$('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display','none');
			$('#chatbox_'+chatboxtitle+' .chatboxinput').css('display','none');
		}
	}
 
	chatboxFocus[chatboxtitle] = false;
 
	$("#chatbox_"+chatboxtitle+" .chatboxtextarea").blur(function(){
		chatboxFocus[chatboxtitle] = false;
		$("#chatbox_"+chatboxtitle+" .chatboxtextarea").removeClass('chatboxtextareaselected');
	}).focus(function(){
		chatboxFocus[chatboxtitle] = true;
		newMessages[chatboxtitle] = false;
		$('#chatbox_'+chatboxtitle+' .chatboxhead').removeClass('chatboxblink');
		$("#chatbox_"+chatboxtitle+" .chatboxtextarea").addClass('chatboxtextareaselected');
	});
 
	$("#chatbox_"+chatboxtitle).click(function() {
		if ($('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display') != 'none') {
			$("#chatbox_"+chatboxtitle+" .chatboxtextarea").focus();
		}
	});
 
	$("#chatbox_"+chatboxtitle).show();
}
 
 
function chatHeartbeat(){
 
	var itemsfound = 0;
 
	if (windowFocus == false) {
 
		var blinkNumber = 0;
		var titleChanged = 0;
		for (x in newMessagesWin) {
			if (newMessagesWin[x] == true) {
				++blinkNumber;
				if (blinkNumber >= blinkOrder) {
					document.title = x+' vous a écrit...';
					titleChanged = 1;
					break;	
				}
			}
		}
 
		if (titleChanged == 0) {
			document.title = originalTitle;
			blinkOrder = 0;
		} else {
			++blinkOrder;
		}
 
	} else {
		for (x in newMessagesWin) {
			newMessagesWin[x] = false;
		}
	}
 
	for (x in newMessages) {
		if (newMessages[x] == true) {
			if (chatboxFocus[x] == false) {
				//FIXME: add toggle all or none policy, otherwise it looks funny
				$('#chatbox_'+x+' .chatboxhead').toggleClass('chatboxblink');
			}
		}
	}
 
	$.ajax({
	  url: "chat.php?action=chatheartbeat",
	  cache: false,
	  dataType: "json",
	  success: function(data) {
 
		$.each(data.items, function(i,item){
			if (item)	{ // fix strange ie bug
 
				chatboxtitle = item.f;
 
				if ($("#chatbox_"+chatboxtitle).length <= 0) {
					createChatBox(chatboxtitle);
				}
				if ($("#chatbox_"+chatboxtitle).css('display') == 'none') {
					$("#chatbox_"+chatboxtitle).css('display','block');
					restructureChatBoxes();
				}
 
				if (item.s == 1) {
					item.f = username;
				}
 
				if (item.s == 2) {
 
				} else {
					newMessages[chatboxtitle] = true;
					newMessagesWin[chatboxtitle] = true;
					$("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxmessagefrom">'+item.f+':&nbsp;&nbsp;</span><span class="chatboxmessagecontent">'+replaceEmoticons(item.m)+'</span></div>');
				}
 
				$("#chatbox_"+chatboxtitle+" .chatboxcontent").scrollTop($("#chatbox_"+chatboxtitle+" .chatboxcontent")[0].scrollHeight);
				itemsfound += 1;
			}
		});
 
		chatHeartbeatCount++;
 
		if (itemsfound > 0) {
			chatHeartbeatTime = minChatHeartbeat;
			chatHeartbeatCount = 1;
		} else if (chatHeartbeatCount >= 10) {
			chatHeartbeatTime *= 2;
			chatHeartbeatCount = 1;
			if (chatHeartbeatTime > maxChatHeartbeat) {
				chatHeartbeatTime = maxChatHeartbeat;
			}
		}
 
		setTimeout('chatHeartbeat();',chatHeartbeatTime);
	}});
}
 
function closeChatBox(chatboxtitle) {
	$('#chatbox_'+chatboxtitle).css('display','none');
	restructureChatBoxes();
 
	$.post("chat.php?action=closechat", { chatbox: chatboxtitle} , function(data){	
	});
 
}
 
function toggleChatBoxGrowth(chatboxtitle) {
	if ($('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display') == 'none') {  
 
		var minimizedChatBoxes = new Array();
 
		if ($.cookie('chatbox_minimized')) {
			minimizedChatBoxes = $.cookie('chatbox_minimized').split(/\|/);
		}
 
		var newCookie = '';
 
		for (i=0;i<minimizedChatBoxes.length;i++) {
			if (minimizedChatBoxes[i] != chatboxtitle) {
				newCookie += chatboxtitle+'|';
			}
		}
 
		newCookie = newCookie.slice(0, -1)
 
 
		$.cookie('chatbox_minimized', newCookie);
		$('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display','block');
		$('#chatbox_'+chatboxtitle+' .chatboxinput').css('display','block');
		$("#chatbox_"+chatboxtitle+" .chatboxcontent").scrollTop($("#chatbox_"+chatboxtitle+" .chatboxcontent")[0].scrollHeight);
	} else {
 
		var newCookie = chatboxtitle;
 
		if ($.cookie('chatbox_minimized')) {
			newCookie += '|'+$.cookie('chatbox_minimized');
		}
 
 
		$.cookie('chatbox_minimized',newCookie);
		$('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display','none');
		$('#chatbox_'+chatboxtitle+' .chatboxinput').css('display','none');
	}
 
}
 
function checkChatBoxInputKey(event,chatboxtextarea,chatboxtitle) {
 
	if(event.keyCode == 13 && event.shiftKey == 0)  {
		message = $(chatboxtextarea).val();
		message = message.replace(/^\s+|\s+$/g,"");
 
		$(chatboxtextarea).val('');
		$(chatboxtextarea).focus();
		$(chatboxtextarea).css('height','44px');
		if (message != '') {
			$.post("chat.php?action=sendchat", {to: chatboxtitle, message: message} , function(data){
				message = message.replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\"/g,"&quot;");
				$("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxmessagefrom">'+username+':&nbsp;&nbsp;</span><span class="chatboxmessagecontent">'+replaceEmoticons(message)+'</span></div>');
				$("#chatbox_"+chatboxtitle+" .chatboxcontent").scrollTop($("#chatbox_"+chatboxtitle+" .chatboxcontent")[0].scrollHeight);
			});
		}
		chatHeartbeatTime = minChatHeartbeat;
		chatHeartbeatCount = 1;
 
		return false;
	}
 
	var adjustedHeight = chatboxtextarea.clientHeight;
	var maxHeight = 94;
 
	if (maxHeight > adjustedHeight) {
		adjustedHeight = Math.max(chatboxtextarea.scrollHeight, adjustedHeight);
		if (maxHeight)
			adjustedHeight = Math.min(maxHeight, adjustedHeight);
		if (adjustedHeight > chatboxtextarea.clientHeight)
			$(chatboxtextarea).css('height',adjustedHeight+8 +'px');
	} else {
		$(chatboxtextarea).css('overflow','auto');
	}
 
}
 
function startChatSession(){  
	$.ajax({
	  url: "chat.php?action=startchatsession",
	  cache: false,
	  dataType: "json",
	  success: function(data) {
 
		username = data.username;
 
		$.each(data.items, function(i,item){
			if (item)	{ // fix strange ie bug
 
				chatboxtitle = item.f;
 
				if ($("#chatbox_"+chatboxtitle).length <= 0) {
					createChatBox(chatboxtitle,1);
				}
 
				if (item.s == 1) {
					item.f = username;
				}
 
				if (item.s == 2) {
 
				} else {
					$("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxmessagefrom">'+item.f+':&nbsp;&nbsp;</span><span class="chatboxmessagecontent">'+replaceEmoticons(item.m)+'</span></div>');
				}
			}
		});
 
		for (i=0;i<chatBoxes.length;i++) {
			chatboxtitle = chatBoxes[i];
			$("#chatbox_"+chatboxtitle+" .chatboxcontent").scrollTop($("#chatbox_"+chatboxtitle+" .chatboxcontent")[0].scrollHeight);
			setTimeout('$("#chatbox_"+chatboxtitle+" .chatboxcontent").scrollTop($("#chatbox_"+chatboxtitle+" .chatboxcontent")[0].scrollHeight);', 100); // yet another strange ie bug
		}
 
	setTimeout('chatHeartbeat();',chatHeartbeatTime);
 
	}});
}
 
/**
 * Cookie plugin
 *
 * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */
 
jQuery.cookie = function(name, value, options) {
    if (typeof value != 'undefined') { // name and value given, set cookie
        options = options || {};
        if (value === null) {
            value = '';
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
        }
        // CAUTION: Needed to parenthesize options.path and options.domain
        // in the following expressions, otherwise they evaluate to undefined
        // in the packed version for some reason...
        var path = options.path ? '; path=' + (options.path) : '';
        var domain = options.domain ? '; domain=' + (options.domain) : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else { // only name given, get cookie
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};

**Darkaurora** · 26/07/2013, 22h16

à la ligne 320 triple dbl quote je pense que ça génère une erreur. L'erreur est sur la fonction d'ajout sur enter.

Après je n'ai rien constater d'anormale sur la fonction replaceEmoticon

et vue ce que tu me dis je pense que le problème viens plus de la fonction checkChatBoxInputKey à vérifier donc si tu pouvais faire un
console.log( $("#chatbox_"+chatboxtitle+" .chatboxcontent").html( ) ) après l'append

et console.log( replaceEmoticons(message) );

**DoumCSS** · 26/07/2013, 23h34

Pour le triple quote de la ligne 320 cé pour ceci:
message = message.replace(/</g,"<").replace(/>/g,">").replace(/\"/g,"&quot;");

Pour le "console.log", tu devras m'expliquer ce que ça signifie, je n'ai aucune connaissance de cette expression! Désolé de mon ignorance! :/

Et petite rectification:

Dans ce fichier chat.js, la fonction replace(Emoticone() ne fonctionne pas du tout. mais ma onction emoticone() qui est en php dans mon fichier chat.php, elle, fonctionne. C'est pour ca que je disais que le php gérait bien la chose mais j'avais l'impression que c'était côté JS que ca n'allait pas car mon affichage immédiat se fait avant même que le php ne soit traité dans la BDD, etc... alors c'est le JS qui s'occupe de l'affichage direct dans ma boite de dialogue... Je ne sais pas si je suis assez clair... ???

Voir image ci-jointe:

Et donc, si je l'actualise, ca me donne:

**Darkaurora** · 27/07/2013, 00h34

le console.log( var ) permet d'afficher le contenu de tes variables dans les consoles de développement des navigateurs.

sur chrome lorsque tu click droit et inspecter l'élément sur ta page tu as différents onglet, dont un onglet console qui affichera l'ensemble des commandes "console.log( var )"

**DoumCSS** · 27/07/2013, 01h03

Ok, merci beaucoup! Je vérifie le tout!

Edit: Je viens de vérifier et ça ne me retourne pas d'erreur...
Sauf: "Uncaught SyntaxError: Unexpected token ) "
Lorsque j'ai ajouté console.log( "toute la ligne" );

**Darkaurora** · 27/07/2013, 09h38

donc tu as une erreur de code avant ton console log qui génère cette erreur

**DoumCSS** · 27/07/2013, 12h54

Bon! Tout fonctionne! Imagine-toi que dans mon énervement, j'avais fait une erreur assez stupide; ma fonction d'affichage de smileys en php contenait un array d'images en .png alors que celle en JS contenait des .gif... J'ai donc changé gif pour png... arf! Tout ça pour ça... Merci de ton aide, ça m'aura permis de connaître console.log( )

**DoumCSS** · 27/07/2013, 12h57

Et petite question rapide:

Qu'est-ce que je pourrais faire pour empêcher ce que tu appelles "l'erreur" en rapport avec le triple quote?

message = message.replace(/</g,"<").replace(/>/g,">").replace(/\"/g,""");

Si j'enlève .replace(/\"/g,""") , c'est sur que ca fonctionne quand-même mais ca doit pas etre là pour rien! héhé!

**Darkaurora** · 27/07/2013, 13h05

à mon avis l'interpréteur de ton navigateur transforme ton $quot; en " et ensuite interprète ton console.log qui détecte une erreur à vrai dire je pense que ton code est correct c'est juste "un pseudo bug" maintenant si tu veux que ton code soit correct tu remplaces tes double quotes par des simple quotes ( celles qui définissent ton expression régulière )

**DoumCSS** · 27/07/2013, 13h20

En fait, ce n'est pas le triple quote qui embete mais celui juste avant:
.replace(/\"/g,""");

Si je mets .replace(/\"/g,""");
il n'y a plus d'erreur mais la fonction sera-t-elle bonne?

**Darkaurora** · 28/07/2013, 00h40

à tester, je suis débutant j'apprend au fur et à mesure et surtout en testant, c'est pourquoi je peux énoncer des choses complètement fausses, mais heureusement il n'y a pas qu'un seul chemin a prendre en programmation

La bonne syntaxe?

jQuery

Discussions similaires

Partager

Partager