How to change DIV style using AJAX without updating the page

Asked

Viewed 323 times

2

I am doing a complementary activity in college, and I have to do a system to change the style of the div if the user problem is already solved or not.

When you click solved if the div is already in class Alert-Danger, this class will change to Alert-Success.

Then my page and where I stand.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Formulário </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/stylee.css">       
        <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.js"></script>        
    </head>
    <body>         
        <?php
            try {
                $pdo = new PDO('mysql:host=localhost;dbname=agenda', 'root', '');
                 // define para que o PDO lance exceções caso ocorra erros
                $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);                    

            } catch (Exception $exc) {
                echo "Algum erro foi cometido".$exc->getTraceAsString();                         
            }
            // pega ID via GET
            $id = $_GET['id'];
            $buscasegura= $pdo->prepare("SELECT * FROM  pessoa WHERE id = :id");
            $vertel = $pdo->prepare("SELECT * FROM `contatos` WHERE id_pessoa = :id");
            // Busca variavel ID
            $buscasegura->bindValue(":id", $id);
            $vertel->bindValue(":id", $id);

            $buscasegura->execute();
            $vertel->execute(); 
            // percorre a variavel para mostrar os resultados
            while($linharesp=$buscasegura->fetch(PDO::FETCH_ASSOC)){
        ?>
        <div class="container  body321">
            <div class="row">  
                <div  class="jumbotron" >
                <h4>Ver informações de: <?php echo $linharesp["nome"];}?> </h4>
                <?php                
                
                        $consultainfo = $pdo->prepare("SELECT * FROM pessoa where id = :id");
                        $verregistro = $pdo->prepare('SELECT * FROM `registro` WHERE id_pessoa = :id');
                        $consultainfo->bindParam(':id', $id);
                        $verregistro->bindParam(':id',$id);
                        $consultainfo->execute();
                        $verregistro->execute();                                                                     

                                        
                    while ($linha = $consultainfo->fetch(PDO::FETCH_ASSOC)) {
                            $id = $linha['id'];
                            $nomee = $linha['nome'];
                            $cpff = $linha['cpf'];   
                            $empresa = $linha['empresa'];
                            $tipo = $linha['tipo'];
                            $ob = $linha['ob'];                                                                                                                 
                            } 
                            ?>  
                
                    <h4>CPF: <?php echo "$cpff"; ?><br><br>
                    Empresa: <?php echo "$empresa";  ?><br><br>
                    Tipo: <?php echo "$ob";  ?></h4>
                </div>
                <br>
                <div class="col-md-6">
                         <h4>&nbsp;&nbsp;&nbsp;Informações de registros</h4>
                    <?php
                    //definição da variavel que ira mostrar os resultados
                        while($linharesp=$verregistro->fetch(PDO::FETCH_ASSOC)){ 
                            // define qual a class que vai ser usada danger ou sucess
                            $solucao = $linharesp['resolvido'];
                            if(strcasecmp( $solucao, 'sim' ) == 0){
                                $class = "alert-success";
                            }else{
                                $class = "alert-danger";
                            } 
                           
                            //atribui o nome da class para as divs
                    ?>     
                    <div class="info2 <?php echo $class; ?>">                        
                        <span class="p">Forma de Comunicação:</span>
                            <?php echo $linharesp['info']; ?><br>
                        <span class="p">Assunto:</span>
                            <?php echo $linharesp['assunto']; ?><br>
                        <span class="p">Descrição:</span>
                            <?php echo $linharesp['descricao']; ?><br>
                        <span class="p">Resolvido?</span>
                            <?php echo $solucao;?> 
                    </div>
                    <div class="text-right">
                        <span class="p">Data/Hora:</span>
                        <?php 
                            // aqui eu separei a data da hora
                            $dataHoraArray = explode(" ", $linharesp['data']); 

                            // vamos separar os valores da data
                            $dataArray = explode("-", $dataHoraArray[0]);

                            // vamos re organizar a data
                            $data = $dataArray[2]."-".$dataArray[1]."-".$dataArray[0];

                            // mostra a data completa
                            echo $data." ".$dataHoraArray[1];
                        ?>
                        <a class="label label-success text-right" href="#">Resolvido</a>
                    </div>
                    <hr>
                        <?php } ?>
                </div>
                <div class="col-md-6">
                    <h4>Telefone(s) para contato:</h4>
                    <div class="info2 alert-success">
                        <?php
                            $linhatel = $vertel->fetchAll(PDO::FETCH_ASSOC);
                            foreach ($linhatel as $listar){  //as faz uma variavel receber os valores de outra variavel                                                    
                        ?>                    
                        <span class="p">Número:</span><?php echo $listar["telefone"]; ?>&nbsp;&nbsp;&nbsp; <span class="p">Operadora:</span><?php echo $listar["operadora"]. "<br><br>"; } ?>
                    </div>
                    <br>
                </div>
            </div>            
            <div class="row text-center">
                <br><a class="btn btn-primary" href="index.php">Voltar ao inicio</a>
            </div>                                            
        </div>     
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
</html>

  • which alert div? and which event do you want Alert to change to success?

  • When the administrator clicks the solved button, the div with info2 ID has to change the class to Alert-Success.

  • No div with id info2

  • Sorry I looked wrong, it’s a div with a class info2.

1 answer

3

Use $('seletor_da_div').removeClass('class_antiga).addClass('nova_class)

  • I have to use AJAX, when I click solved, already have to change the color of the div.

  • Ok. Put the above code on the return of your ajax callback.

Browser other questions tagged

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