Signaler

Ajax: comment faire? [Résolu]

Posez votre question sevs - Dernière réponse le 24 nov. 2016 à 21:03
Bonjour,
Je cherche à configurer un script AJAX qui me permettrait d'enregistrer les données d'un textaera.
La question est comment puis je récupérer la variable correctement dans mon php?
Afficher la suite 
Utile
+1
moins plus
Bon....

J'ai finalement décidé de coder.

Déjà.. je n'avais pas vu que tu utilisais ckeditor. (ce qui n'est pas la même chose qu'avec un simple textarea).

Coté HTML ça donne ça :
<html>
  <head>
    <meta charset="utf-8">
    <title>news</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <!-- Make sure the path to CKEditor is correct. -->
    <script src="ckeditor.js"></script>
  </head>
  <body onload='timer()'>
    <form action="Mail3" method="POST">
      <textarea name="editor1" id="editor1" rows="10" cols="80" placeholder="Saissisez votre message ici"></textarea>
      <input type="submit" name="soumettre" value="envoyer">
    </form>
    <input id="infosMsg" value="" style="width:200px;">

     
  <script text="javascript">
  
  var ck = CKEDITOR.replace('editor1').on('change', function(e) {
    if (document.activeElement.nodeName == "IFRAME") {
        var thisHTML = e.editor.getData();
        var tempDiv = $('<div>').html(thisHTML);
        thisText = tempDiv.text();
        note(thisText);  
    }
  });

  function note(value){
   var data = {'text':value};
   var urlAjx = "brouillon.php";
   
   //le temps des tests
   console.log(" Note = " + value );
   
   //envoie de l'ajax
   $.ajax({
       async : false,
       type: "POST",
       url: urlAjx,
       data: data,
       dataType: 'json',
       success: function(reponse) {
         //console.log(reponse);
         $("#infosMsg").val(reponse.resultat);
       },
        error: function(xhr, status, error) {
          var err = eval("(" + xhr.responseText + ")");
          alert(err.Message);
        }      
   });
  }
  </script>
 </body>
</html>




Et pour le PHP :
<?php
//affichage des erreurs php
error_reporting(E_ALL);


$result = array(); //variable de retour à la fin du script

//Recuperation "propre" des variables
$text = isset($_POST['text']) ? $_POST['text'] : '';

//     -----   /!\ -------
//Variables à modifier avec tes infos
$bddName = "mabdd";
$user = "root";
$pwd = "";

//Connexion à la BDD
try{
  $bdd = new PDO('mysql:host=localhost;dbname='.$bddName.';charset=utf8', $user, $pwd);
  $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  $bdd->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
} catch(PDOException $e) {
   $result['erreur'][] = 'Erreur : ' . $e->getMessage();
}

 $sql = 'UPDATE test set message= :txt';
 $datas = array(":txt"=>$text);
 if($bdd){ 
  try{
   $req = $bdd->prepare($sql);
   $req->execute($datas);
   $result['resultat'] = 'Brouillon enregistré '.date(' h:i:s A');
  }catch(Exception $a){
    $result['erreur'][] = "Erreur ! ".$e->getMessage();
    $result['resultat'] =  "L'insertion a échouée" ;
    $result['erreur'][] = $_POST;
  }  
}else{
   $result['erreur'][] = "Probleme de connexion à la BDD :".$bddName;
}
  //On renvoie le resultat en json
  echo json_encode($result);

?>


NB : Tu penseras à aller modifier tes Variables avec tes infos de connexion à la BDD

Ensuite...
[]

ATTENTION : Tu dois absolument avoir tes fichier php encodés en UTF8 ainsi que ta BDD.

Va voir ici : http://www.commentcamarche.net/faq/47069-html-php-caracteres-accentues-et-l-utf8


Cordialement, 
Jordane                                                                 
sevs- 24 nov. 2016 à 19:42
merci beaucoup,
Mais j'avais fait ainsi au final. Désolé je viens de voir ton post
  <script>
        $(document).ready(function(){
            function brouillon(){
                var monTexte = $('#editor1').val();
                $.ajax({
                    method: "POST",
                    url: "brouillon.php",
                    data: {msg:monTexte},
                    success: function(data){
                        $('.result').html(data);
                    }
                });
            };
            setInterval(function(){
                brouillon();
            }, 10000);
        });
        </script>

par contre, je me demande comment adapter ton script pour ckeditor afin qu'il soit compatible. Car ici, il ne l'est pas et je suis obligé d'enlever l'éditeur
Répondre
sevs- 24 nov. 2016 à 21:03
résolu de chez résolu
Merci jordane de ton aide
Répondre
Ajouter un commentaire
Utile
+0
moins plus
Une requête AJAX est une requête classique http, elle est juste exécute de manière asynchrone. Vous pouvez envoyer des paramètres via AJAX comme ceci :
 
$.ajax({
type: $(this).attr("method"), // POST OU GET
url: $(this).attr("action"), // URL A APPELER
data: $(this).serialize(), //PARAMETRES
success: OnSuccess // CALLBACK
});.

Pour récupérer la valeur en php, il suffit de procéder normalement.
sevs- 23 nov. 2016 à 15:43
Merci doua de ta réponse.
Mais comment modifier ceci afin que tout soit automatiser.
J'ai lu sur internet qu'il était possible de faire des copies d'un message que nous sommes en train de taper avec ajax.
<script text="javascript">

function timer()
{
comp=(setTimeout("go()",5000));
}

function getXhr(){
                var xhr = null; 
            if(window.XMLHttpRequest) // Firefox et autres
               xhr = new XMLHttpRequest("post","",true); 
            else if(window.ActiveXObject){ // Internet Explorer 
               try {
                         xhr = new ActiveXObject("Msxml2.XMLHTTP");
                     } catch (e) {
                         xhr = new ActiveXObject("Microsoft.XMLHTTP");
                     }
            }
            else { // XMLHttpRequest non supporté par le navigateur 
               alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
               xhr = false; 
            } 
                                return xhr
         }

function go()
{
   var xhr = getXhr()
   // On défini ce qu'on va faire quand on aura la réponse
   xhr.onreadystatechange = function()
      {
         // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
            if(xhr.readyState == 4 && xhr.status == 200)
               {
               
                  var html = xhr.responseText;
                  document.getElementById('cible').innerHTML = html;
                  
               }
      }
	  
   xhr.open("POST","brouillon",true);
   xhr.send(null);
   setTimeout('go()',5000);
}
</script>

Merci à toi
Répondre
douarfyduck 77Messages postés mercredi 25 février 2015Date d'inscription 23 novembre 2016 Dernière intervention - 23 nov. 2016 à 16:06
Avec JQUERY et AJAX :

<textarea id="area></textarea>
<script text="javascript">
$(document).ready(function(){
$("#area").on("keypress",function(){
//Requete AJAX
})

})
</script>
Répondre
sevs- 23 nov. 2016 à 17:34
Merci de ton bout de code. Mais étant donnée que je suis une jeune codeuse en ajax, je ne comprends pas quel fonction je peut mettre pour automatisé l'enregistrement à intervalle régulier et reprendre le tout pour l'enregistrer dans ma base de donnée. Etant donné qu'il n'appelle meme plus mon script php je ne vois plus l'écho que j'ai fait
Répondre
Ajouter un commentaire
Utile
+0
moins plus
Bonjour,



quel fonction je peut mettre pour automatisé l'enregistrement à intervalle régulier

Si par "interval régulier" tu veux dire : au fur et à mesure que l'utilisateur saisi.... tu peux alors utiliser le onkeyUp ou onKeyPress sur ton textarea
http://html.com/attributes/textarea-onkeypress/

Sinon, si tu veux vraiment le faire à interval régulier.. en javascript il existe les fonctions settimeout et setInterval


Par contre, tu as oublié d'envoyer les données à ton script php (il faut mettre les variables lors du SEND
 xhr.send(tesparams);
  • tesparams pouvant être de la forme :

var text = document.getElementById('id_de_ton_textarea').value;
var tesparams = "nomdelavariablequetuveux="+text ;


après... comme le sugère douarfyduck .. il est préférable d'utiliser l'ajax en JQUERY
Voici un exemple complet : http://www.commentcamarche.net/forum/affich-33258760-remplir-un-formulaire-dynamiquement-en-fonction-d-une-combobox#2

sevs- 23 nov. 2016 à 20:32
Bonsoir Jordane45;
Tout d'abord merci de tout tes conseils. Ta fonction onkeypress m'interesse donc je me suis renseigner http://stackoverflow.com/questions/33944951/save-content-of-textarea- C'est comme ici? Ou je pars vraiment sur de très mauvaises bases en suivant ce tuto
Répondre
jordane45 15370Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 2 décembre 2016 Dernière intervention - 23 nov. 2016 à 22:13
Oui c'est pas trop mal.
Comme tu peux le voir ça utilise JQUERY et la méthode AJAX
Répondre
sevs- 24 nov. 2016 à 08:08
Merci, j'essaye de faire cela; et je reviens vers vous si j'ai le moindre soucis ou si cela est réglé.
Merci en tout cas de m'avoir aiguillé. C'est compliqué, mais vous me simplifiez les choses :)
Répondre
sevs- 23 nov. 2016 à 20:36
http://stackoverflow.com/questions/33944951/save-content-of-textarea-onkeypress-with-ajax

désolé
Répondre
Ajouter un commentaire
Utile
+0
moins plus
Je continue à nager...
Là être honnête ce n'est plus nager mais c'est comme être en train de me noyée...
Je ne comprends pas où est mon erreur. Je maîtrise parfaitement le php, et je reconnais que j'ai du mal avec le js
Le code sur la page html
<html>
    <head>
        <meta charset="utf-8">
        <title>news</title>
		    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="ckeditor.js"></script>
		
    </head>
    <body onload='timer()'>
       <form action="Mail3" method="POST">
            <textarea name="editor1" id="editor1" rows="10" cols="80" >
                Saissisez votre message ici
            </textarea>
            <script>
              
                CKEDITOR.replace( 'editor1' );
            </script>
			<script text="javascript">
             $(document).ready(function()
			 $("#editor1").bind("keypress", function() {
        note(this.value)
   });

   function note(value) {
       $.ajax({
           async : false,
           type: "POST",
           url: "./brouillon.php",
           data: {
             'text'  : value
           },
           success: function(data) {
             $("#editor1").html(html);
           }
       });
   }</script>
			<input type="submit" name="soumettre" value="envoyer">
        </form>
		
    </body>
</html>
Encore en page de teste, car à la base, je voulais faire les sauvegardes avant de la mettre en ligne

et celui sur la page de traitement que j'ai nommée brouillon

<?php
header('Content-type: application/json; charset=utf-8');

 function note() {
   $bdd = new PDO('mysql:host=localhost;dbname="";charset=utf8', '', '');
   $req = $bdd->prepare('UPDATE test set message= ?');
   $req->execute(array($_GET['text']));
   
  if($requete)
  {
    echo('Brouillon enregistré'.date(' h:i:s A').'') ;
  }
  else
  {
    echo("L'insertion à échouée") ;
  }


?>

D'habitude je fais une inclusion de mes données de connexion, je remettrais tout cela correctement quand j'aurais bien compris l'astuce.
Etre franche je ne veux pas de code tout fait; sinon je n'apprendrais pas. Juste un aiguillage de mes erreurs
Merci de tout le temps que vous m'accordez
sevs- 24 nov. 2016 à 15:55
entièrement d'accord c'est la console de gogole chrome
Répondre
jordane45 15370Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 2 décembre 2016 Dernière intervention - 24 nov. 2016 à 16:31
Il manque un ERROR dans ton ajax pour voir si il y a des soucis...

 $.ajax({
           async : false,
           type: "POST",
           url: "brouillon.php",
           data: {
             'text'  : value
           },
           success: function(data) {
             $("#editor1").html(data);
           },
          error: function(data){
            alert('error');
            console.log(data);
          }
       });
Répondre
sevs- 24 nov. 2016 à 16:52
'text' : value Erreur value is not definie
Répondre
jordane45 15370Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 2 décembre 2016 Dernière intervention - 24 nov. 2016 à 16:59
Essaye ça :
 $("#editor1").bind("keypress", function(this.value) {
        note(valeur);
});

Répondre
Ajouter un commentaire

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !