Postare si afisare cu ajax tip chat

[royal27]

Salut
Am un script care posteaza instantaneu dar nu face afisarea instantanee ca la un chat (cu refresh), problema e ca campul de postare si codul de inserare si afisare ce s-a postat se afla in acelasi fisier.
As vrea sa introduc un cod jquery sa afiseze instantaneu ce s-a postat.
Ma poti ajuta sa rezolv aceasta problema?

aici e forma de postare fara refresh

Cod: Selectaţi tot

<form  id="contact-form" class="bl_form text-center" action="<?php echo "index.php?page=rooms&room=$rid&rpw=$rpw&r=$r"; ?>" method="post" novalidate>
					<span class="field-wrap scrollimation fade-right">
					</span>
										<span class="field-wrap scrollimation fade-left">
						
						<textarea id="contact-message" name="message" rows="5" class="label_better requiredField" data-new-placeholder="Message" 

placeholder="Message" style="margin: 0px; width: 1210px; height: 88px;" data-error-empty="<?php echo "$insert_message"; ?>"></textarea>
					</span>
					
					<p class="text-center"><button  name="sy2" id="submit_post" type="submit"  class="btn btn-sm btn-primary icon-left" data-error-

message="Error!" data-sending-message="Sending..." data-ok-message="Message Sent"><i class="fa fa-paper-plane"></i>Send Message</button></p>
					<input type="hidden" name="submitted" id="submitted" value="true" />
					<?php echo "<postfield name=\"message\" value=\"$(message)\"/>"; ?>
				</form>

Asta e codul final de afisare mesajele din baza de date

Cod: Selectaţi tot

<?php echo make_clickable($tosay)."$link_stergere"; ?>

eu am un raspuns dar imi arata doar numele dupa ce postez,mesajul.

Cod: Selectaţi tot

  $('body').on('submit', '#contact-form', function(){
  $.post({$(this).attr("action"), $(this).serialize(), function(data){
    if(data){
      alert(data.message);
    }
  }, 'json');
  return false;
});

And the server side

Cod: Selectaţi tot

<?php 
  if($_SERVER['REQUEST_METHOD'] === 'POST'){
    // do your thing here
    echo json_encode(array("message" => make_clickable($tosay).$link_stergere));
    die();
  }
?>

Salut
In ajax trebuie sa vezi ce returneaza codul din php.
Adaugi:

Cod: Selectaţi tot

if(data){
  console.log(data);
  alert(data.message);
}

Si vezi in consola la browser ce contine argumentul data.

stai ca am facut altceva, imi returneaza pagina respectiva la 5 secunde,dar vreau sa fac sa postez instantaneu..(forma e facuta sa posteze fara refresh) dar nu reusesc sa fac functia de afisare instantaneu. Imi poti da un exemplu de post cu tot cu display cu linkul asta?

Cod: Selectaţi tot

index.php?page=roomsend&room=$rid&rpw=$rpw&r=$r

Cod: Selectaţi tot

<script>
  (function($)
  {
      $(document).ready(function()
      {
          $.ajaxSetup(
          {
              cache: false,
              beforeSend: function() {
                  $('#content').hide();
                  $('#loading').show();
              },
              complete: function() {
                  $('#loading').hide();
                  $('#content').show();
              },
              success: function() {
                  $('#loading').hide();
                  $('#content').show();
              }
          });
          var $container = $("#content");
          $container.load("<?php echo "index.php?page=roomsend&room=".$_GET["room"].""; 
    ?>");
          var refreshId = setInterval(function()
          {
              $container.load('<?php echo "index.php?page=roomsend&room=".$_GET
    ["room"].""; ?>');
          }, 5000);
      });
  })(jQuery);
</script>
<form  id="contact-form" class="bl_form text-center" action="<?php echo 
  "index.php?page=roomsend&room=$rid&rpw=$rpw&r=$r"; ?>" method="post" 
  novalidate>
  <span class="field-wrap scrollimation fade-
    right">
  </span>
  <span 
    class="field-wrap scrollimation fade-left">
  <textarea id="contact-message" 
    name="message" rows="5" class="label_better requiredField" data-new-
    placeholder="Message" placeholder="Message" style="margin: 0px; width: 1210px; 
    height: 88px;" data-error-empty="<?php echo "$insert_message"; ?>"></textarea>
  </span>
  <p class="text-center"><button  name="sy2" 
    id="submit_post" type="submit"  class="btn btn-sm btn-primary icon-left" data-error-
    message="Error!" data-sending-message="Sending..." data-ok-message="Message Sent"><i 
    class="fa fa-paper-plane"></i>Send Message</button></p>
  <input type="hidden" name="submitted" 
    id="submitted" value="true" />
  <?php echo "<postfield name=\"message\" 
    value=\"$(message)\"/>"; ?>
</form>

- am tot intrebat pe stackoverflow dar astia nu prea te ajuta cu mare lucru.

Ideea e asa, la setInterval() se apeleaza o functie care face apelul ajax, primeste raspunsul si il afiseaza intr-un element in pagina (dupa ID) cu innerHTML.
Cam asa:

Cod: Selectaţi tot

var elm_chat = document.getElementById('idul');
setInterval(function(){
  //aici se face apelul ajax, in care, la primirea raspunsului se aplica:
  elm_chat.innerHTML = 'raspunsul de la php';
}, 5000);

Iar in 'raspunsul de la php' trebuie sa ai postarile care vrei sa le afisezi, selectate si returnate de php.

la pagina asta trimite postarile si tot pagina asta le returneaza
index.php?page=roomsend&room=$rid&rpw=$rpw&r=$r
iar forma de postare e in alta pagina cu codul jquery/ajax.

Cred ca cel mai bine e sa ai un fisier php separat de index, de exemplu "chat.php" in care adaugi codul php de inregistrare si afisare postari, ca sa nu mai fie afectat de codul din "index.php".
De exemplu, asa in "chat.php":

Cod: Selectaţi tot

if(isset($_POST['message'])){
  //se inregistreaza postarea
}

// aici se definesc variabilele necesare: $tosay, $link_stergere precum si ce functie mai trebuie, si afisezi postarile
echo make_clickable($tosay).$link_stergere;  

Iar in scriptul ajax, cand se adauga mesaj il transmiti prin "post" la "chat.php". Si tot acest fisier il accesezi cu ajax in setInterval() si obtii datele returnate de "echo".

Cod: Selectaţi tot

//inregistrare postare
$('body').on('submit', '#contact-form', function(){
  $.post('chat.php', $(this).serialize(), function(resp){
    alert(resp);
  });
  return false;
});

//afisare la interval de timp
setInterval(function(){
  $('#content').load('chat.php');
}, 5000);

Incearca, vezi ce iese.

scuze de intarziere dar in seara asta am reusit sa refac scriptul care mi-ai dat tu...nu am avut timp pana acum,merge perfect,mersi mult pentru ajutor si o sa recomand site-ul tau