Ciao a tutti,
mi sono bloccato su uno script che non riesco proprio a far funzionare. Vorrei che nella seguente pagina html, cambiasse il contenuto del bottone ad ogni click. In pratica, vorrei che da "toggled on" passasse a "toggled off" e viceversa. Ho preso spunto da qui per costruirmi e gestire il bottone ma non riesco a farlo funzionare come appena detto.
Qualcuno sa dirmi perchè?
codice:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="scripts/jquery-1.11.1.min.js"></script>
<!--script per creare e gestire il contenuto dei bottoni a seconda del loro stato (spento o acceso)-->
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script>
function invia(num_led, response) {
jQuery.support.cors = true;
// Create Toggle Button.
$("#jqxButton").jqxToggleButton({ width: '150', height: '25', toggled: true });
var toggled = $("#jqxButton").jqxToggleButton('toggled');
$.ajax({
crossDomain: true,
async : true,
type: "POST",
data: num_led,
dataType: "text/html",
cache: false,
url: "http://ledon.dlinkddns.com",
success: function( r ){
$( "#result" ).html(response);//html( r );
if(response=="led acceso")
document.getElementById("event").src="ledon.png";
else
document.getElementById("event").src="ledoff.png";
if (toggled) {
$("#jqxButton")[0].value = 'Toggled On';
}
else $("#jqxButton")[0].value = 'Toggled Off';
},
error: function(){
if(response=="led acceso")
$( "#result" ).html("Arduino non è stato in grado di accendere il led");
else
$( "#result" ).html("Arduino non è stato in grado di spegnere il led");
}
});
};
</script>
</head>
<body>
<center>
<div>
<input type="button" onclick="invia('pinD7','led acceso')" value="Toggled On" id='jqxButton' />
</div>
<div id="result">
</div>
<img id="event" src="ledoff.png" alt="Accendi" title="Accendi" width="25" height="25"/>
</center>
</body>
</html>