2 fonctions sur 1 onclick

athome · 18-07-2011 14:08:01

Bonjour j'aimerais passer 2 actions javascripts sur un onclick, mais je ne trouve pas de solutions !

Voici d'abord les deux input fonctionnant bien séparément :
Une confirmation

<input onclick="return(confirm('Etes-vous sûr de vouloir modifier ce grade ?'));" type="submit" value="Modifier" name="modif"/>

et une barre de progression

<input onclick="showWait('Modification en cours');" type="submit" value="Modifier" name="modif"/>

j'ai bien sur testé :

<input onclick="return(confirm('Etes-vous sûr de vouloir modifier ce grade ?'));showWait('Modification en cours');" type="submit" value="Modifier" name="modif"/>

Mais ça ne fonctionne pas, la deuxième action ne se réalise pas

Voici le second script repris sur le web donnant une barre de progression

  </script>

    <SCRIPT LANGUAGE="JavaScript">

    document.writeln("<div id=\"jsWaitMessage\" style=\"font-family: Verdana; font-size: 10px; text-align: center; padding: 3px; position: absolute; left: 30%; top: 40%; height: 20px; width: 300px; z-index:3\"></div>" );

    document.writeln("<div id=\"jsWaitArea\" style=\"display: none; position: absolute; left: 30%; top: 40%; height: 20px; width: 300px; border: 1px black solid; background: #fdd46c;z-index:2\">" );

    document.writeln("<div id=\"jsWaitBlock\" style=\"position: relative; left: 0px; height: 20px; width: 50px; background: #fcbb10;z-index:2\"></div>" );

    document.writeln("</div>" );

    jsWait_defaultInstance = null;

    function showWait(message)

    {

    alert('Etes-vous sûr de vouloir modifier ce grade ?');

      jsWait_defaultInstance = new jsWait('jsWait_defaultInstance', message);

      jsWait_defaultInstance.show();

    }

    function jsWait(name, message)

    {

      this.name = name;

      this.message = message;

      this.speed = 10;

      this.direction = 2;

      this.waiting = false;

      this.divMessage = document.getElementById("jsWaitMessage" );

      this.divArea = document.getElementById("jsWaitArea" );

      this.divBlock = document.getElementById("jsWaitBlock" );

    }

    jsWait.prototype.show = function()

    {

      this.divMessage.innerHTML = this.message;

      this.divMessage.style.display = "block";

      this.divArea.style.display = "block";

      this.divBlock.style.display = "block";

      this.divBlock.style.left = "0px";

      this.waiting = true;

      this.loop();

    }

    jsWait.prototype.setMessage = function(message)

    {

      this.message = message;

      this.divMessage.innerHTML = this.message;

    }

    jsWait.prototype.stop = function()

    {

      this.waiting = false;

      this.divMessage.style.display = "none";

      this.divArea.style.display = "none";

      this.divBlock.style.display = "none";

    }

    jsWait.prototype.loop = function()

    {

      myLeft = this.divBlock.style.left;

      myLeft = myLeft.substring(0, myLeft.length-2);

      intLeft = parseInt(myLeft);

      if(intLeft >= 250)

        this.direction = -2;

      if(intLeft <= 0)

        this.direction = 2;

      myLeft = "" + (intLeft+this.direction) + "px";

      this.divBlock.style.left = myLeft;

      if(this.waiting)

        setTimeout(this.name + ".loop()", this.speed);

    }

  </script>

merci d'avance pour votre aide

Jc · 18-07-2011 15:12:42

Bonjour,

Sans avoir lu ton code de barre de progression, ton problème est normal au niveau conceptuel.
Je m'explique.
1) Une barre de progression est dans un état d'attente d'un évènement qui lui notifie que l'action est terminée, auquel cas, elle affiche cet état et disparait. De plus une barre d'action étant par définition synchrone dans son propre thread, il est normal que tout le code que tu demandes de traiter à la suite soit lui aussi dépendant de la terminaison de la progressbar pour pouvoir être évalué (on est sur du synchrone).
2) Il faut donc séparer les threads de la manière suivante (algo du principe en exemple):
a) Ton bouton appele une fonction Js.
b) Ta fonction js demande confirmation du lancement du traitement. Si non > exit.
c) On lance le traitement en asynchrone avec la progress bar en parallèle et on bind le retour event de ton traitement avec celui de ta progressbar.

Voiloù la bonne méthode

Dernière modification par Jc (18-07-2011 15:13:53)

athome · 18-07-2011 15:43:19

Humm, je ne crois être au niveau de ce que tu me proposes mais j'avance un peu quand même, avec le code ci-dessous

tout se passe bien en cas de confirmation positive, mais en cas de réponse négative au confirm cela exécute quand même le formulaire

 <input onclick="showWait()" type="submit" value="Modifier" name="modif"/>

<SCRIPT LANGUAGE="JavaScript"> 

    document.writeln("<div id=\"jsWaitMessage\" style=\"font-family: Verdana; font-size: 10px; text-align: center; padding: 3px; position: absolute; left: 30%; top: 40%; height: 20px; width: 300px; z-index:3\"></div>" ); 

    document.writeln("<div id=\"jsWaitArea\" style=\"display: none; position: absolute; left: 30%; top: 40%; height: 20px; width: 300px; border: 1px black solid; background: #fdd46c;z-index:2\">" ); 

    document.writeln("<div id=\"jsWaitBlock\" style=\"position: relative; left: 0px; height: 20px; width: 50px; background: #fcbb10;z-index:2\"></div>" ); 

    document.writeln("</div>" ); 

    jsWait_defaultInstance = null; 

  function showWait() 

    { 

    if (confirm('Etes-vous sûr de vouloir modifier ce grade ?')){

      jsWait_defaultInstance = new jsWait('jsWait_defaultInstance', "Modification en cours"); 

      jsWait_defaultInstance.show(); 

    }

    } 

    function jsWait(name, message) 

    { 

      this.name = name; 

      this.message = message; 

      this.speed = 10; 

      this.direction = 2; 

      this.waiting = false; 

      this.divMessage = document.getElementById("jsWaitMessage" ); 

      this.divArea = document.getElementById("jsWaitArea" ); 

      this.divBlock = document.getElementById("jsWaitBlock" ); 

    } 

    jsWait.prototype.show = function() 

    { 

      this.divMessage.innerHTML = this.message; 

      this.divMessage.style.display = "block"; 

      this.divArea.style.display = "block"; 

      this.divBlock.style.display = "block"; 

      this.divBlock.style.left = "0px"; 

      this.waiting = true; 

      this.loop(); 

    } 

    jsWait.prototype.setMessage = function(message) 

    { 

      this.message = message; 

      this.divMessage.innerHTML = this.message; 

    } 

    jsWait.prototype.stop = function() 

    { 

      this.waiting = false; 

      this.divMessage.style.display = "none"; 

      this.divArea.style.display = "none"; 

      this.divBlock.style.display = "none"; 

    } 

    jsWait.prototype.loop = function() 

    { 

      myLeft = this.divBlock.style.left; 

      myLeft = myLeft.substring(0, myLeft.length-2); 

      intLeft = parseInt(myLeft); 

      if(intLeft >= 250) 

        this.direction = -2; 

      if(intLeft <= 0) 

        this.direction = 2; 

      myLeft = "" + (intLeft+this.direction) + "px"; 

      this.divBlock.style.left = myLeft; 

      if(this.waiting) 

        setTimeout(this.name + ".loop()", this.speed); 

    } 

 </script>

athome · 18-07-2011 16:36:54

Réponse

[c]onsubmit="return showWait();"[/c]

---------------------------------------------

[c]function showWait()
{

if (confirm('Etes-vous sûr de vouloir modifier ?') ){
jsWait_defaultInstance = new jsWait('jsWait_defaultInstance', "Modification en cours");
jsWait_defaultInstance.show();
return true
}
return false
}[/c]

Dernière modification par athome (18-07-2011 16:37:12)

Jc · 18-07-2011 17:39:34

Bonjour,

En fait, étant donné le contexte, ton traitement = ta requête PHP à ton serveur en Ajax en asynchrone, et en attendant le retour, tu affiches ta progressbar, et sur l'event de ton readystate==4, tu termines ta progressbar. En faisant ainsi par contre, js ne sachant pas ce qui se passe sur le serveur ne pourra pas afficher une progression en % réaliste, il te faudra donc afficher une progressbar à progression "infinie".

++

PHP|Débutant :: Forums

Advertisement

#1 18-07-2011 14:08:01

2 fonctions sur 1 onclick

#2 18-07-2011 15:12:42

Re : 2 fonctions sur 1 onclick

#3 18-07-2011 15:43:19

Re : 2 fonctions sur 1 onclick

#4 18-07-2011 16:36:54

Re : 2 fonctions sur 1 onclick

#5 18-07-2011 17:39:34

Re : 2 fonctions sur 1 onclick

Pied de page des forums