cambiare il contenuto di un bottone con un click

**mbistato** · 18-11-2014, 21:07

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>

**cavicchiandrea** · 18-11-2014, 22:01

A) Non puoi fare chiamate ajax cross-dominio dirette devi fare dialogare i due server con curl php
B) studia meglio jquery e ajax non puoi avere sia success che error lo stesso response

**mbistato** · 18-11-2014, 22:22

Originariamente inviata da cavicchiandrea

A) Non puoi fare chiamate ajax cross-dominio dirette devi fare dialogare i due server con curl php

A me funziona perchè al server dove risiede questa pagina mando l' "Access-Control-Allow-Origin"

Originariamente inviata da cavicchiandrea

B) studia meglio jquery e ajax non puoi avere sia success che error lo stesso response

Non capisco perchè dovrebbe eseguirle entrambi. Prima dell'aggiunta del codice per la gestione del bottone funzionava tutto e come volevo.

**KillerWorm** · 19-11-2014, 00:06

Ciao, mettendo da parte il discorso Ajax, c'è qualche incongruenza nella logica di funzionamento.
Hai associato la funzione invia all'evento click del pulsante, ma nella stessa funzione vai ad "inizializzare" il pulsante tramite jqxToggleButton. Ovviamente il pulsante viene inizializzato ogni volta che ci clicchi sopra, il che non ha molto senso. Non pensi?

Dovresti inizializzare il pulsante al caricamento della pagina, non dentro una funzione richiamata al click del pulsante stesso.
Hai preso spunto da una guida ma ho l'impressione che tu lo abbia preso male. Vedi l'uso dell'evento $(document).ready in cui, sull'esempio da cui hai preso spunto, viene inserita giustamente la creazione dei pulsanti.

Ad ogni modo (mio parere personale) ritengo sia eccessivo scomodare un widget del genere per applicare un semplice toggle su un pulsante. Potresti usare una semplice variabile che faccia lo stesso lavoro, o magari adoperare un checkbox che sarebbe più appropriato per una funzionalità del genere.

Qualche altro consiglio, anche se non richiesto:
- Dal momento che usi jQuery, perché non usarlo appieno anziché creare un minestrone con funzioni standard JavaScript (tipo document.getElementById("event")) ed eventi DOM (tipo onclick="invia(...)")?
Non sarebbe meglio imparare ad usare i selettori jQuery (ad es. $("#event")) e i metodi di gestione degli eventi (ad es. $("#jqxButton").click(dati,invia))?
Chiaramente il tutto andrebbe studiato al meglio per applicarlo al tuo progetto.

- Per il led acceso e spento potresti utilizzare un'unica immagine con la tecnica degli sprite css, anziché gestire i due file separati.

**cavicchiandrea** · 19-11-2014, 00:22

Originariamente inviata da mbistato

A me funziona perchè al server dove risiede questa pagina mando l' "Access-Control-Allow-Origin"

Ok

Non capisco perchè dovrebbe eseguirle entrambi.

Non ho detto che esegue entrambi ho detto che success ed error non possono avere un response "led acceso"

Prima dell'aggiunta del codice per la gestione del bottone funzionava tutto e come volevo.

Boh... allora toglilo oltretutto non credo che ci voglia tutto quel codice per fare un toogle su di un bottone

**mbistato** · 19-11-2014, 16:32

Grazie per i suggerimenti. Sono arrivato alla seguente soluzione:

codice:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function() {
	$("#button1").show();
	$("#button2").hide();
});
</script>


<script>
   function invia(msg) {
    jQuery.support.cors = true;
	if(msg == "accendi"){
    $.ajax({
      crossDomain: true,
      async : true,
      type: "GET",
      data: "pinD7",
      dataType: "text/html",
      cache: false,
      url: "http://ledon.dlinkddns.com",
      success: function( r ){
         $( "#result" ).html("led acceso");//html( r );
		 $("#event").attr("src","ledon.png");
		 $("#button1").hide();
		 $("#button2").show();
      },
      error: function(){$( "#result" ).html("impossibile accendere il led");}
     });
	}
	else{
	$.ajax({
      crossDomain: true,
      async : true,
      type: "GET",
      data: "pinL7",
      dataType: "text/html",
      cache: false,
      url: "http://ledon.dlinkddns.com",
      success: function( r ){
         $( "#result" ).html("led spento");//html( r );
		 $("#event").attr("src","ledoff.png");
		 $("#button1").show();
		 $("#button2").hide();
      },
      error: function(){$( "#result" ).html("impossibile spegnere il led");}
     });
	
	}
    
    };
   
</script>
</head>
<body>
<center>
<input id="button1" onclick="invia('accendi')" type="button" value="Accendi led"/>
<input id="button2" onclick="invia('spegni')" type="button" value="Spegni led"/>
<div id="result">  
</div>
<img id="event" src="ledoff.png" alt="Accendi" title="Accendi" width="25" height="25"/>
</center>
</body>
</html>

ma tale codice funziona parzialmente nel senso che: se clicco su "Accendi led", la richiesta get viene correttamente inviata e termina con success; se riclicco ( a questo punto sul pulsante "Spegni led" che appare dopo la prima richiesta), la richiesta va in errore:

GET http://ledon.dlinkddns.com/?_=1416407316546&pinL7 net::ERR_EMPTY_RESPONSE

Sapete a cosa è dovuto?

Discussione: cambiare il contenuto di un bottone con un click

Strumenti discussione

Ricerca discussione

Visualizza

cambiare il contenuto di un bottone con un click

Permessi di invio