PHP|Débutant :: Forums

Advertisement

Besoin d'aide ? N'hésitez pas, mais respectez les règles

Vous n'êtes pas identifié(e).

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

athome
Membre
Inscription : 24-06-2010
Messages : 23

2 fonctions sur 1 onclick

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 sad

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 wink

Hors ligne

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

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 624
Site Web

Re : 2 fonctions sur 1 onclick

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 wink

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


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

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

athome
Membre
Inscription : 24-06-2010
Messages : 23

Re : 2 fonctions sur 1 onclick

Humm, je ne crois être au niveau de ce que tu me proposes sad 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 wink

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

Hors ligne

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

athome
Membre
Inscription : 24-06-2010
Messages : 23

Re : 2 fonctions sur 1 onclick

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)

Hors ligne

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

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 624
Site Web

Re : 2 fonctions sur 1 onclick

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

++


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

Pied de page des forums