How to set a background with Jquery

Asked

Viewed 109 times

0

I am modifying a very old system panel and need to add a new div and set a color according to the return of 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){

           }
     });
}

Then as shown in the code I created a div, gave its name as color and tried to assign a backgrond with Jquery. I don’t know if my clause is wrong or the syntax of the code itself. I even tested this "txt.[i]. color" and it returned the correct corrections.

Function of 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

A Console.log was placed after the Else "console.log(txt[i].cor)" switch... And also a b tag inside the color given div.For content presentation.

  • good, day man, what is the return of the function ? how is it returning ?

  • With the addition of the photo helped ?

  • Will you change the color of what is inside (content += "...) correct ? if that’s the case the order is wrong, I think you running the case before it takes the reference of the element created in the DOM,

  • Why is div and the other elements you are creating like this <div id="color " ? with id = "color" ?

  • What you said about case this right there is no way I change the color being that the div doesn’t even exist . So the output should be another then ?. So before I started working on this panel it was already like this so I kept it to not give problems you deem unnecessary ?

1 answer

0


I believe the problem is in its HTML structure. The id of an HTML component should be unique, in which case it seems that you use several div’s with the id "color".

In this case, you should use some kind of dynamic id, for example: color-1, color-2, and etc...

When you add the color div to the content, enter a dynamic id and also put the background color inside the style:

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

Also, you were trying to select the element $("#color") before even inserting the variable "content" (with your html and color Divs) in the document.

  • I’ve never used a dynamic id before, so could you explain your tag a little better ?. That would help me a lot .

  • A dynamic id is a normal id, but you use a loop with some iterator to make sure it doesn’t repeat itself. In the example, I used id='color-"+i+"', because the variable "i" is the index of your txt array, so it will never repeat itself ensuring that each element has a different id.

  • I understand, One thing I wanted to take the doubt you used the style so : background-color : +txt[i]. color+"; . So the color of the background is set according to the value of tex.cor ,for example if it is Red the background color will be red. So why the color class ?

  • The color class is just to illustrate the use. In case, if you will no longer perform any selection of this div (neither by class, nor by id), you can remove the two attributes "id" and "class".

  • Moreover, the ideal would be to apply these css through classes. It is not recommended to use inline css (in the element itself).

  • Got it, thanks for your patience.

Show 1 more comment

Browser other questions tagged

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