6 Replies Latest reply on Feb 22, 2008 12:53 PM by Sergey Smirnov

    Why I lose my css??

    osvaldo gomez Newbie

      Hi,

      I have a <rich:dataTable id="pepe" .... And I using

      <a4j:commandLink id="link_" actionListener="#{function.delete}" reRender="pepe" >

      To delete a row from that table. But I also have some style for the table given by

      <rich:jQuery selector="#pepe tr:odd" query="addClass('odd-row')" " />
      <rich:jQuery selector="#pepe tr:even" query="addClass('even-row')" />
      <rich:jQuery selector="#pepe tr"
      query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
      <rich:jQuery selector="#pepe tr"
      query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>

      Well, when I delete some row I lose all style of the table and in the same way when I browsing on the table with datascroller.

      Any help is welcome.

      Regards

        • 1. Re: Why I lose my css??
          Sergey Smirnov Master

          because you apply classes directly to the DOM elements. After the Ajax response, the old DOM elements are replaced with the new ones. So, applied styles are gone with old elements.
          What you need to do is reapplying the styles just after Ajax response.

          • 2. Re: Why I lose my css??
            osvaldo gomez Newbie

            Thanks Sergey

            But I don't know how I could do that. Could you give me an example please?


            Regards

            • 3. Re: Why I lose my css??
              Sergey Smirnov Master

              this depends of your code. I think that you can reRender the block of rich:jQuery together with table. It should work.
              Also, another approach is defining the function name for rich:jQuery and invoking the query by function name from oncomplete attribute.

              • 4. Re: Why I lose my css??
                osvaldo gomez Newbie

                I tryed both of options:

                <rich:datascroller align="center" for="pepe" maxPages="20" oncomplete="selectRow" />

                <rich:jQuery name="selectRow" timing="onJScall" query="addClass('active-row')" />

                and it doesn't work.

                So I tryed with reRender and it doesn't work too

                <rich:datascroller align="center" for="pepe" maxPages="20" reRender= "pepe, q1, q2, q3, q4" />

                <rich:jQuery selector="#pepe tr:odd" query="addClass('odd-row')" id="q1" />
                <rich:jQuery selector="#pepe tr:even" query="addClass('even-row')" id="q2"/>
                <rich:jQuery selector="#pepe tr" query="mouseover(function(){selectRow(this)})" id="q3"/>
                <rich:jQuery selector="#pepe tr" query="mouseout(function(){unselectRow(this)})" id="q4"/>

                I have a really big trouble with this, if I don't find the way to work it I must to leave richFaces.

                So if sombebody have an idea to fix it, it's really welcome.

                Thanks to all

                Regards

                • 5. Re: Why I lose my css??
                  osvaldo gomez Newbie

                  Ok people

                  I found the solutions. It is much more easy than I thougth, I only put the rowstyles in the table declarations

                  <rich:dataTable value="#{formularioBusquedaBean.datos}"
                  var="item" id="pepe" rows="5" rowClasses="odd-row, even-row">

                  That is all.

                  Thanks all, specially to Sergey.

                  Regards

                  • 6. Re: Why I lose my css??
                    Sergey Smirnov Master

                     

                    "osvaldogomez" wrote:
                    I tryed both of options:

                    <rich:datascroller align="center" for="pepe" maxPages="20" oncomplete="selectRow" />

                    <rich:jQuery name="selectRow" timing="onJScall" query="addClass('active-row')" />



                    timing="onJScall" means it will be invoked only by call. You can use the name even timing attribute is not specified. In this case, it works as inline during the regular page loading and by js call during the ajax.

                    Ok. You found the solution for yourself. It is good overall.