Transparent LinkButton in ASP Repeater on jquery click event

Question 1

After a good night sleep, here's a simple (not the most elegant though) solution:

 protected void repStatuses_ItemCommand(object source, RepeaterCommandEventArgs e)
{
   SetAsOriginal();

    //Get the linkbutton that was clicked
    LinkButton lnkBtnClicked = e.CommandSource as LinkButton;       //e- is the object of the repeater. CommandSource- is the clicked
    if (lnkBtnClicked != null)
    {
        SetOpacity(lnkBtnClicked, "0.4");
    }

private void SetAsOriginal()
{
    foreach (RepeaterItem item in repStatuses.Items)
    {
        LinkButton btn = item.FindControl("linkBtnStatuses") as LinkButton;
        SetOpacity(btn, "1.0");
    }
}

private void SetOpacity(LinkButton linkButton, string opacityValue)         //SET THE OPACITY TO THE SPECIFIC linkbutton 
{
    linkButton.Style.Add("opacity", opacityValue);
}

The thing is, that the answer above was very good and working, but did not answer my demand.. I needed to set only the clicked button as transparent and the rest of the buttons are to be set back to original.

So I've decided to specify the solution for those who might encounter with similar issue.

thank you everyone.

P.s: special thanks to @Lukasz M

Question 2

The probable reason the button reappears after second page load is that Your changes done in jQuery are not saved in ViewState and so are not preserved across postbacks. If You get a postback on a LinkButton click, You can save the information that it was clicked server-side (i.e. in add a class clicked in Your c# code handling the click event). Then, You can change the client-side script to set transprency for all the LinkButton controls with this class (and some special handling for the button clicked recently). You can also just define a class giving elements appropriate transparency settings. Let me know if You need any help with the code for this.

As to the second issue, please note that You get element by ID and it should be unique in the scope of a html page. That's probably why it works only for the first one. To make it work for all the elements, use a class instead. You can assign a class in your aspx like this:

<div id="divLinkBtn" class="divLnkBtnClass" style="display:inline">... </div>

and assign click handler like this:

$(document).ready(function () {
$('.divLnkBtnClass').click(function () {
  alert('divlinkbutton presed');
  $(this).css({ 'opacity': 0.4 });
});
});

This should make the script work for all the divs.

I haven't tested this code yet, so please let me know if You have any issues with it, so I can fix it and help You to make it work correctly.

UPDATE

There are few methods to preserve transparency across postbacks. You get postback on each item click, so I suppose saving it and restoring it server-side would be one of the easiest ways to achieve the desired effect.

First, add a private field to Your page in code-behind:
```
private List<String> itemsClicked = null;
```
and a HiddenField control in your aspx (outside of the Repeater control):
```
<asp:HiddenField runat="server" ID="hfButtonsClicked" Value="" />
```
We will use this HiddenField to save ClientIDs of LinkButton controls, which were already clicked.

Then, in Page_Load method, initialize the field with value from the hidden field:

protected void Page_Load(object sender, EventArgs e)
{
    SetPageTitle();

    //initialize itemsClicked before binding data to the repeater
    itemsClicked = hfButtonsClicked.Value.Split(new char[] { ';' }, StringSplitOptions.RemoveEmptyEntries).ToList();

    if (!Page.IsPostBack)
    {
        LoadStatusesAndButtons();

        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>LoadBarWithFadeIN();</script>", false);
    }
    else
    {
        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>LoadBar();</script>", false);
    }
}

Next, add a new method to the page, which will be used in the next step:

private void SetOpacity(LinkButton linkButton, string opacityValue)
{
    linkButton.Style.Remove("opacity");
    linkButton.Style.Add("opacity", opacityValue);
}

The last thing is adding code saving the id when the item is clicked, You can use click event or just utilize the existing OnItemCommand event handler:

protected void repStatuses_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    //get LinkButton that was clicked
    LinkButton lnkBtnClicked = (e.CommandSource as LinkButton);
    if (lnkBtnClicked != null)
    {
        //if item was not clicked before, so the opacity is not set
        if (lnkBtnClicked.Style["opacity"] == null)
        {
            //save control ClientID in the HiddenField
            hfButtonsClicked.Value += String.Format(";{0}", lnkBtnClicked.ClientID);

            SetOpacity(lnkBtnClicked, "0.4");
        }
    }

    //the rest of the original code should be here
    //...
}

and method restoring the opacity after the postback when item is data bound:

    protected void repStatuses_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        LinkButton lnkBtn = (e.Item.FindControl("linkBtnStatuses") as LinkButton);

        if (lnkBtn != null)
        {
            //if item was clicked before, so the opacity should be restored
            if (itemsClicked.Contains(lnkBtn.ClientID))
            {
                SetOpacity(lnkBtn, "0.4");
            }
        }

        //the rest of the original code should be here
        //...
    }

I implemented this in a sample application and it seems to work as expected. Let me know if You encounter any difficulties with this code.

Additional notes

You can also use a ViewState object instead the additional HiddenField control, but if You would like to change the solution to save/restore opacity in jQuery eventually, working with a HiddenField should be much easier.

There are also some improvements that should be made to the code (i.e. moving string separator to a read-only variable or not hardcoding the value of opacity attribute), but I wrote it this way to make the answer shorter and a little bit easier to read.