Change Background Color of Li Element

[Zero-Cool]

Da i moja greska u kodu mi jquery postavlja u ul element class="token-input-list" a ne id="token-input-list"...mada ne vidim sto bi to bio problem.

[Nemanja Avramović]

Meni ovaj tvoj primer radi lepo. Evo i sređene verzije koja koristi jQuery.inArray koji je neko već pomenuo. Ono što sam ja ubacivao je apsolutno nepotrebno kad već imamo jQuery: http://jsbin.com/ugigem/11/edit#javascript,live

[Br@nkoR]

http://api.jquery.com/jQuery.inArray/

The $.inArray() method is similar to JavaScript's native .indexOf() method in that it returns -1 when it doesn't find a match. If the first element within the array matches value, $.inArray() returns 0.

Because JavaScript treats 0 as loosely equal to false (i.e. 0 == false, but 0 !== false), if we're checking for the presence of value within array, we need to check if it's not equal to (or greater than) -1.

[Nemanja Avramović]

Off Topic: Evo videh i sam. Na kraju sam posle 10 minuta ipak odlučio da pročitam šta piše na toj stranici pa sam zaključio da ne vraća true/false. Ispravio sam svoj kod. Hvala!

[Br@nkoR]

@Zero-Cool: Postavi link do stranice gde ovo koristiš, ukoliko problem i dalje postoji.

[Zero-Cool]

Malo je komplikovana situacija kod mene, ovo se sve vrti pod Sharepoint-om na nekom izolovanom serveru, tako da je nemoguce da okacim stranicu...mogu samo da vam opisem sta radim, mozda cete skontati nesto iz toga....

Ovako: Imam text box sa autocomplete=om koji je multiple, znaci moze da se izabere vise vrednosti (tako je napravljen da koristi jquery i na svaki izbor on uradi neki postback i smesti vrednosti u hiddenfield a u ovo text box-u prikaze vrednost, uokviri je i postavi 'x' za brisanje vrednosti...to je upravo ono <li class="token-input-token">nesto</li><span class="nesto">x</span>...znaci za svaki dodat element on napravi jedan ovakav element kroz postback.

Kada selektujem sve potrebne elemente, ja tada na neko drugo dugme hocu da proverim da li selektovani (u ovom slucaju su to useri iz Sharepoint-a) se nalaze stvarno prisutni u AD i ako se neki od njih ne nalazi da se taj ukovireni deo Li elementa oboji u crveno. Ovo radim u Code Behindu, imam metod koji sve to lepo pregleda i vrati mi niz usera koji se ne nalaze u AD-u, ja taj niz prosledim javascript metodi koju sam pre toga definisao u ASPX stranici ili nekom eksternom js fajlu i pozovem tu javascript metodu kroz ScriptManager.RegisterStartupScript....

Kada pustim kroz debug, on lepo udje u ovaj highlight(hajlajt) metod ali nikad mi ne prodje ovaj .each, odnosno kad stavi breakpoint na var txt = $(this).children('p:first').text(); nikad ne dodje do toga...

Tacno je da ovaj kod sto ste ovde napisali radi, to sam isprobao ovako bezveze, ali u okviru ovog mog solutiona ima neki problem.

[Br@nkoR]

Deluje kao da jQuery selektor nije ispravan i ne selektuje se nijedan elemenat, dakle u primeru koji je postavio @Nemanja Avramović $('.input-token-list').find('li'). Pokušaj to u conzoli da uneseš i vidiš da li selektuje neki elemenat ili ukoliko možeš postavi samo html kod tog dela (ul elmenat). Mada vidim da ti pominješ, u prethodnoj poruci, drugačiji class atribut token-input-list, zatim obrati pažnju na to da . u jQuery selektoru predstavalja class, a # id.

Zatim možda je bolje da menjaš classu tih elemenata a ne css background osobinu tih elemenata, lakše ti posle ukoliko želiš da menjaš dizajn, menjaš u CSS kodu osobine za tu klasu, a ne u JavaScrip.

[Zero-Cool]

Da upravo sam shvatio da je bolje da menjam klasu a ne poseban stil, tako da sam to vec napravio pre nego sto sam video tvoj post...u medjuvremenu gledam ovaj kod pa sve mislim da se mozda ne pregazi ova promena sto pozivam sa onom nativnom koju sama kontrola poziva pri renderu

Takodje ono sto sam zaboravio da napomenem (moja greska), ali mislim da to ne bi trebalo toliko da utice je, da je ta kontrola u UpdatePanelu, ali ona radi sve ok. Jedini pravi problem je sto na FullPostBack (klikom na dugme) ja ne mogu da dohvatim te elemente koji su kreirani i da im promenim stil...

[Zero-Cool]

Funkcija koja je trenutno:

function highlight(list, fraze, bg_color) {
        if (bg_color === undefined)
            bg_color = "token-input-token-facebook-red";

        $(list).find('li').each(function () {
            var txt = $(this).children('p:first').text();

            if ($.inArray(txt, fraze) !== -1)
                $(this).removeClass('token-input-token-facebook').addClass(bg_color);
                });
    }

Poziv funkcije:

highlight('ul.token-input-list-facebook'," + _usersNotExisting + ",'token-input-token-facebook-red')

Deo koda iz ASPX stranice u kome se nalazi kontrola koja pri renderu pravi UL listu sa LI elementima o kojima sam pricao

<asp:Panel ID="pan_FindUsers_User" runat="server" Visible="false" CssClass="nis-taskdetails-zone-row">
                    <span class="nis-taskdetails-zone-row-title">User</span>
                    <div class="nis-taskdetails-zone-row-value" style="clear:both;">
                        <asp:UpdatePanel ID="up_FindUsers_Value" runat="server" UpdateMode="Conditional">
                            <ContentTemplate>
                                <ati:ASPTokenInput ID="pe_FindUsers" runat="server" OnListChanged="pe_FindUsers_ListChanged" RequestHandlerPath="/_layouts/NIS.TaskManagement/pages/ItemList.aspx" PostbackOnItemAdded="True" PostbackOnItemRemoved="True" Theme="facebook" HintText="Start Typing User Name ..." Width="530px" />
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </div>
                </asp:Panel>

i na kraju renderovani kod izgleda ovako:

<UL class=token-input-list-facebook jQuery164001925506440042457="315">
<LI class=token-input-token-facebook jQuery164001925506440042457="318">
<P>Ime i Prezime, Poslovođa</P><SPAN class=token-input-delete-token-facebook jQuery164001925506440042457="317">×</SPAN></LI>
<LI class=token-input-token-facebook jQuery164001925506440042457="320">
<P>Ime i Prezime, Specijalista za održavanje remontnih postrojenja</P><SPAN class=token-input-delete-token-facebook jQuery164001925506440042457="319">×</SPAN></LI>
<LI class=token-input-input-token-facebook><INPUT style="OUTLINE-STYLE: none; OUTLINE-COLOR: invert; OUTLINE-WIDTH: medium; WIDTH: 30px" id=token-input-ctl00_ctl23_g_e95b3a1e_efe8_4b15_8ff5_2909cd47abf9_ctl00_pe_FindUsers_ctl00 type=text autocomplete="off" jQuery164001925506440042457="313"><tester style="POSITION: absolute; WIDTH: auto; LETTER-SPACING: normal; FONT-FAMILY: Tahoma; WHITE-SPACE: nowrap; FONT-SIZE: 12px; FONT-WEIGHT: 400; TOP: -9999px; LEFT: -9999px"></tester></LI></UL>

[Br@nkoR]

Ne znam, i ovo radi kod mene kada testiram ovako:

<!DOCTYPE html> 
<html lang="en"> 
  <head>
    <title>test</title>
    <meta charset="utf-8"> 
    <style>
     .token-input-token-facebook-red {
       background-color: red;
     }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
    <script type="text/javascript">
      function highlight(list, fraze, bg_color) {
        if (bg_color === undefined)
            bg_color = "token-input-token-facebook-red";

        $(list).find('li').each(function () {
            var txt = $(this).children('p:first').text();

            if ($.inArray(txt, fraze) !== -1)
                $(this).removeClass('token-input-token-facebook').addClass(bg_color);
                });
      }
      
      $(function() {
        highlight('ul.token-input-list-facebook',  ['Ime i Prezime, Specijalista za održavanje remontnih postrojenja'], 'token-input-token-facebook-red');
      });
    </script>
  </head>
  <body>
    <UL class=token-input-list-facebook jQuery164001925506440042457="315">
      <LI class=token-input-token-facebook jQuery164001925506440042457="318">
        <P>Ime i Prezime, Poslovođa</P>
        <SPAN class=token-input-delete-token-facebook jQuery164001925506440042457="317">×</SPAN>
      </LI>
      <LI class=token-input-token-facebook jQuery164001925506440042457="320">
        <P>Ime i Prezime, Specijalista za održavanje remontnih postrojenja</P>
        <SPAN class=token-input-delete-token-facebook jQuery164001925506440042457="319">×</SPAN>
      </LI>
      <LI class=token-input-input-token-facebook>
        <INPUT style="OUTLINE-STYLE: none; OUTLINE-COLOR: invert; OUTLINE-WIDTH: medium; WIDTH: 30px" id=token-input-ctl00_ctl23_g_e95b3a1e_efe8_4b15_8ff5_2909cd47abf9_ctl00_pe_FindUsers_ctl00 type=text autocomplete="off" jQuery164001925506440042457="313">
        <tester style="POSITION: absolute; WIDTH: auto; LETTER-SPACING: normal; FONT-FAMILY: Tahoma; WHITE-SPACE: nowrap; FONT-SIZE: 12px; FONT-WEIGHT: 400; TOP: -9999px; LEFT: -9999px"></tester>
      </LI>
    </UL>
  </body>
</html>