Discussion :

[gui38]

Bonjour tout le monde!
Je viens de tomber sur une erreur assez surprenante (qui comme par hasard ne se produit que chez ie ).
Je m'explique...
J'ai dans une page tpl, un formulaire qui permet de faire un upload de flv...
Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
<form enctype="multipart/form-data" method="post" action="index.php">
   <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
   <input type="hidden" name="activemenu" value="smenu0" />
   <input type="hidden" name="page" value="library" />
   <input type="hidden" name="section" value="library" />
   <input type="hidden" name="tab" value="library_upload" />
   <input type="hidden" name="action" value="uploadtolibrary" />
   <table class="libraryForm">
   <tr>
   <td align="right"><strong>Title*: </strong></td>
   <td><input type="text" id="title" name="title" size="25" value="" /></td>
   </tr>
   <tr>
   <td align="right"><strong>Tags (use , as separator)*: </strong></td>
   <td><input type="text" id="tag" name="tag" size="35" value="" /></td>
   </tr>
   <tr>
   <td align="right"><strong>Description: </strong></td>
   <td><textarea id="description" name="description" rows="3" cols="35"></textarea></td>
   </tr>
   <tr>
   <td align="right"><strong>File: </strong></td>
   <td><input type="file" id="file_to_upload_into_library" name="flv_file"/> {$locale.format_choice}</td>
   </tr>
   <tr>
   <td colspan="2" align="center"><br /><input type="button" name="button" value="{$locale.button_upload}" onClick="ValiderFormUploadLibrary('file_to_upload_into_library','tag','title','error_upl_into_library','errorformat_upl_into_library','error_missing_info','ajaxloader',this.form);"/></td>
   </tr>
   </table>
</form>
<div id="error_upl_into_library" style="display: none">
   <div class="dragRouge">
      <em><strong>{$locale.upload_errornofile}</strong></em>
   </div>
</div>
<div id="errorformat_upl_into_library" style="display: none">
   <div class="dragRouge">
      <em><strong>{$locale.upload_errorbadformat}</strong></em>
   </div>
</div>
<div id="error_missing_info" style="display: none">
   <div class="dragRouge">
      <em><strong>{$locale.upload_missinginfo}</strong></em>
   </div>
</div>
<div id="ajaxloader" style="display: none" align="center">
   <img src="{$conf.path_to_pictures}/ajax-loader.gif" alt="ajax-loader" title="ajax-loader" />
</div>

Donc dans ce form, j'ai tous les champs d'info du flv, et plusieurs div cachées pour les erreurs et une qui contient le loader (le gif animés)...
Lorsque l'utilisateur clique sur upload, une fonction javascript est éxécutée, elle controle les données, affiche les div d'erreur si nécéssaire et affiche la div contenant le gif animé, juste avant de faire le submit du formulaire...
Voila le code de cette fonction js:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
function ValiderFormUploadLibrary(data_id, tag_id, title_id, errornofile_id, errorformat_id, errorinfo_id, loader_id, formulaire)
{
var file_to_download = document.getElementById(data_id).value;
var tags = (document.getElementById(tag_id).value).replace(/(^\s*)|(\s*$)/g,"");
var title_name = (document.getElementById(title_id).value).replace(/(^\s*)|(\s*$)/g,"");
var errnofilediv =document.getElementById(errornofile_id).style;
var errformatdiv =document.getElementById(errorformat_id).style;
var errinfodiv =document.getElementById(errorinfo_id).style;
var loaderdiv =document.getElementById(loader_id).style;
 
if ((tags == "") || (title_name == ""))
   {
   errnofilediv.display="none";
   errformatdiv.display="none";
   errinfodiv.display="block";
   loaderdiv.display="none";
   }
else if (file_to_download == "")
   {
   errnofilediv.display="block";
   errformatdiv.display="none";
   errinfodiv.display="none";
   loaderdiv.display="none";
   }
else
   {
   nbchar = file_to_download.length;
   extension = file_to_download.substring(nbchar-4,nbchar); 
   extension=extension.toLowerCase(); 
   if ((extension != ".flv"))
      {
      errformatdiv.display="block";
      errnofilediv.display="none";
      errinfodiv.display="none";
      loaderdiv.display="none";
      }
   else
      {
      loaderdiv.display="block";
      errformatdiv.display="none";
      errnofilediv.display="none";
      errinfodiv.display="none";
      formulaire.submit();
      }
   }
}

Donc ce code marche super bien pour tous les navigateurs (ah ouais et aussi marche pour un upload de mp3 ) mais pour l'upload de FLV...c'est une autre histoire! Le gif s'affiche bien mais se bloque!!
J'ai fais quelques tests en mettant un alert avant le submit dans le js, et dans ce cas la, le gif est bien animé, mais dès que je clique sur le bouton ok du message alert, hop il se bloque (d'ou ma déduction que le problème vient de ce submit ) mais l'upload marche nickel...le flv est bien uploadé...
Enfin voila...si quelqu'un a une petite idée, ça me rendrait bien service...
Merci a tous.
A+

[SpaceFrog]

redéfinis le src de l'image sur le onsubmit du form ?

[gui38]

Euh comment ça...comment puis redefinr le src sur le onsubmit ?

Merci.

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onsubmit="document.getElementBYId('monimage').src='trucùmachin.gif'"

[gui38]

J'ai modifié ma balise form de la sorte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<form enctype="multipart/form-data" method="post" action="index.php" onsubmit="document.getElementBYId('monimage').src='{$conf.path_to_pictures}/ajax-loader.gif'">

PS : L'id de mon image est bien "monimage"

Mais rien a changé...merci quand même pour l'idée!!

Edit : je viens de trouver sur le forum que le onsubmit n'est executé que si le formulaire est validé avec le bouton submit, et non via javascript...ceci explique cela

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

getElementById

désolé ...
tu as fait un copier coller ^^

[gui38]

Ouais j'avais vu (euh...enfin firebug avait vu) cette erreur de synthaxe...mais rien a changé...

[E.Bzz]

Bonjour,

Edit : je viens de trouver sur le forum que le onsubmit n'est executé que si le formulaire est validé avec le bouton submit, et non via javascript...ceci explique cela

Et bien lance l'instruction dans la fonction qui déclenche le submit(), au lieu de le faire dans le onsubmit du <form>

A+

[gui38]

Je viens de tester la ligne dans la fonction qui lance le submit et rien de nouveau...le gif s'affiche bien, mais n'est toujours pas animé

[thibane]

Bonjour à tous.

Inutile de recréer un topic pour ça, j'ai exactement le mm pb.

Existe-t-il maintenant une solution à ce problème avec IE..?

[alhoir]

Pour que l'animation continue à fonctionner, il suffit de la lancer après le submit.

Le bouton ne doit pas être de type submit et il lance la fonction dans l'événement "onclick".

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="Button" value="#name#" class="submit" name="Submit" onclick="Confirmation();">

La div contenant le gif animé mais caché:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="DivLoader" name="DivLoader" align="center" style="display:none;" >
<br>
 
                   <img src="images/loader.gif" border="0" /> 
                               <br>&nbsp;
                               <br>&nbsp;
</div>

Dans le script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<script type="text/javascript">
                function Confirmation()
                               {  
                                               document.getElementById("form1").submit();
                                               document.getElementById("DivLoader").style.display='block';
 
                               }
</script>

Voilà.

[danielhagnoul]

@alhoir : je parie que @thibane n'attendait plus une réponse, son message date du 24/06/2008 ! C'est ce que nous appelons un déterrage.