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
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: