11496 sujets

JavaScript, DOM et API Web HTML5

Tchat Ajax

Bonsoir, voilà ça fait un moment que je cherche une solution à mon problème!
Je commence à devenir fou!!!

J'ai mit en place un tchat tout es ok sauf la partie envoi de messages...
Le ping pour dire que l'on est connecté Ok,
Récupération des membres connectés Ok,
Créations de 'docklet' de discutions Ok,
Récupération des messages Ok,

Le soucis est lorsque j'ai deux docklets ouverts il existe donc deux formulaires pour envoyer des messages à deux utilisateurs différents.

Lors que je click sur le bouton d'envoi je renvoi un alert en jquery pour tester.
Et bien que se soit le premier ou le deuxieme docklet il me retourne le contenu du premier...

Voici donc la fonction d'envoi : 

function sendMess(){

	$('#docklets .docklets-item .docklet form.new-mess');
	
	$(this).submit(function(e){
		e.preventDefault();
		$this = $(this);
		var mess = $('.my-new-mess').val();

		alert(mess);
	});
	
}



coté html
chaque docklet est créé et ajouté en ajax lors du click sur un membre connecté dans la sidebar

<ul id="docklets">
<li id="userId-21" class="docklets-item" value="21-Loscar">
   <div class="docklet">
      <span class="user-data">
           Loscar
           <div class="close-docklet" onclick="closeChat(21)">x</div>
      </span>
      <div class="messages"><!--les messages sont ajoutés ici en Ajax--></div>
      <form class="new-mess" method="POST" action="">
          <input class="to-user-id" type="hidden" value="21" name="user_id">
          <textarea class="my-new-mess" name="message"></textarea>
          <input type="submit" value="" name="send_mess">
      </form>
   </div>
</li>
<li id="userId-24" class="docklets-item" value="24-Luis">
   <div class="docklet">
      <span class="user-data">
         Luis
         <div class="close-docklet" onclick="closeChat(24)">x</div>
      </span>
      <div class="messages">
          <div class="mess">
              <p class="mess-data">Sam. 15.11.14 à 26:18</p>
              <p class="mess-content">
                   <span class="mess-from">Popol</span>
                    yoyoy
             </p>
          </div>
          <div class="mess">
         
          </div>
      </div>
      <form class="new-mess" method="POST" action="">
          <input class="to-user-id" type="hidden" value="24" name="user_id">
          <textarea class="my-new-mess" name="message"></textarea>
          <input type="submit" value="" name="send_mess">
      </form>
   </div>
</li>
</ul>

Modifié par juancely (15 Nov 2014 - 23:59)
Bonjour.

Ton problème semble relativement normal, tu soumets les formulaires via une classe qui est identique pour les deux, donc il prend le premier qui vient.

Ensuite, je ne vois pas à quel moment tu appelles ta fonction sendMess() ?
Salut, et bien la fonction sendmess() est appelé lors de la soumission du formulaire, qui traité les données en ajax. Donc logiquement même si la fonction est la même pour les différentes fenêtres de discutions, il devrait prendre le contenu du formulaire qui est soumis et non pas celui du premier?
Modifié par juancely (20 Nov 2014 - 10:04)
Désolé de répondre tardivement.
J'ai trouvé un autre moyen d'effectuer le sendMess();
Par contre j'ai un soucis similaire... lors de la fermeture du docklet.

Quand j'en ai deux d'ouverts que je ferme le premier c'est ok, si je ferme le second et bien il est bien supprimé mais lors du chargement de page il récupère ce second et pas le premier. il devrait faire le contraire...

Lors de l'ouverture d'un docklet il est enregistré dans un array dans variable session

quand je regarde dans la console il envoie bien le bon id du docklet à fermer, alors je comprends pas...

Voici la fonction d'ouverture docklet


function addUserDocklet(){
	$('#flow #flow-sidebar #users').on('click','.user',function(){
		if ($(this).hasClass('on')) {var status = 'on';}
		if ($(this).hasClass('off')) {var status = 'off';}
		
		var id = $(this).val();
		var nick = $(this).children('.nick').html();
		
		var userDocklet = setUserDocklet(status,id,nick);

		if(!$('#flow #flow-dock #docklets #'+id).length){
			$('#flow #flow-dock #docklets').prepend(userDocklet);

			var userData = {};
			userData['status'] = status;
			userData['id'] = id;
			userData['nick'] = nick; 

			$.post(flowDir+'flow.php',{addUserDocklet:userData});
			return false;
		}
		
	});
}


voici la fonction qui remets les docklets actif au chargement de page


function getUserDocklet(){

	$.post(flowDir+'flow.php',{getUserDocklet:''},function(data){
	
		$.each(data,function(key){
			var userDocklet = setUserDocklet(data[key]['status'],data[key]['id'],data[key]['nick']);
			$('#flow #flow-dock #docklets').prepend(userDocklet);
		});

	},'json');

	addUserDocklet();
	hideUserDocklet();
	reduceUserDocklet();
}


Celle ci crée le docklet

function setUserDocklet(status,id,nick){
	var userDocklet = '<li class="docklet" value="'+id+'"><div class="outside"><div class="data '+status+'"><div class="status"></div><div class="nick"><a href="" title="'+nick+'">'+nick+'</a></div><div class="options"><span class="reduce">-</span><span class="hide">x</span></div></div><div class="messages"></div><form action="" method="POST" class="new-mess" id="'+id+'"><textarea class="mess"></textarea><button class="send"></button></form></div></li>';
	return userDocklet;
}


Cette dernière est pour la fermeture


function hideUserDocklet(){

	$('#flow #flow-dock #docklets').on('click','.hide',function(){
		var dockletId = $(this).parents('.docklet').val();
		
		$.post(flowDir+'flow.php',{hideUserDocklet:dockletId},function(data){
			if (data = 'true') {
				$('#flow #flow-dock #docklets li[value="'+dockletId+'"]').remove();
			}
		});	

	});
}


coté php 


if (isset($_POST['getUserDocklet'])) {

	$dockletActive = array();

	foreach ($_SESSION['FLOW_DOCKLETS'] as $key => $docklet) {
		array_push($dockletActive, $docklet);
	}

	echo json_encode($dockletActive);
}

if (isset($_POST['addUserDocklet'])) {

	$userData = $_POST['addUserDocklet'];

	if (!isset($_SESSION['FLOW_DOCKLETS'])) {
		$_SESSION['FLOW_DOCKLETS'] = array( 0 => $userData );
	}
	else {

		$idsInArray = array();

		foreach ($_SESSION['FLOW_DOCKLETS'] as $key => $docklet) {
			array_push($idsInArray, $docklet['id']);
		}

		if (in_array($userData['id'], $idsInArray)) {}
		else {array_push($_SESSION['FLOW_DOCKLETS'], $userData);}
	}
}

if (isset($_POST['hideUserDocklet'])) {

	$id = $_POST['hideUserDocklet'];
	$docklets = $_SESSION['FLOW_DOCKLETS'];
	$unsetkey = array_search($id, $docklets);

	$_SESSION['FLOW_DOCKLETS'] = array();
	unset($docklets[$unsetkey]);

	foreach ($docklets as $key => $docklet) {
		array_push($_SESSION['FLOW_DOCKLETS'], $docklet);	
	}

	if (empty($_SESSION['FLOW_DOCKLETS'])) {
		unset($_SESSION['FLOW_DOCKLETS']);
	}

	echo json_encode('true');
}


huum je vois qu'il me remplace certaine variables dans l'affichage du code par des images, c'est sensé être '['key']' -> sans les guillemets

Merci pour ton aide!
Modifié par juancely (23 Nov 2014 - 15:19)
Sujet clos
Aller à