pulsante html e css

[romimmo]

JS

$(document).ready(function(){
  $("button").click(function(){
    $.post("action.php",
    {
      outId:(this.id)
    },
    function(data,status){
      //alert("Data: " + data + "\nStatus: " + status);
    });
  });
});

action.php

<?php
$gpin="0";
if (isset($_POST['outId']))
{
    $gpin=$_POST['outId'];
}
shell_exec('sudo python /var/www/leds/gpio/17/luce1on.py'.' '.$gpin);
?>

[Al_katraz984]

si bene o male è quello il meccanismo, nel tuo esempio usano jquery come libreria, non so se ti conviene caricare Mb di libreria per fare una cosa che con javascript fai in massimo 10 righe.. sono scelte cmq il meccanismo c'è

puoi provare al posto di
$("button").click(...

metti
$("myonoffswitch").click(...

non uso jquery quindi non so se sia .click o .checked verifica

[romimmo]

Perfetto, funziona. Ti volevo ringraziare per i suggerimenti e l'aiuto.
Ora ho anche un piccolo problema, se faccio il refresh della pagina lo switch mi rimane nella posizione in cui l'ho lasciato e quindi va bene, ma se cambio pagina oppure apro e chiudo il browser lo switch si trova sempre su ON. Esiste qualche soluzione???

Ancora grazie

[Al_katraz984]

prova ad inserire:

$_POST = array(); 

dopo la riga shell_exec

[romimmo]

purtroppo ho un altro problema. Se provo a mettere due switch nella stessa pagina uno funziona e l'altro no. Al secondo switch (ovvero quello che non funziona ho dovuto apportare delle modifiche perchè essendo identico al precendente (quello che funziona) se mettevo su off il primo andava su off anche il secondo, quindi ho cambiato la parte riguardante "name e id ". Ora sono indipendenti ma non funzionano. Questo è il codice dello switch non funzionante
HTML

<div class="onoffswitch">

<input  type="checkbox" name="onoffswitch1" class="onoffswitch-checkbox"  id="myonoffswitch1" onchange="changeSwitch()" checked>

<label class="onoffswitch-label" for="myonoffswitch1">

<div class="onoffswitch-inner"></div>

<div class="onoffswitch-switch"></div>

</label>

</div>

CSS

body

{

    background-color: #666;

}

.onoffswitch {

      position: relative;

      width: 82px;

      -webkit-user-select:none;

      -moz-user-select:none;

      -ms-user-select: none;

    }

    .onoffswitch-checkbox {

      display: none;

    }

    .onoffswitch-label {

      display: block; overflow: hidden; cursor: pointer;

      border: 2px solid #FFFFFF; border-radius: 5px;

    }

    .onoffswitch-inner {

      width: 200%;

      margin-left: -100%;

      -moz-transition: margin 0.3s ease-in 0s;

      -webkit-transition: margin 0.3s ease-in 0s;

      -o-transition: margin 0.3s ease-in 0s;

      transition: margin 0.3s ease-in 0s;

    }

    .onoffswitch-inner:before, .onoffswitch-inner:after {

    float: left; width: 50%; height: 24px; padding: 0; line-height: 24px;

    font-size: 18px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;

    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;

    }

    .onoffswitch-inner:before {

      content: "on";

      padding-left: 14px;

      background-color: #2FFF3D;

      color: #FFFFFF;
      text-align: left;

    }

    .onoffswitch-inner:after {

      content: "off";

      padding-right: 14px;

      background-color: #ADADAD;

      color: #FFFFFF;

      text-align: right;

    }

    .onoffswitch-switch {

      width: 28px; margin: 0px;

      background: #FFFFFF;

      border: 2px solid #FFFFFF; border-radius: 5px;

      position: absolute; top: 0; bottom: 0; right: 50px;

      -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;

      -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;

      background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);

      background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);

      background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);

      background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);

    }

    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {

      margin-left: 0;

    }

    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {

      right: 0px;

    }

JS

function changeSwitch() {
     var checked = document.getElementById("myonoffswitch").checked;
     if(checked)
     {
         $(document).ready(function(){
        var jqxhr = $.getJSON('actionON.php?', function(data) {
            value_update(data);
        })
});
     }
    else
    {
$(document).ready(function(){
        var jqxhr = $.getJSON('actionOFF.php?', function(data) {
            value_update(data);
        })
});
    }
}

[romimmo]

Ho fatto diverse prove ed ho notato che se non metto uno dei due file JS il corrispondente switch non funziona mentre l'altro si, quindi probabilmente dipende dal file JS

[Al_katraz984]

function changeSwitch() {
     var checked = document.getElementById("myonoffswitch").checked;
     if(checked)
     {
        var jqxhr = $.getJSON('actionON.php?', function(data) {
            value_update(data);
        })

     }
    else
    {
        var jqxhr = $.getJSON('actionOFF.php?', function(data) {
            value_update(data);
        })
    }
} 

$(document).ready() serve solo per intercettare il caricamento completo della pagina, non lo puoi usare cosi in mezzo ad una funzione

[romimmo]

Purtroppo non funziona. E' come se i due switch non fossero indipendenti, forse devo creare un'altra checkbox??

[romimmo]

Cerco di spiegarti meglio il mio problema:
Consideriamo questo switch http://jsfiddle.net/josephs8/Q9AE7/
Se inserisco due switch uguali che chiameremo switch1 e switch2 senza apportare modifiche il problema è che cliccando su ON su switch1 si muove anche lo switch2. Questo problema è stato risolto cambiando alcuni valori nel codice html in questo modo:
Switch1 HTML invariato

<div class="onoffswitch">
<input  type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"  id="myonoffswitch" onchange="changeSwitch()" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>

Switch2 HTML modificato

<div class="onoffswitch2">
<input type="checkbox"  name="onoffswitch2" class="onoffswitch-checkbox" id="myonoffswitch2"  onchange="changeSwitch()" checked>
<label class="onoffswitch-label" for="myonoffswitch2">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>

In questo modo ho risolto il problema, ovvero sono indipendenti. Se però associo a switch1 il file javascript1 (che dovrebbe fa apparire il popup con OK1/NOT OK1 ) e a switch2 il file javascript2 (che dovrebbe fa apparire il popup con OK2/NOT OK2) mi si presenta il problema che esce sempre il popup con OK2/NOT OK2 anche se clicco su switch1. Come mai???