0

Estou modificando um painel bem antigo do sistema e preciso adicionar um nova div e setar uma cor de acordo com o retorno do ajax .

    setInterval('carregarProximo()', 3000);

function carregarProximo(){
       //$("#id_chamada").load(baseUrl+"/chamada/buscar-chamadas/");
       var som = new Audio(baseUrl+'/public/sounds/dingdong.wav');
       $.ajax({
           url: baseUrl+"/chamada/buscar-chamadas/",
           type: "GET",
           success:function(txt){
               for(var i in txt){
                    if(i == 0){
                        if(txt[i].cha_status == "C"){
                               /* $.ajax({
                                        url: baseUrl+"/chamada/ler",
                                        type: "POST",
                                        data: {
                                                usu_nome: "teste"
                                        },
                                        success: function(txt){
                                            alert(txt);
                                            var sound = $("<embed id='sound' type='audio/mpeg' />");
                                            sound.attr('src', txt);
                                            sound.attr('loop', false);
                                            sound.attr('hidden', true);
                                            sound.attr('autostart', true);
                                            $('body').append(sound);      

                                       }
                                });*/
                            som.play();
                            alteraStatus(txt[i].age_codigo);
                        }
                       var conteudo =   "<div id=\"div_superior\">"+
                                            "<b>"+txt[i].age_paciente+"</b>"+
                                          "</div>"+
                                          "<div id=\"div_setor\">"+
                                            "<b>"+txt[i].set_nome+"</b>"+
                                          "</div>"+
                                          "<div>"+
                                          +"</div>"
                                        "<div >"+
                                    "</div>";

                    }else {
                      switch(txt[i].cor){
                        case "red":
                             $("#cor").css('background-color', 'red');
                          break;

                        case "GoldenRod":
                             $("#cor").css('background-color', "GoldenRod");
                          break;

                        case "yellow":
                             $("#cor").css('background-color', "yellow");
                          break;

                        case "green":
                             $("#cor").css('background-color', "green");
                          break;

                        case "blue":
                             $("#cor").css('background-color', "blue");
                          break;   
                      }
                       conteudo += "<div class=\"anterior_1\">"+
                                    "<br/>"+
                                    //<?=$this->abreviaNome($chamada[age_paciente],24)?>

                                    txt[i].age_paciente+
                                    "<br/>"+

                                    "<div id=\"cor\" style='width: 100px'>"+

                                    "</div>"+

                                    "<br/>"+
                                   "<font color=\"red\"><b>"+txt[i].set_nome+"</b></font>"+
                                   "</div>";
                    }
                    //echo $this->action("altera-status", "chamada", "default", array("age_codigo" =>  $chamada[age_codigo]));
                                      // txt[i].cor+
               }
              //alert(conteudo);
              $("#id_chamada").html(conteudo);

           }
       });

}


function alteraStatus(age_codigo){

     $.ajax({
           url: baseUrl+"/chamada/altera-status/",
           data: {
               age_codigo:age_codigo},
           type: "GET",
           success:function(txt){

           }
     });
}

Então como mostrado no código eu criei uma div , dei seu nome como cor e tentei atribuir um backgrond com o Jquery .Não sei se minha cláusula esta errada ou a própria sintaxe do código. Eu inclusive testei esse "txt.[i].cor" e ele retornou as corres corretamente.

Function do ajax :

public function buscarChamadas($uni_codigo=FALSE){
            $where = $this->select()
                          ->setIntegrityCheck(FALSE)
                          ->from(array("cha"=>"chamada"),array("age_codigo","cha_status","cha_codigo"))
                          ->join(array("age"=>"agendamento"),"age.age_codigo=cha.age_codigo","age_paciente")
                         ->join(array("log"=>"logon"),"log.id_login=cha.usr_codigo","")
                          ->join(array("set"=>"setor"),"set.set_codigo=log.cod_setor","set_nome")
                          ->joinLeft(array("pre"=>"pre_consulta"),"pre.age_codigo=age.age_codigo",array("cor"=>"(CASE WHEN pc_clas_risco=1 THEN 'red' WHEN pc_clas_risco=2 THEN 'GoldenRod' WHEN pc_clas_risco=3 THEN 'yellow' WHEN pc_clas_risco=4 THEN 'green' WHEN pc_clas_risco=5 THEN 'blue' END)"))
                          ->where("age.uni_codigo =?",$uni_codigo)
                          ->order("cha_status")
                          ->order("cha.cha_codigo DESC")
                          ->limit(6);
             // die($where);
            // $sql = $where;
            // die($sql);
            return $this->fetchAll($where);
        }

inserir a descrição da imagem aqui

Foi colocado um Console.log após o Else "console.log(txt[i].cor)" switch...E também um tag b dentro da div dada como cor.Para apresentação do conteúdo.

5
  • bom, dia man, qual o retorno da função ? como está retornando ? 3/10/2018 às 14:32
  • Com a adição da foto ajudou ? 3/10/2018 às 14:42
  • Você vai mudar a cor do que está dentro de (conteudo += "...) correto ? se for o caso a ordem está errada, acho que você executando o case antes dele pegar a referência do elemento criado no DOM, 3/10/2018 às 14:48
  • por que a div e os outros elementos que você está criando está assim <div id=\"cor\ " ? com id = \"cor\" ? 3/10/2018 às 14:51
  • O que você falou sobre case esta certo não tem como eu trocar o cor sendo que a div nem existe .Sendo assim a saída deveria ser outra então ?.Então antes de começar a trabalhar nesse painel já estava assim então eu mantive para não dar problemas você julga desnecessário ? 3/10/2018 às 14:54

1 Resposta 1

0

Acredito que o problema seja na sua estrutura HTML. O id de um componente HTML deve ser único, e no caso parece que você usa vários div's com o id "cor".

Neste caso, você deve utilizar algum tipo de id dinâmico, como por exemplo: cor-1, cor-2, e etc...

Quando você for adicionar a div de cor no conteúdo, insira um id dinâmico e já coloque também a cor de background dentro do style:

"<div id='cor-"+i+"' class='cor' style='width: 100px; background-color: "+txt[i].cor+";'>"+

Além disso, você estava tentando selecionar o elemento $("#cor") antes mesmo de inserir a variável "conteudo" (com o seu html e divs de cor) no documento.

6
  • Eu nuca usei um Id dinâmico antes , então você poderia explicar um pouco melhor sua tag ?.Isso me ajudaria muito . 3/10/2018 às 15:07
  • Um id dinâmico é um id normal, mas você usa um loop com algum iterator para garantir que ele não se repita. No exemplo, eu usei o id='cor-"+i+"', porque a variável "i" é o index do seu array txt, por tanto ela nunca vai se repetir garantindo que cada elemento tenha um id diferente.
    – ThiagoYou
    3/10/2018 às 15:10
  • Entendo, Uma coisa que eu queria tirar a dúvida você o utilizou a o style assim : background-color : +txt[i].cor+"; . Sendo assim a cor do plano de fundo é setada de acordo com o valor do tex.cor ,por exemplo se for Red o cor de fundo será vermelha. Então porque a classe cor ? 3/10/2018 às 15:16
  • A class cor é só para exemplificar o uso. No caso, se você não vai mais realizar nenhuma seleção desta div (nem por class, nem por id), você pode remover os dois atributos "id" e "class".
    – ThiagoYou
    3/10/2018 às 16:04
  • Ademais, o ideal seria aplicar estes css através de classes. Não é o mais recomendado utilizar css inline (no próprio elemento).
    – ThiagoYou
    3/10/2018 às 16:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .