Add class with Jquery when opening the page

Asked

Viewed 26 times

-2

Hello. I’m trying to make a monitoring center for the network computers.

Each div will ping to an IP and then return ON or OFF.

Then, with Jquery, I assign the value of the PHP variable and, if ON will add the GREEN-BACKGROUND class, if off, the RED-BACKGROUND class.

However, my Jquery code is not working, the div background is not getting the correct color. What’s the problem with Jquery?

Another question is how to re-load the Divs without reloading the entire page?

.fundo-verde{
	color:#155724;
	background-color:#d4edda;
	border-color:#c3e6cb;
	position:relative;
	border:1px solid transparent;
	border-radius:.25rem}
	

.fundo-vermelho{
	color:#721c24;
	background-color:#f8d7da;
	border-color:#f5c6cb;
	position:relative;
	border:1px solid transparent;
	border-radius:.25rem}
<div class="col-3 text-center font-weight-bold border border-light" id="meupc">

      PC MONITORADO 1
            
      <p><?php exec("ping -n 1 -w 1 " . "192.168.0.75", $output, $result);

    	if ($result == 0) {
    	echo "ON";
    	} else {
    	echo "OFF";
    	} ?>

      </p>
          
      <script type="text/javascript">
    	var resultado = <?=$result?>;
    	$(document).ready(function(){
    	 if (resultado==0){
    	   $('#meupc').addClass('fundo-verde');}
    	 else {
    	   $('#meupc').addClass('fundo-vermelho');}}); 
      </script>
              
    </div>	

  • Re-load, you will need to use jquery, with the method .load()

  • This variable $result returns something other than zero ? I did a test and always returns zero, even in latent ips.

1 answer

0


You can do this by renaming the class to each status type.

.on{
    color:#155724;
    background-color:#d4edda;
    border-color:#c3e6cb;
    position:relative;
    border:1px solid transparent;
    border-radius:.25rem}


.off{
    color:#721c24;
    background-color:#f8d7da;
    border-color:#f5c6cb;
    position:relative;
    border:1px solid transparent;
    border-radius:.25rem}

<div class="col-3 text-center font-weight-bold border border-light <?php echo $result == 0 ? 'on' : 'off' ?>" id="meupc">
    PC MONITORADO 1
    <p>
    <?php
        if ($result == 0) {
            echo "ON";
        } else {
            echo "OFF";
        } ?>
    </p>    
</div>  

Browser other questions tagged

You are not signed in. Login or sign up in order to post.