Forum d'entraide PHPFrance

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>

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

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..

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

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

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 :/

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.

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 ?

Quelqu'un pourrait-il m'éclairer ?

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

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

Et quelle solution avez-vous choisie?

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

Forum d'entraide PHPFrance

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

AJAX : Empêcher le rechargement d'une page

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

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

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

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

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

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

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

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

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

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

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

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