Aiuto per creare chat stile Facebook

GibboSKQ

Nuovo Utente
3 Gen 2013
7
0
0
Salve!
Ho creato una chat simile a quella di facebook (solo grafica) e vorrei sapere come posso collegarmi al database mysql per ottenere i dati. Potreste darmi qualche aiutino? @criric

Codice:
<!DOCTYPE HTML>
<html>

<head>

<!-- Css nascosto -->

</head>


<body>

<div id="globalContainer">
	<div class="_ksg clearfix">
		<div class="masterView">
			<div class="clearfix">
				<div class="_6jw">
					<ul class="uiList _281 _4ki">
						<li class="selectedFolder"><a class="_1n _mp-load" href="#"><span class="_6xt _6qy" style=""><span>Posta in arrivo</span></span></a></li>
						<li><a class="_1n _mp-new">Nuovo messaggio</a></li>
					</ul>
				</div>
			</div>
			<div class="nano postaList contentAfter">
				<div class="content"></div>
			</div>
		</div>
		<div class="_2nb">
			<div class="clearfix">
				<div class="_3db">
					<div class="clearfix _r6">
						<div>
							<h2 class="_r7 _3jd" id="webMessengerHeaderName" style="max-width: 498px;">
								<div>Nessuna selezione</div>
							</h2>
						</div>
					</div>
				</div>
			</div>
			<div class="_2nb-">
			  <div class="_kbig-c">
			    <div class="_kbig">Nessuna conversazione selezionata</div>
			    <div class="_kbig-n"><a class="_mp-new">Nuovo messaggio</a></div>
			  </div>
			</div>
		</div>
	</div>
</div>

<div id="tooltip"></div>

<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/jquery.autosize.min.js"></script>
<script src="../js/jquery.tokeninput.js"></script>
<script src="../js/jquery.nanoscroller.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var myPosta = { 
		'ajax' : false,
		'data' : {},
		'reset' : function(){ 
			clearTimeout( this.timeout ); // chiama una sola volta
			this.data = { 'totalrequest': 0, 'lastpost': {} }; 
		},
		'timeout' : 0,
		'clearTimeout' : function() { 
			clearTimeout( this.timeout ); 
		},
		'setTimeout' : function() { 
			clearTimeout( this.timeout ); // chiama una sola volta
			// reference
			var that = this;
			// set
			this.timeout = setTimeout( function() {
				// return check?
				_insertContentBefore({'data':{
					'append':true,
					'contentId':that.data.id,
					'from':that.data.last
				}});
			}, 4000 );
		}
	}, ulDiscussionList;
	myPosta.reset();
	// setContentHeight(); // chiamato da loadRecipients
	// metto un timeout per questa funzione?
	loadRecipients({});
	// focus-blur-resize
	var isFocused = false, isScrollLoaded = true;
	$(window)
		.on('resize', function() {
			setContentHeight(); 
		} )
		.on('focus', function() { 
			if(isFocused) return;
			isFocused = true;
			loadRecipients({'scrollTop':true}); 
		} )
		.on('blur', function() {
			if(!isFocused) return;
			isFocused = false;
		} );
	$('._2nb-').on('click','a[href=#utente]',function(event){event.preventDefault(); if (window.opener)window.opener.top.frames['destro'].location.href='../pagination/scheda.php?u=' +$(this).text(); return false; });
	$('.postaList').on(
		'click',
		'li',
		function (e) { 
			// console.log("target", e.currentTarget);
			var $this = $(this);
			myPosta.lastClick = myPosta.currentClick;
			myPosta.currentClick = $this;
			// reset
			myPosta.reset();
			_insertContentBefore({'data':{
				'append':false,
				'contentId':$this.data('id'),
				'title':$this.find('.trainer_name').text()
			}});
		}
	);
	$('.postaList').on(
		'click mouseenter mouseleave',
		'a.bell',
		function (event) {
			if(event.type === 'mouseenter') {
				var offset = $(this).offset();
				$('#tooltip').html('Notifiche').css({
					'top':offset.top - 25,
					'right':$(window).width() - offset.left - 32 // 16*2
				}).show();
			}
			else if(event.type === 'mouseleave') {
				$('#tooltip').hide();
			}
			else if(event.type === 'click') {
				// set-mode
				var that = $(this);
				$.ajax({
					url: "posta_get.asp?callback=?",
					async : true,
					dataType: 'json',
					data: {
						'mode' : 3,
						'contentId':$(this).closest('li').data('id')
					},
					success: function(data) {
						// if ( data.error ) { // omg!
						$(that).toggleClass('active-1 active-0');
					},
					error: function() {
						// error? omg!
					}		
				});
			}
			return false;
		}
	);
	$('.postaList').on(
		'click mouseenter mouseleave',
		'a.warn',
		function (event) {
			if(event.type === 'mouseenter') {
				var offset = $(this).offset();
				$('#tooltip').html('Segnala').css({
					'top':offset.top - 25,
					'right':$(window).width() - offset.left - 16
				}).show();
			}
			else if(event.type === 'mouseleave') {
				$('#tooltip').hide();
			}
			else if(event.type === 'click') {
				// set-mode
				var that = $(this);
				if ( confirm('Sei sicuro di voler proseguire con la Segnalazione?') ) {
					$.ajax({
						url: "posta_get.asp?callback=?",
						async : true,
						dataType: 'json',
						data: {
							'mode' : 4,
							'contentId':$(this).closest('li').data('id')
						},
						success: function(data) {
							// if ( data.error )
							alert( 'Ticke di Segnalazione aperto' );
						},
						error: function() {
							// error? omg!
						}
					});
				}
			}
			return false;
		}
	);
	//scrollEnd
	$('.postaList').on("scrollend", function(e){
		//console.log("current HTMLDivElement", e.currentTarget);
		if ( isScrollLoaded ) { isScrollLoaded = false; loadRecipients({'scrollNext':1}); }
	});
	
	function loadRecipients ( loaddata ) {
		// console.log( myPosta );
		isScrollLoaded = false;
		// append-prepend
		$('.postaList').data('scrollCount', loaddata.scrollNext ? (+$('.postaList').data('scrollCount') +1) : 0 );
		// request
		if ( loaddata.scrollNext && $('.postaList').data('lastTotal') < 30 ) return false;
		$.ajax({
			url: "posta_get.asp?callback=?",
			async : false,
			dataType: 'json',
			data: {
				'mode' : 0,
				'scrollCount' : $('.postaList').data('scrollCount')
			},
			success: function(data) {
				var lidata = data.discussions, li = [], li_k_class = [ '_k-', '_k- _kx' ], li_replied = [ '« ', '» ' ];
				// total
				$('.postaList').data('lastTotal',lidata.total);
				// load next
				if ( lidata.total == 0 ) {
					$('.postaList div.content').html('<div class="_kbig">Nessuna discussione trovata</div>');
				}
				else {
					var img, liList;
					for ( var i=0; i<lidata.total; i++ ) {
						img = lidata.data[i].from.gender+ '/' +lidata.data[i].from.img;
						li[i] = $('<li>', {
							'class' : li_k_class[lidata.data[i].view],
							'html' : '<div class="clearfix"><div class="_l7"><a class="bell active-' +lidata.data[i].notify+ '"></a><a class="warn active-0"></a></div><div class="clearfix psv"><div class="trainer"><img src="http://forum.mrwebmaster.it/images/trainercard/' +img+ '.png"></div><div class="trainer_"><abbr class="timestamp">' +lidata.data[i].data+ '</abbr><div class="trainer_name">' + lidata.data[i].from.name + '</div><div class="clearfix"><div class="trainer_sms">' + li_replied[lidata.data[i].replied] + lidata.data[i].message + '</div></div></div></div></div>',
							'data' : { 'id' : lidata.data[i].id }
						});
						if ( myPosta.data.id == lidata.data[i].id ) { li[i].addClass('_kv'); myPosta.currentClick = li[i]; }
					}
					if ( loaddata.scrollNext ) {
						$('.postaList div.content ul').append( li );
					}
					else {
						ulDiscussionList = $('<ul>', {
							'class' : '',
							'html' : li
						});
						$('.postaList div.content').html( ulDiscussionList );
						if ( loaddata.scrollTop ) $(".postaList").nanoScroller({scroll:'top'});
					}
				}
				// scroll-resize
				setContentHeight( { 'flash' : true } );
				// next scroll
				setTimeout( function(){ isScrollLoaded = true; }, 250 );
			},
			error: function() { 
				$('.postaList div.content').html('<div class="_kbig">Houston, abbiamo un problema!</div>');
			}		
		});
	}
	
	function insertContent( data ) {
		if ( !data ) {
			myPosta.reset();
			$('#globalContainer ._2nb ._2nb-')
				.html('<div class="contentWrapper blankState clearfix"><div class="_2nj"><div class="recipient"><div class="_4wo"><div>A: <input id="recipient-tokenizer" class="empty" type="text" value="" /></div></div></div><div class="contentBefore"></div><div><div class="_2ak"><div class="_1rs"><div class="nano _2pt"><div class="content _1rt"><textarea class="_1rv empty"></textarea></div></div><div class="_1rw"><div class="_top1eee"></div><div class="_1r-"><label class="uiButton"><input type="button" value="Invia" /></label></div></div></div></div></div></div></div>');
			$('#webMessengerHeaderName')
				.removeClass('_3jd')
				.html( 'Nuovo messaggio' );
			$('#recipient-tokenizer').tokenInput("posta_search.php", {
				theme: "facebook",
				hintText: "Inserisci il nome di un Allenatore",
				noResultsText: "Nessun risultato...",
				searchingText: "Un attimo di pazienza...",
				preventDuplicates: true,
				tokenValue: "name",
				tokenDelimiter: ", ",
				searchDelay: 500,
				minChars: 3,
				tokenLimit: 5,
				resultsFormatter: function(item){ return '<li>' +item.name+ ' <span class="tonken-info">« ' +item.carica+ ' « ultimo login ' +item.accesso+ '</span></li>' },
				onDelete: function (item) { setContentHeight(); },
				onAdd: function (item) { setContentHeight(); }
            });
		}
		else {
			$('#globalContainer ._2nb ._2nb-')
				.html('<div class="contentWrapper clearfix"><div class="_2nj"><div class="recipient"><div class="_4wo"><div><input id="contentId" type="hidden" value="' +data.id+ '" /></div></div></div><div class="nano contentBefore"><div class="content"></div></div><div><div class="_2ak"><div class="_1rs"><div class="nano _2pt"><div class="content _1rt"><textarea class="_1rv empty"></textarea></div></div><div class="_1rw"><div class="_top1eee"></div><div class="_1r-"><label class="uiButton"><input type="button" value="Invia" /></label></div></div></div></div></div></div></div>');
			// set scrolling data
			$('#globalContainer .contentBefore .content').on( //.nano
				'scroll',
				function ( e ) {
					//console.log( e.target.scrollTop, e.target.scrollHeight, $(this).height(), e.currentTarget );
					if ( e.target.scrollTop == 0 ) {
						$(this).parent().data('scrollend',false);
						//console.log("scrollTop");
					}
					else if ( e.target.scrollHeight - $(this).height() == e.target.scrollTop ) {
						$(this).parent().data('scrollend',true);
						//console.log("scrollEnd");
					}
					else {
						$(this).parent().data('scrollend',false);
						//console.log("scrolling...");
					}
				}
			);
		}
		//$('.postaList li').removeClass('_kv');
		$('#globalContainer textarea')
			.data("oldValue",'')
			.data("emptyValue",'Scrivi...')
			.on('input propertychange blur focus', function(e) {
				var $this = $(this);
				var newValue = $this.val();
				if ( e.type === 'blur' && !$this.data('oldValue') ) return $this.addClass('empty').val( $this.data('emptyValue') );
				if ( e.type === 'focus' && !$this.data('oldValue') ) return $this.removeClass('empty').val( '' );
				//return $this.val( $this.data('oldValue') ); // recupero il vecchio valore
				return $this.data('oldValue',newValue); // salvo il nuovo valore
			})
			.autosize({'callback' : setContentHeight})
			.blur();
		$('#globalContainer input:button').on('click', sendMessages);
		function sendMessages( e ) {
			e.preventDefault();
			var that = this; // complete-error $(that).bind('click');
			if ( !$('#globalContainer textarea').data('oldValue') ) {
				$('#globalContainer textarea').val('Scrivi... quì, per favore!!');
			}
			else {
				myPosta.clearTimeout(); // fix
				$(that).prop('disabled', true).val('Attendi').unbind('click');
				$(that).parent().addClass('uiButtonDisabled');
				$('<div />').delay(500).queue(function(next){
					_ajaxData = {
						'mode' : 2,
						'message' : $('#globalContainer textarea').val()
					};
					// content-id
					// console.log( ulPostaList.data() ); return 0;
					if ( $('#contentId').length ) _ajaxData.contentId = $('#contentId').val();
					// recipients
					if ( $('#recipient-tokenizer').length ) _ajaxData.recipients = $('#recipient-tokenizer').val();
					// call
					$.ajax({
						url: "posta_get.asp?callback=?",
						async : false,
						dataType: 'json',
						data: _ajaxData,
						success: function(data) {
							// data.error
							if ( data.error ) { // si è verificato un errore..
								$(that).prop('disabled', false).val('Errore #0' +data.error); //.bind('click', sendMessages);
							//	$(that).parent().removeClass('uiButtonDisabled');
							}
							else {
								$('#globalContainer textarea').data('oldValue','').val('').blur();
								$(that).prop('disabled', false).val('Invia').bind('click', sendMessages);
								$(that).parent().removeClass('uiButtonDisabled');
								// if discussione -creata o -trovata?
								// -append loaded content
								_insertContentBefore({'data':{
									'append':( data.insertContent ? false : true),
									'contentId':data.messages.id,
									'title':$('#recipient-tokenizer').val(),
									'from':myPosta.data.last
								}});
								// return check?
								// list update
								loadRecipients( {'scrollTop':true} );
							}
						},
						error: function() {
							$(that).prop('disabled', false).val('Riprova').bind('click', sendMessages);
							$(that).parent().removeClass('uiButtonDisabled');
						}		
					});
					next()
				});
			}
		}
		setContentHeight();
	}
	
	$('._mp-new').on('click',function( e ) {
		e.preventDefault();
		myPosta.lastClick = myPosta.currentClick;
		myPosta.currentClick = null; //$(this);
		// il reset è già dentro insertContent
		insertContent( false );
	});
	// timeout per il reload
	$('._mp-load').on('click',function( e ) { e.preventDefault(); loadRecipients( {'scrollTop':true} ); });
	
	
	
	function setContentHeight ( data ) {
		if ( typeof data !== 'object' ) data = {};
		data.winHeight = $(window).height();
		
		if ( !$(myPosta.currentClick).hasClass('_kv') ) {
			$(myPosta.currentClick).removeClass('_kx').addClass('_kv');
			$(myPosta.lastClick).removeClass('_kv');
		}
		
		$('._2pt.nano').height( 12 + $('._2pt.nano textarea').height() );
		// eliminabile
		//$('._2nb').height( $(document).height() );
		$('._kbig-c').height( data.winHeight - $('._kbig-c').parent().prev().height() );
		// $(document).height()
		$('.postaList').height( data.winHeight - $('.postaList').prev().height() );
		var $contentBefore = $(".contentBefore"); //.nano
		$contentBefore.height( data.winHeight -$("._3db").parent().height() -$contentBefore.prev(':visible').height() -$contentBefore.next().height() );
	//	$('._1rt').scrollTop( $('._1rv').height() );
		$(".nano").nanoScroller();

		if ( data.flash ) $contentBefore.nanoScroller({ flash: true });
		if ( data.scroll || $contentBefore.data('scrollend') ) $contentBefore.nanoScroller({ scroll: 'bottom' });
	}
	
	function _insertContentBefore ( event ) {
		if ( myPosta.ajax ) return false;
		myPosta.ajax = true;
		// this-ref
		var that = $(this); //console.log( that );
		var _ajaxData = {
			'mode' : 1,
			'contentId' : event.data.contentId
		};
		// from
		if ( event.data.from ) _ajaxData.from = event.data.from;
		// reset?
		// drin!
		if ( isFocused ) _ajaxData.notify = 1;
		// call async
		$.ajax({
			url: "posta_get.asp?callback=?",
			async : true,
			dataType: 'json',
			data: _ajaxData,
			success: function(data) {
				// ready for next request
				myPosta.ajax = false;
				// content need to scrolled?
				var scrollDown = false;
				if ( data.error ) {
					$('#globalContainer ._2nb ._2nb-').html('<div class="_kbig-c"><div class="_kbig">La conversazione non esiste</div></div>');
					setContentHeight();
				}
				else {
					var lidata = data.messages, li = [];
					if ( lidata.total ) { // ho messaggi da scrivere
						scrollDown = true;
						lidata.data.reverse();
						var lastpost = myPosta.data.lastpost, img;
						for ( var i=0,j=0; i<lidata.total; i++ ) {
							// if .data && .author, find li:last ._38 > append messages
							if ( lastpost.data != lidata.data[i].data ) {
								lastpost.data = lidata.data[i].data;
								li[j++] = $('<li>', { 'class' : '_2n3', 'html' : '<abbr class="timestamp">' +lastpost.data+ '</abbr>' });
							}
							lastpost.author = lidata.data[i].from.name;
							img = lidata.data[i].from.gender+ '/' +lidata.data[i].from.img;
							li[j] = $('<li>', {
								'class' : 'clearfix uiListItem',
								'html' : '<div class="cleafix"><div class="trainer"><img src="http://forum.mrwebmaster.it/images/trainercard/M/' +img+ '.png"></div><div class="clearfix _8m  _42ef"><div class="rfloat"><abbr title="' +lidata.data[i].data+ '" class="_35 timestamp">' +lidata.data[i].ora+ '</abbr></div><div><strong class="_36"><a href="#utente">' +lidata.data[i].from.name+ '</a></strong><div class="_37"><div class="_53"><div class="_3hi"><div class="_38"><p>' +lidata.data[i].message.join('</p><p>') +'</p></div></div></div></div></div></div></div>'
							});
						//	li[j].find('._38').append('<p>trovato');
							j++;
						}
						// metto anche prepend?
						if ( event.data.append ) {
							$('div.contentBefore div.content ul').append( li );
							// update myPosta.
							myPosta.data.totalrequest = 0;
							myPosta.data.last = lidata.last;
							myPosta.data.lastpost = lastpost;
						}
						else {
							$('#webMessengerHeaderName').removeClass('_3jd').html( event.data.title );
							insertContent( { 'id' : data.messages.id } );
						// .filter(function(index){ if ( $(this).data('id') == 1 ) return this; })
						//	that.addClass('_kv');
							myPosta.reset();
							//myPosta.data = {'id':lidata.id, 'lastpost' : lastpost, 'first':lidata.first, 'last':lidata.last};
							myPosta.data.id = lidata.id;
							myPosta.data.lastpost = lastpost;
							myPosta.data.first = lidata.first;
							myPosta.data.last = lidata.last;
							ulPostaList = $('<ul>', {
								'class' : 'uiList _4kg',
								'html' : li
							}); //,'data' : myPosta.data
							$('div.contentBefore div.content').html( ulPostaList );
						}
						// ricarico la posta e aggiungo la classe
						// loadRecipients({});
						//$(myPosta.currentClick).addClass('_kv');
						//$(myPosta.lastClick).removeClass().addClass('_k-');
					}
					//	$('.nano').nanoScroller(); //{ sliderMaxHeight: 80 }
					//	$('.nano').nanoScroller({ scroll: 'bottom' });
					// refresh
					myPosta.data.totalrequest++;
					if ( myPosta.data.totalrequest < 90 ) { // 6-minutes
						//myPosta.clearTimeout();
						myPosta.setTimeout();
					}
					else {
						$('#globalContainer input:button').val('Invia & attiva realtime');
						//$('#globalContainer textarea').val( function(i,val){ return val + ' ... ... l’aggiornamento automatico è stato disattivato per inattività, invia un messaggio per ripristinarlo!'; } );
					}
				}
				// scroll and height ### questa chiamata è doppia ## già chiamato da loadRecipients({}) ###
				setContentHeight( { 'scroll' : scrollDown } );
				//$('#globalContainer ._2nb ._2nb-').html('<div class="_kbig">Conversazione caricata</div>');
			},
			error: function() {
				myPosta.ajax = false;
				$('#globalContainer ._2nb ._2nb-').html('<div class="_kbig-c"><div class="_kbig">La conversazione non esiste</div></div>');
				setContentHeight();
			}
		});
	
	}

});
</script>

</body>

</html>
 
Ultima modifica:
Potreste darmi qualche aiutino? @criric
Fai già delle chiamate ajax a delle pagine asp, è questo il trucco!
Qual'è il problema ?
 
Fai già delle chiamate ajax a delle pagine asp, è questo il trucco!
Qual'è il problema ?

Il problema è che non c'è la connessione al database ed il codice è solamente quello che vedi sopra.
Quindi, come potrei inserire la connessione in ajax e, tramite le variabili che ho stampato, mi si visualizza la chat cliccata?
 
In realtà includi 3 librerie javascript
HTML:
<script src="../js/jquery.autosize.min.js"></script>
<script src="../js/jquery.tokeninput.js"></script>
<script src="../js/jquery.nanoscroller.min.js"></script>
e una pagina asp che viene richiamata da ajax
Codice:
$.ajax({
    url: "posta_get.asp?callback=?",posta_get.asp
non è proprio corretto dire che il codice è tutto li.
La connessione e le query sul db si fanno nella pagina richiamata da ajax e si sfrutta l'output per riportare i dati sulla pagina chiamante.
Io asp non lo conosco ,ma , la logica è sempre la stessa per tutti i linguaggi.
 
In realtà includi 3 librerie javascript
HTML:
<script src="../js/jquery.autosize.min.js"></script>
<script src="../js/jquery.tokeninput.js"></script>
<script src="../js/jquery.nanoscroller.min.js"></script>
e una pagina asp che viene richiamata da ajax
Codice:
$.ajax({
    url: "posta_get.asp?callback=?",posta_get.asp
non è proprio corretto dire che il codice è tutto li.
La connessione e le query sul db si fanno nella pagina richiamata da ajax e si sfrutta l'output per riportare i dati sulla pagina chiamante.
Io asp non lo conosco ,ma , la logica è sempre la stessa per tutti i linguaggi.

Mhmmm.. Quindi se facessi una pagina chiamata posta_get.php e ci inserisco una query che richiama la tabella pvt_msg dal db, dici che potrebbe funzionare?
Poi sta il fatto che ci sono variabili in js.. come le collego, tramite while, con le variabili del php?
 
Ultima modifica:
Si, il ragionamento è corretto.
Calcola che ci sono diversi modi per sfruttare l'output generato dalla pagina richiamata da ajax.
Uno molto interessante è quello di creare codice javascript e farlo eseguire nell success della chiamata tramite la funzione eval().
Codice:
success: function(data) {
                 eval(data);
}
 
Si, il ragionamento è corretto.
Calcola che ci sono diversi modi per sfruttare l'output generato dalla pagina richiamata da ajax.
Uno molto interessante è quello di creare codice javascript e farlo eseguire nell success della chiamata tramite la funzione eval().
Codice:
success: function(data) {
                 eval(data);
}

Capito.. ma comunque, come potrei collegare le variabili js con quelle php della pagina posta_get.php? Non penso di dover usare la funzione eval()..
 
Non ho letto tutto il tuo codice : 500 righe per un esempio mi sembrano troppe.
ti faccio un semplice esempio

Codice:
var prova = 1;
$.ajax({
        type: "POST",
        url: "pagina.php",
        success: function(response){
            eval(response);
        }
    });
pagina.php
PHP:
<?php

echo "prova = 2;";
dopo la chiamata ajax la variabile prova avrà come valore 2
 

Discussioni simili