2015-12-27 1 views
0

Je suis en train de lire et d'écrire une chaîne sur une série de mon Raspberry Pi à partir d'une page web écrite en PHP.mise à jour de la variable MySQL sur PHP sans rafraîchissement

Je dois actualiser la couleur des boutons de mon appareil sans actualiser la page. Voici mon code qui fonctionne maintenant mais la couleur ne change que si l'on recharge la page.

Je dois demander à nouveau le DB et changer la couleur du bouton chaque fois que je clique sur le bouton.

<?php 
    //General (I use this part to send the string to the serial) 
    if (isset($_POST['GeneralON'])) 
    { exec('/home/pi/myfolder/myCProgramm @mytringON'); 
    } 
    if (isset($_POST['GeneralOFF'])) 
    { exec('/home/pi/myfolder/myCProgramm @mytringOFF'); 
    } 
//I connect to mydb and i read the status of device 91 
$user_name = "myuser"; 
$password = "mypassord"; 
$database = "mydb"; 
$server = "127.0.0.1"; 

$db_handle = mysql_connect($server, $user_name, $password); 
$db_found = mysql_select_db($database, $db_handle); 

if ($db_found) 

{ 
// I read the status of device 91 
$SQL = "SELECT * FROM devices WHERE id = 91"; 
$result = mysql_query($SQL); 
while ($db_field = mysql_fetch_assoc($result)) { $mybedroom = $db_field['state']; } 

} 
else { 

print "Database NOT Found "; 
mysql_close($db_handle); 

} 

?> 

<body align="center" style="font-size:70"> 
    <form method="post" > 


     <div class="myrow"> 
     <div class="myleft"> 
      General Lamps 
     </div> 
     <div class="myright"> 
// if the variable my bedroom is 1 I set red the color of button by CSS class 
      <?php if ($mybedroom == 1): ?> 
      <button class="btnred" name="GeneralON">ON</button> 
      <?php else: ?> 
// if the variable my bedroom is 0 I set blue the color of button by CSS class 
      <button class="btn" name="GeneralON">ON</button> 
      <?php endif ?> 
      <button class="btn" name="GeneralOFF">OFF</button> 
     </div> 
    </div> 
    </form> 
</body> 

Je sais ce code est vraiment "rude" ... mais il est maintenant de mon mieux :)

Toute suggestion? J'essaye d'employer AJAX pour actualiser la variable $ mybedroom sur le clic de bouton, mais je ne peux pas faire cela.

Merci

+0

Avez-vous lire cette question/réponse ?: http://stackoverflow.com/questions/13559489/how-to-run-php-code-on-submit-button-without-refreshing-reloading-the-page?rq=1 –

Répondre

1
var color = "<?php if ($mybedroom == 1){ echo 'red'}else{ echo 'green'} ?>"; 
function btncolor(){ 
if (color=="red"){ 
$('.btn').css('color', 'green'); 
}else{ 
$('.btn').css('color', 'red'); 
} 
} 
$('.btn').click(function(){ 
// something changes php vars and print the new color 
btncolor() 
}); 
0

Désolé, je ne suis pas très bien compris la réponse !!!! MY PHP et les connaissances de script est très faible :(

Il ne fonctionne pas

Ma classe CCS sont:

bouton normal:

.btn { 
    background: #3498db; 
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9); 
    background-image: -moz-linear-gradient(top, #3498db, #2980b9); 
    background-image: -ms-linear-gradient(top, #3498db, #2980b9); 
    background-image: -o-linear-gradient(top, #3498db, #2980b9); 
    background-image: linear-gradient(to bottom, #3498db, #2980b9); 
    -webkit-border-radius: 28; 
    -moz-border-radius: 28; 
    border-radius: 28px; 
    font-family: Arial; 
    color: #ffffff; 
    font-size: 60px; 
    padding: 10px 20px 10px 20px; 
    margin-left: 20px; 
    text-decoration: none; 
    align: right; 
} 

bouton rouge:

.btnred { 
    background: #3498db; 
    background-image: -webkit-linear-gradient(top, #FF0000 , #B00000); 
    background-image: -moz-linear-gradient(top, #FF0000 , #B00000); 
    background-image: -ms-linear-gradient(top, #FF0000 , #B00000); 
    background-image: -o-linear-gradient(top, #FF0000 , #B00000); 
    background-image: linear-gradient(to bottom, #FF0000 , #B00000); 
    -webkit-border-radius: 28; 
    -moz-border-radius: 28; 
    border-radius: 28px; 
    font-family: Arial; 
    color: #ffffff; 
    font-size: 60px; 
    padding: 10px 20px 10px 20px; 
    margin-left: 20px; 
    text-decoration: none; 
    align: right; 
}