Auito shoutbox

**wick87** · 25-11-2009, 17:02

Ciao ragazzi, vorrei sapere se qualcuno riesce a darmi una mano.

ho una chat in javascript, che forse qualcuno conosce già. Il suo nome è JQuery. composta da una pagina HTML con la visualizzazione dei messaggi in chat con subito sotto il form di invio mex e gli script in javascript.

codice:

  <body>
  <center>
  <div id="daddy-shoutbox">
    <div id="daddy-shoutbox-list"></div>
    

    <form id="daddy-shoutbox-form" action="demos/jquery-shoutbox/daddy-shoutbox.php?action=add" method="post"> 
    Nick: <input type="text" name="nickname" /> Say: <input type="text" name="message" />
    <input type="submit" value="Submit" />
    <span id="daddy-shoutbox-response"></span>
    </form>
  </div>
  </center>
  
  <script type="text/javascript">
        var count = 0;
        var files = 'demos/jquery-shoutbox/';
        var lastTime = 0;
        
        function prepare(response) {
          var d = new Date();
          count++;
          d.setTime(response.time*1000);
          var mytime = d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
          var string = '<div class="shoutbox-list" id="list-'+count+'">'
              + '<span class="shoutbox-list-time">'+mytime+'</span>'
              + '<span class="shoutbox-list-nick">'+response.nickname+':</span>'
              + '<span class="shoutbox-list-message">'+response.message+'</span>'
              +'</div>';
          
          return string;
        }
        
        function success(response, status)  { 
          if(status == 'success') {
            lastTime = response.time;
            $('#daddy-shoutbox-response').html('[img]'+files+'images/accept.png[/img]');
            $('#daddy-shoutbox-list').append(prepare(response));
            $('input[@name=message]').attr('value', '').focus();
            $('#list-'+count).fadeIn('slow');
            timeoutID = setTimeout(refresh, 3000);
			
          }
        }
        
        function validate(formData, jqForm, options) {
          for (var i=0; i < formData.length; i++) { 
              if (!formData[i].value) {
                  alert('Please fill in all the fields'); 
                  $('input[@name='+formData[i].name+']').css('background', 'red');
                  return false; 
              } 
          } 
          $('#daddy-shoutbox-response').html('[img]'+files+'images/loader.gif[/img]');
          clearTimeout(timeoutID);
        }

        function refresh() {
          $.getJSON(files+"daddy-shoutbox.php?action=view&time="+lastTime, function(json) {
            if(json.length) {
              for(i=0; i < json.length; i++) {
                $('#daddy-shoutbox-list').append(prepare(json[i]));
                $('#list-' + count).fadeIn('slow');
              }
              var j = i-1;
              lastTime = json[j].time;
            }
            //alert(lastTime);
          });
          timeoutID = setTimeout(refresh, 3000);
        }
        
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            var options = { 
              dataType:       'json',
              beforeSubmit:   validate,
              success:        success
            }; 
            $('#daddy-shoutbox-form').ajaxForm(options);
            timeoutID = setTimeout(refresh, 100);
        });
  </script>
</body>

il form non fa altro che inviare ad un file php, il quale scriverà su un .txt il messaggio e manda il responso positivo a questa pagina HTML aggiungendo un div con il nuovo commento.

quello che io vorrei è utilizzare questa chat come una shoutbox, quindi inviare un messaggio attraverso il form e visualizzare solo l'ultimo inviato. Quindi dallo script in php ho corretto la cosa e adesso svuota il txt prima di inserire il record. ma nella pagina HTML il div viene sempre aggiunto e quindi visualizza uno sotto l'altro i messaggi.

potete aiutarmi? qualcuno conosce qualche altro script in javascript? grazie.

**m4rko80** · 25-11-2009, 17:27

Ciao, non l'ho mai usato ma per darti una mano con jquery non sapendo bene a cosa corrispondono i tuoi id vari e se questo e' il punto in cui viene aggiunto il msg nell html
for(i=0; i < json.length; i++) {
$('#daddy-shoutbox-list').append(prepare(json[i]));
$('#list-' + count).fadeIn('slow');
}
con .append() si aggiunge un qualcosa nell id indicato( '#daddy-shoutbox-list' ) , volendo potresti svuotare l html(quindi div se non ho capito male) con $('#tuoid').html(); e poi inserire i nuovi dati senza accodare

**wick87** · 25-11-2009, 17:37

Ciao, la tua intuizione è correta. il sistema logico è semplice conosco AS e quindi quello lo ho percepito. Il problema è che non saprei dove apportare la tua modifica. Puoi essere più specifico? Grazie

**m4rko80** · 25-11-2009, 17:57

il codice che inserisce il messaggio nuovo o quello che e' forse e' questo?

function refresh() {
$.getJSON(files+"daddy-shoutbox.php?action=view&time="+lastTime, function(json) {
if(json.length) {
for(i=0; i < json.length; i++) {
$('#daddy-shoutbox-list').append(prepare(json[i]));
$('#list-' + count).fadeIn('slow');
}
var j = i-1;
lastTime = json[j].time;
}
//alert(lastTime);
});
timeoutID = setTimeout(refresh, 3000);
}

$('#daddy-shoutbox-list').append(prepare(json[i]));

In questo id viene aggiunto qualcosa, non so se prepare(json[i]) e' il contenuto/mesaggio, si tratterebbe di svuotare prima il contenuto gia presente e poi inserire il nuovo appunto

**wick87** · 25-11-2009, 18:44

posso contattarti da qualche parte? ti mostro lo script

**wick87** · 25-11-2009, 19:03

ok ho risolto cosi:

function prepare(response) {
var d = new Date();
count++;
d.setTime(response.time*1000);
var mytime = d.getHours()+':'+d.getMinutes()+':'+d.getSeconds() ;
$('#daddy-shoutbox-list').empty();
var string = '<div class="shoutbox-list" id="list-'+count+'">'
+ '<span class="shoutbox-list-time">'+mytime+'</span>'
+ '<span class="shoutbox-list-nick">'+response.nickname+':</span>'
+ '<span class="shoutbox-list-message">'+response.message+'</span>'
+'</div>';
return string;
}

che ne dici?

**m4rko80** · 26-11-2009, 10:47

Ho letto ora scusa... se hai risolto bene dai

Non ho il codice sotto mano ma mi sembre di aver capito che hai svuotato l html con empty().
Se funziona bene, non vorrei dire una fesseria ma mi pare che a volte empty() non va con certi tag

**wick87** · 26-11-2009, 15:05

no no, per fortuna và benissimo. Certo consideriamo che lo script di inserimento è dentro un ciclo for, e io all'interno di questo ciclo svuoto l'html. Non perfettamente correto, ma và !

grazie tante

**fabiox3** · 06-03-2010, 20:07

Ciao a tutti! sto usando anche io daddy shoutbox e ho un problema, che sicuramente è un'idiozia da risolvere, ma sono abbastanza nuovo nel settore.

In pratica questo shoutbox scrive delle righe all'infinito, mentre io voglio che vengano visualizzate solamente le ultime 5/10 righe.

Come potrei fare?

Help me please!!

codice:

        var count = 0;
        var files = 'demos/jquery-shoutbox/';
        var lastTime = 0;
        
        function prepare(response) {
          var d = new Date();
          count++;
          d.setTime(response.time*1000);
          var mytime = d.getHours()+':'+d.getMinutes();
          var string = '<div class="shoutbox-list" id="list-'+count+'">'
              + '<span class="shoutbox-list-time">'+mytime+'</span>'
              + '<span class="shoutbox-list-nick">'+response.nickname+':</span>'
              + '<span class="shoutbox-list-message">'+response.message+'</span>'
              +'</div>';
          
          return string;
        }

**meemira** · 23-04-2010, 01:10

Devi modificare css.

codice:

#daddy-shoutbox-list { text-align: left; margin: 0px auto; height: 290px; overflow: auto; overflow-x: hidden; overflow-y: auto; }

il problema è che non riesco a mettere il binario che rimanga giu cioè bisogna usare un scrollTop

Discussione: Auito shoutbox

Strumenti discussione

Ricerca discussione

Visualizza

Aiuto shoutbox

aiuto!!

Permessi di invio