Simplification page avec boucle

nicdu40 Messages postés 25 Date d'inscription Statut Membre Dernière intervention -
nicdu40 Messages postés 25 Date d'inscription Statut Membre Dernière intervention - 24 févr. 2020 à 17:41

Bonjour, je suis sur un projet de domotique avec micro contrôleurs , ....
je peux piloter des relais a partir d'une page html qui m'affiche les températures , ....
En fait tout fonctionne mais j'aimerais simplifier ma page html car j'ai 32 sorties à piloter et j'aimerais savoir si il y aurais possibilité d' inclure des boucles for... Si quelqu’un aurait une piste ... Merci, je joins ma page avec juste 4 sorties mais en réalité il y en a 32.

<!DOCTYPE html>
<html>
<head> 
<script src="jquery-3.3.1.min.js"></script>


<script>
$(document).ready(function() {

/////////////////////1///////////////  
$("#on1").click(function(){
 var ID = "on";
 var out = "01";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat1").html(response);
  }
 });
                   
})
               
$("#auto1").click(function(){
 var ID = "auto";
 var out = "01";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat1").html(response);
  }
 });
})
                
$("#off1").click(function(){
 var ID = "off";
 var out = "01";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat1").html(response);
  }
 });
})

////////////////////2///////////////  
$("#on2").click(function(){
 var ID = "on";
 var out = "02";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat2").html(response);
  }
 });
                   
})
               
$("#auto2").click(function(){
 var ID = "auto";
 var out = "02";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat2").html(response);
  }
 });
})
                
$("#off2").click(function(){
 var ID = "off";
 var out = "02";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat2").html(response);
  }
 });
})

/////////////////////3///////////////  
$("#on3").click(function(){
 var ID = "on";
 var out = "03";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat3").html(response);
  }
 });
                   
})
               
$("#auto3").click(function(){
 var ID = "auto";
 var out = "03";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat3").html(response);
  }
 });
})
                
$("#off3").click(function(){
 var ID = "off";
 var out = "03";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat3").html(response);
  }
 });
})

/////////////////////4///////////////  
$("#on4").click(function(){
 var ID = "on";
 var out = "04";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat4").html(response);
  }
 });
                   
})
               
$("#auto4").click(function(){
 var ID = "auto";
 var out = "04";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat4").html(response);
  }
 });
})
                
$("#off4").click(function(){
 var ID = "off";
 var out = "04";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat4").html(response);
  }
 });
})

})
</script>
</head>
    
<style type="text/css">
<!--
div#data {
    background-color: rgba(255,255,255,0.9);
}
div {
    background-color: rgba(255,255,255,0.6);
}
button {
    background-color: rgba(255,255,255,0.9);
}
</style>


<div class="excontainer">
<div id="data"></div>
<br /> 
<div> out1 </div>
 <button id="on1" >on</button>
 <button id="auto1" >auto</button>
 <button id="off1" >off</button>
  <div id="1"></div>
  
<div class="excontainer">
<div id="resultat1"></div> 
</div>
<br /> 

<div> out2 </div>
 <button id="on2" >on</button>
 <button id="auto2" >auto</button>
 <button id="off2" >off</button>
  <div id="2"></div>

<div class="excontainer">
<div id="resultat2"></div>
</div>
<br />

<div> out3 </div>
 <button id="on3" >on</button>
 <button id="auto3" >auto</button>
 <button id="off3" >off</button>
  <div id="3"></div>

<div class="excontainer">
<div id="resultat3"></div>
</div>
<br />

<div> out4 </div>
 <button id="on4" >on</button>
 <button id="auto4" >auto</button>
 <button id="off4" >off</button>
  <div id="4"></div>
<div class="excontainer">
<div id="resultat4"></div>
</div> 
<br /> 


<script>
$(document).ready(function() {
 $.ajaxSetup ({
        cache: false
    });
 $("#data").load("Last.php");
    var refreshId = setInterval(function() {
        $("#data").load("Last.php");
    }, 500);
    
 
 $("1").load("etat/etat-1");
    var refreshId = setInterval(function() {
  $("#1").load("etat/etat-1");
    }, 500);
    
 $("#2").load("etat/etat-2");
    var refreshId = setInterval(function() {
  $("#2").load("etat/etat-2");
    }, 500);

 $("#3").load("etat/etat-3");
    var refreshId = setInterval(function() {
  $("#3").load("etat/etat-3");
    }, 500);
    
 $("#4").load("etat/etat-4");
    var refreshId = setInterval(function() {
  $("#4").load("etat/etat-4");
    }, 500);
        
});
</script> 

</body>
</html>

Configuration: Linux / Firefox 73.0

Afficher la suite

A voir également:

Simplification page avec boucle
Supprimer page word - Guide
Imprimer tableau excel sur une page - Guide
Page d'accueil - Guide
Page privée - Guide
Page accueil iphone - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour
Je ne vois pas de code java dans ce que tu nous montres...
Que du JavaScript. Une erreur dans le choix du forum ??

KX Messages postés 16761 Date d'inscription Statut Modérateur Dernière intervention 3 020

Bonjour,

J'ai redirigé vers le bon forum, j'en ai profité pour ajouter la coloration syntaxique...

nicdu40 Messages postés 25 Date d'inscription Statut Membre Dernière intervention 1 > KX Messages postés 16761 Date d'inscription Statut Modérateur Dernière intervention

merci ;)

Discussions similaires

Code erreur 80710A06

Mon ordinateur s'allume et s'eteint en boucle

Votre réponse

Discussions similaires