[RESOLU] AJAX : Empêcher le rechargement d'une page

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : [RESOLU] AJAX : Empêcher le rechargement d'une page

Re: [RESOLU] AJAX : Empêcher le rechargement d'une page

par lucieemtl » 12 janv. 2016, 13:13

En fait ça n'était qu'une question de chemin relatif. Il n'y avait pas vraiment d'erreurs ^^'

Re: [RESOLU] AJAX : Empêcher le rechargement d'une page

par Patriboom » 11 janv. 2016, 16:56

Et quelle solution avez-vous choisie?

Re: AJAX : Empêcher le rechargement d'une page

par lucieemtl » 11 janv. 2016, 11:57

Bon et bien c'est tout, j'ai trouvé toute seule ! Bonne journée !

Re: AJAX : Empêcher le rechargement d'une page

par lucieemtl » 11 janv. 2016, 11:37

Mon code a changé et est le suivant (si quelqu'un avait la gentillesse de m'aider....) :

multiForm.php :

Code : Tout sélectionner

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div id="multi-msg"></div> <div class="pluginLucie"> <form name="multiform" id="multiform" action="multiFormSubmit.php" method="POST" enctype="multipart/form-data"> <h1 style="font-size: 18px;">Associer une image à cette page ?</h1><hr/><input type="file" name="imageLucie" /><br/> </form> <input type="button" id="multi-post" class="myButton" value="Ajouter"></input> </div> <script> $(document).ready(function() { $("#multiform").submit(function(e) { var formObj = $(this); var formURL = formObj.attr("action"); if(window.FormData !== undefined) // for HTML5 browsers // if(false) { var formData = new FormData(this); $.ajax({ url: formURL, type: 'POST', data: formData, mimeType:"multipart/form-data", contentType: false, cache: false, processData:false, success: function(data, textStatus, jqXHR) { function include(file) { var oScript = document.createElement("script"); oScript.src = file; document.body.appendChild(oScript); $("#multi-msg").html('<pre><code>'+data+'</code></pre>'); } include("multi-form-submit.php"); }, error: function(jqXHR, textStatus, errorThrown) { $("#multi-msg").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus='+textStatus+', errorThrown='+errorThrown+'</code></pre>'); } }); e.preventDefault(); } }); $("#multi-post").click(function() { $("#multiform").submit(); }); }); </script> </body> </html>
Il n'y a que multiForm.php qui a été modifiée, au niveau du cas Success. J'ai testé le code, cela marche niquel, mais lorsque j'essai de passer mon code dans mon plugin sur wordpress, j'ai cette erreur-ci :

"POST http://localhost/wordpress2/wp-admin/mu ... Submit.php 404 (Not Found)"

En fait, j'ai changé le nom de la feuille dans action dans le formulaire, ça me met la même chose. C'est comme s'il ne trouvait pas multiFormSubmit.php.

Aidez-moi s'il vous plait :(

Re: AJAX : Empêcher le rechargement d'une page

par lucieemtl » 11 janv. 2016, 10:38

Quelqu'un pourrait-il m'éclairer ? :(

Re: AJAX : Empêcher le rechargement d'une page

par lucieemtl » 08 janv. 2016, 17:17

Ben en fait j'y suis presque... C'est juste que mon script maintenant ne passe pas par le cas success.
Voici mon code :


La première page : essaiplugin.php (la principale)

Code : Tout sélectionner

<?php /* Plugin Name: Essai plugin Plugin URI: http://zero-plugin.com Description: Un plugin d'introduction pour le développement sous WordPress Version: 0.1 Author: Lucie MUTEREL Author URI: http://votre-site.com License: GPL2 */ ?> <!DOCTYPE> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <meta charset="utf-8"/> <style> #plugin{ width: 45%; display: block; clear: both; float: left; margin-top: auto; margin-left: 25%; margin-bottom: 5%; text-align: center; } </style> </head> <body> <?php add_filter('wp_title', 'zero_modify_page_title', 20) ; //Le filtre wp_title... function zero_modify_page_title($title) { //...est appelé avec la fonction zero_modify_page_title... return $title . ' | Avec le plugin de Lucie !' ; } //...et modifie l'attribut <title> sur chaque page comme indiquer ci-avant. function test($x){ if($x==3){echo '<img src="' . get_bloginfo('template_directory') . '/img/comedia_logo.png" />';}else{echo "MANQUE DU LOGO DE COMEDIA STUDIO : ERREUR !";} } $adresseSiteLocale = "/wordpress2"; if(($_GET["post_type"] == "page" and $_SERVER["SCRIPT_NAME"] == $adresseSiteLocale ."/wp-admin/post-new.php") OR ($_SERVER["SCRIPT_NAME"] == $adresseSiteLocale ."/wp-admin/post.php" AND $_GET["post"] AND $_GET["action"]=="edit")){ add_action('admin_footer', 'form_image'); } ?> <?php function form_image(){ echo '<div id="plugin">'; include("multiForm.php"); echo '</div>'; } ?> </body> </html>
La deuxième : multiForm.php

Code : Tout sélectionner

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="multi-msg"></div> <div class="pluginLucie"> <form name="multiform" id="multiform" action="multi-form-submit.php" method="POST" enctype="multipart/form-data"> <h1 style="font-size: 18px;">Associer une image à cette page ?</h1><hr/><input type="file" name="imageLucie" /><br/> </form> <input type="button" id="multi-post" class="myButton" value="Ajouter"></input> </div> <script> $(document).ready(function() { $("#multiform").submit(function(e) { $("#multi-msg").html("<img src='loading.gif'/>"); var formObj = $(this); var formURL = formObj.attr("action"); if(window.FormData !== undefined) // for HTML5 browsers // if(false) { var formData = new FormData(this); $.ajax({ url: formURL, type: 'POST', data: formData, mimeType:"multipart/form-data", contentType: false, cache: false, processData:false, success: function(data, textStatus, jqXHR) { $("#multi-msg").html('<pre><code>'+data+'</code></pre>'); $('#multi-msg').fadeIn(2000); }, error: function(jqXHR, textStatus, errorThrown) { $("#multi-msg").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus='+textStatus+', errorThrown='+errorThrown+'</code></pre>'); } }); e.preventDefault(); e.unbind(); } }); $("#multi-post").click(function() { $("#multiform").submit(); }); }); </script> </body> </html>
Et la dernière : multi-form-submit.php (celle qui envoi les données dans la base de données)

Code : Tout sélectionner

<?php $bdd = "wordpress2"; $host= "localhost"; $user= "root"; $pass= ""; @mysql_connect($host,$user,$pass) or die("Impossible de se connecter à la base de données"); @mysql_select_db($bdd); if(!empty($_FILES)) { $img_name = $_FILES['imageLucie']['name']; $img_extension = strrchr($img_name, "."); $extensions_autorisees = array('.png', '.PNG'); $img_tmp_name = $_FILES['imageLucie']['tmp_name']; $destination="../wp-content/uploads/lucie/"; if(file_exists($destination)) { if(file_exists($destination . $img_name)) { echo "Le fichier existe déjà !"; } } else{ mkdir($destination, 0777, true); } if(in_array($img_extension, $extensions_autorisees)) { if(move_uploaded_file($img_tmp_name, $destination.$img_name)){ $sql = "INSERT INTO filesLucie(id, nameFile, urlFile) VALUES('','$img_name','$destination$img_name')"; mysql_query($sql) or die('Erreur SQL !'.$sql.'<br>'.mysql_error()); echo '<img src="' . $destination . $img_name .'"/>'; } else{ echo '<div class=\'pluginLucie\'>Une erreur est survenue lors de l\'envoi du fichier.</div>'; } } else{ echo '<div class=\'pluginLucie\'>Veuillez vérifier les extensions acceptées s\'il vous plaît.</div>'; } } ?>
Vous voyez le deuxième fichier, multiForm.php ? La boucle success ? Et bien mon algorithme pas directement au cas error ...
Voyez-vous même une erreur toute bête ?

Re: AJAX : Empêcher le rechargement d'une page

par Patriboom » 08 janv. 2016, 15:04

Et si tu faisais une lecture de l'historique de navigation ?
Si ta page se trouvait en dernier, ce serait un cas de rechargement, donc une action différente serait posée. javascript: history

Ou encore: dès le chargement de ta page, tu te mets un cookie ou une valeur en $_SESSION. Si cette valeur existe avant même de la définir, c'est que t'es en situation de rechargement. La valeur en question pourrait être l'heure et si l'écart entre cette valeur et l'heure actuelle est moindre que x secondes .... tu prends les dispositions nécessaires « Vous avez le droit de garder le silence, tout ce que vous clavarderez sera .... » ou quelque chose du genre. ;)

Re: AJAX : Empêcher le rechargement d'une page

par lucieemtl » 08 janv. 2016, 10:38

Voici mon code, et rien ne fonctionne. La page se recharge tout de même.

Code : Tout sélectionner

<script type="text/javascript"> $("#multiform").submit(function(ev) { ev.preventDefault(); var formObj = $(this); var formUrl = formObj.attr("action"); var formData = new FormData(this); $.ajax({ url: formUrl, async: true, type: 'POST', data: formData, success: function(data, textStatus, jqXHR) { $('#zoneRechargement').html(data); }, error: function(jqXHR, textStatus, errorThrown) { console.log("ERREUR C.1-Client"); } }); }); $("#multiform").submit(); </script>
Et Ryle, j'avais pensé à cette idée. Mais un bouton submit est important, sinon je ne peux pas envoyer mes données dans la base de données :/

Re: AJAX : Empêcher le rechargement d'une page

par Ryle » 07 janv. 2016, 18:49

Bonjour,

Tu peux également remplacer ton bouton de type "submit" par un bouton de type "button" qui ne déclenchera pas l'envoi du formulaire.
Au niveau du script, au lieu de détecter l'action de soumission du formulaire, il te suffit alors de détecter le clic sur le bouton pour déclencher ton appel ajax :)

Re: AJAX : Empêcher le rechargement d'une page

par ynx » 07 janv. 2016, 18:33

Salut,

D'après la doc de jQuery, la solution proposé par or 1 est bien la bonne :
we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler
L'autre solution est que ta fonction de callback retourne le booléen false.

https://api.jquery.com/submit/

Bonne journée

Re: AJAX : Empêcher le rechargement d'une page

par lucieemtl » 07 janv. 2016, 18:19

Pas vraiment mon code a changé, j'avais les mêmes erreurs, j'ai rajouté ce que vous m'avez conseillé, ça ne change rien..

Re: AJAX : Empêcher le rechargement d'une page

par or 1 » 07 janv. 2016, 18:07

à priori, il faut ajouter ev.preventDefault();

AJAX : Empêcher le rechargement d'une page

par lucieemtl » 07 janv. 2016, 11:54

Bonjour à toutes et à tous,

J'ai récemment présenté un sujet sur ce forum dont la problématique ne représente pas vraiment mon problème.
Alors je reformule ici :

Je créer un plugin Wordpress qui consiste à associer une image à une page.
J'ai donc créer un formulaire qui apparaît depuis la création de page dans le backend de Wordpress, et les images s'envoient bien dans la base de données, pas de soucis, également dans un répertoire temporaire. Il n'y a aucun problème.

Enfin si, un : le rechargement de page !

Si vous voulez, dès lors que l'image ait bien été enregistrée là où il le fallait, un message "Fichier envoyé avec succès" est visible, UNE FOIS la page rechargée. Et si j'étais en train d'écrire un article.. Zou ! Plus rien !

Pour remédier à ce problème, j'étais donc en train de suivre un tutoriel sur comment ne recharger qu'une partie de page (http://pausecafe.fdev-creation.com/jque ... dune-page/), mais le soucis est que j'utilise un formulaire, avec la méthode POST.

Voici mon code (je pense que mon formulaire et mon script vous suffiront à comprendre ce que j'ai fais) :

Mon formulaire :

Code : Tout sélectionner

echo '<div class=\'pluginLucie\' id=\'zoneRechargement\'><strong>Veuillez choisir ci-après un fichier à enregistrer !</strong>'; echo '<form method="POST" action="#" id="ajouterElement" enctype="multipart/form-data">'; echo '<br/><br/> <input type="hidden" name="MAX_FILE_SIZE" value="250000"> <input type="file" name="imageLucie"/> <input type="submit" name="upload" value="Ajouter !" id="chercher"> </form></div>';
Script :

Code : Tout sélectionner

<script type='text/javascript'> var frm = $('#ajouterElement'); frm.submit(function(ev){ $.ajax({ url: '../wp-content/uploads/lucie/', async: true, dataType : 'html', var data = $destination$img_name; success:function($data){ $('#zoneRechargement').empty().hide(); $('#zoneRechargement').append(data); $('#zoneRechargement').fadeIn(2000); } error:function(msg, string){ alert( 'Error !: ' + string ); }, }); }); </script>