bonjour,
j'upload des photo avec ajax donc mon systeme fonctionne comme ceci:
j'ai une page qui m'affiche la liste des photos et ou je peux en ajouter
je choisi ma photo et je l'envoie ce qui apelle la page d'upload
apres cela j'aimerais apeller une nouvelle page afin d'afficher la liste de mes photos mise à jour
car si je reste sur la page d'upload je peux uploader à nouveau mais j'ai un bug d'affichage pendant le traitement de la requete
et la personne ne veras pas que le fichier est toujours en cours d'upload
donc voici mon code ajax:
$(document).ready(function (e) {
$("#uploadForm").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "connection.php",
type: "POST",
data: new FormData(this),
beforeSend: function(){$("#body-overlay").show();},
contentType: false,
processData:false,
success: function(data)
{
$("#targetLayer").html(data);
$("#targetLayer").css('opacity','1');
setInterval(function() {$("#body-overlay").hide(); },500);
document.forms['uploadForm'].reset();
the_return.innerHTML = '<div style="text-align: center;" class="file-return"><label for="my-file" class="input-file-trigger" tabindex="0">Sélectionner une photo...</label></div>';
},
error: function()
{
console.log(error);
alert(error);
},
complete : function(resultat, statut)
{
the_return.innerHTML = '/include/affiche_photo.php';
}
});
}));
});
la partie ou je ne sais pas quoi mettre pour apeller la page en question:
complete : function(resultat, statut)
{
}
merci pour la reponse mais non ça me fait une redirection c'est pas ce que je souhaite
l'objectif est de raffraichir la liste des photos apres l'upload
salut,
c'est pas ça que tu veux, mais c'est pourtant ça que tu as demander ;)
je te site :
"apres cela j'aimerais apeller une nouvelle page afin d'afficher la liste de mes photos mise à jour"
sinon, c'est pas déjà fait dans ton success ?
$("#targetLayer").html(data);
@plus
Pierre
je me suis mal expliqué
en fait quand je valide le formulaire c'est page d'upload qui sera affiché et si je reste sur celle ci j'ai un bug d'affichage lors de l'envoie d'une nouvelle photo du moins c'est ce que moi je pense je suis pas un as du javascript
ce que tu m'as montré plus haut c'est l'affichage du div pendant l'upload
Si tu veux faire un refresh de la page sur laquelle tu te situe il suffit de faire un location.reload();
bon ben ce que j'essaie de faire sert à rien c'est bien Pierrot01 qui a raison
ce code m'affiche bien les photos mise à jour apres upload
$("#targetLayer").html(data);
ce div me sert à afficher l'image de chargement pendant l'upload
<div id="body-overlay"><div><img src="/images/loading.gif" width="64px" height="64px"/></div></div>
par contre si je poste ensuite une nouvelle image elle seras bien uploadé mais le div plus haut reste juste affiché quelques secondes et disparait et je vois vraiment pas pourquoi
moi, je vois pourquoi ;)
setInterval(function() {$("#body-overlay").hide(); },500);
il faut que tu fonctionnes avec des promises
du genre
$.ajax({ blablal}).done(function(data){.......})
@plus
Pierre
Il te conseille d'utiliser les promesses pour ta requete. Une petite recherche Google te permettra de mieux comprendre. Tu peux par exemple utiliser axios qui te permettra de faire des request promise assez simplement.
salut,
même pas besoin d'axio.
regarde comment je fais dans mes app.
$.post(pathfilephp+'update_table.php?table=b_outils',
{
"id" : -1,
"libelle" : '_enregistrment ajouter_',
"commentaire" : ''
}
).done(function(data){
var r = JSON.parse(data);
if(r.msgerr==''){ // ici je rafraichis ma liste, de plus je me positionne sur le dernier enregistrement créé
$("#jqlist_paramboiteoutils").jqGrid().trigger("reloadGrid");
var gridb = $("#jqlist_paramboiteoutils");
var text = r.id;
var postdata = gridb.jqGrid('getGridParam','postData');
$.extend(postdata,{filters:'',searchField: 'id', searchOper: 'eq', searchString: text});
gridb.jqGrid('setGridParam', {search: text.length>0, postData: postdata});
gridb.trigger("reloadGrid",[{page:1}])
}else{
notify("message : " + r.msgerr);
}
})
de cette facon, tu n'as plus besoin de ton setTimeOut
d'ailleur, c'est aberrant, parce que tu estimes que ton upload durera toujours 500ms, si c'est une images de quelques centaines de mégas, ça mettera plus de 500ms.
au .done(....) ton fichier est uploader, donc tu peut hider ton "#body-overlay"
@plus.
Pierre
bon je sais pas si c'est la bonne solution mais mais ça fonctionne avec la petite modification effectué
$(document).ready(function (e) {
$("#uploadForm").on('submit',(function(e) {
the_return.innerHTML = '<div style="text-align: center;"><h3>Chargement en cours, veuillez patienter</h3></div>';
e.preventDefault();
$.ajax({
url: "connection.php",
type: "POST",
data: new FormData(this),
beforeSend: function(){$("#body-overlay").show();},
contentType: false,
processData:false,
success: function(data)
{
$("#targetLayer").html(data);
$("#targetLayer").css('opacity','1');
$("#body-overlay").hide();
//setInterval(function() {$("#body-overlay").hide(); },500);
document.forms['uploadForm'].reset();
the_return.innerHTML = '<div style="text-align: center;" class="file-return"><label for="my-file" class="input-file-trigger" tabindex="0">Sélectionner une photo...</label></div>';
},
error: function()
{
console.log(error);
alert(error);
},
complete : function(resultat, statut)
{
}
});
}));
});
en tout cas merci pour votre aide je pensais pas que ça venais de cette ligne vu que mon 1er upload fonctionnais