[RESOLVED] Using <div> [as buttons] (Or|And) [ ASP buttons with runat server]

[trastrestris]

Hello,

I am working with ASP and I would like to get different look for HTML elements like gmail does.

For example, the CheckBox element, Instead of using a regular checkbox like this:

<asp:CheckBox ID="CheckBox1" runat="server" /> 

They use:

                <div id="Div1"  class="oZ-jc T-Jo J-J5-Ji" tabindex="0" aria-checked="false" role="checkbox">                
                    <div class="T-Jo-auh">                    
                    </div>
                </div> 

I’m trying to get this google trick to work, he uses <divs> as elements to make them have the appearance they want and somehow using code to switch CheckState (True|False) . So here my problem comes, I have tried to add ASP to the <div> with Runat server as follows:

                <div id="Concedido"   class="oZ-jc T-Jo J-J5-Ji T-Jo-Jp"  tabindex="0" aria-checked="true"    dir="ltr" aria-labelledby=":nt" role="checkbox" runat="server">
                    <div class="T-Jo-auh">
                    </div>
                </div> 

And then try to access the element from (.vb) but there was not event available for my improvised <div> Checkbox, so the next I have tried is to add a CheckBox event handler:

    Protected Sub Concedido_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles Permiso.CheckedChanged

    End Sub 

Failed too because I got error “BC30590: No se puede encontrar el evento 'CheckedChanged'.” (In English would mean that Can not find the event), and Ancle google told me that of course <div> is not an ASP element so that’s why I only get errors trying to do this.

So my question is: &#191;How can we get a div acting like a check button or any other ASP element?

Thanks a million for the answers.

Let the good look be with all.

PS: I am going to try it with JavaScript but it would be awesome if I could with vb.net.

[trastrestris]

I have been over 4 hours by now developing and also searching google for a way to create a visual switch effect like gmail does. I have come to discover than this can only be done in javascript.

I think I am almost getting it. Should I answer the JS code here? or open a new thread once I get the solution.
In first option (answering here) would give the thread as solved but this is ASP code and not JavaScript.
In second option (Opening new JS thread), this post would last without answer.

There is a third option, (Using Second option) and linking it from here.

What should I do?

[trastrestris]

So I finally solved the temporal problem, it only took me like 6 hours !. At the end is the explanation.

Here is the HTML

                <div id="BUENA_SUERTE"   class="oZ-jc T-Jo J-J5-Ji T-Jo-Jp"  tabindex="0" aria-checked="true"    dir="ltr" aria-labelledby=":nt" role="checkbox" runat="server" onclick="NombreFuncion();">
                    <%--InnertHTML for BUENA_SUERTE--%><div class="T-Jo-auh"></div> <%--End of InnertHTML--%>
                </div>
                
                <asp:HiddenField ID="BUENA_SUERTE_HIDDEN" runat="server" />
                
                <asp:Button ID="SuerteBoton" runat="server" Text="Button" /> 

Here is the JavaScript

function NombreFuncion()
{    
    var CTL='ctl00_';    //Prefijo del elemento que buscamos
    var CheckStatus=document.getElementById(CTL + 'BUENA_SUERTE').getAttribute('aria-checked');    
    var CheckEnabled='<div class="T-Jo-auh"></div>'; //Inserta una imagen desde CSS con <div>
    
    if (CheckStatus=='true')
    {
        document.getElementById(CTL + 'BUENA_SUERTE').setAttribute("aria-checked","false");
        document.getElementById(CTL + 'BUENA_SUERTE').setAttribute("class","oZ-jc T-Jo J-J5-Ji");
        document.getElementById(CTL + 'BUENA_SUERTE').innerHTML='';      
        document.getElementById(CTL + 'BUENA_SUERTE_HIDDEN').value='false';
    }
    else
    {
        document.getElementById(CTL + 'BUENA_SUERTE').setAttribute("aria-checked","true");
        document.getElementById(CTL + 'BUENA_SUERTE').setAttribute("class","oZ-jc T-Jo J-J5-Ji T-Jo-Jp");
        document.getElementById(CTL + 'BUENA_SUERTE').innerHTML=CheckEnabled;
        document.getElementById(CTL + 'BUENA_SUERTE_HIDDEN').value='true';
    } 
} 

Here is the VB (Very Important to get the Checked and Unchecked values), otherwise, information from <div> will be lost in the postback event.

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim MensajeError As String

        Try
            If Not Page.IsPostBack Then 'Primera vez que se carga la pagina
                'Whatever you need to do
            Else
                Me.BUENA_SUERTE.Attributes.Item("aria-checked") = Me.BUENA_SUERTE_HIDDEN.Value
                If Me.BUENA_SUERTE_HIDDEN.Value = "true" Then
                    Me.BUENA_SUERTE.InnerHtml = "<div class=""T-Jo-auh""></div>"
                    Me.BUENA_SUERTE.Attributes.Item("class") = "oZ-jc T-Jo J-J5-Ji T-Jo-Jp"
                Else
                    Me.BUENA_SUERTE.InnerHtml = ""
                    Me.BUENA_SUERTE.Attributes.Item("class") = "oZ-jc T-Jo J-J5-Ji"
                End If
            End If
        Catch ex As Exception
            MensajeError = MensajeError & "<br>" & "miError1: " & ex.Message
            Response.Write(MensajeError)
        End Try
    End Sub 

Here is the (How to access from VB)

    Protected Sub SuerteBoton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles SuerteBoton.Click
        MsgBox(Me.BUENA_SUERTE_HIDDEN.Value)
    End Sub 

So basically what it does is what I posted in first place, this is how it works:

1. In HTML we have two elements (1 of them is our Simulated Checkbox made of <div>), (The other is a Hidden Buton used as interface of comunication between client side (javaScript) and Server (vb), this way we wont loose the information (Checked|not checked) after page postback.

2. On event Click for element BUENA_SUERTE, JavaScript Switches from (True|False) to (False|True) and also fills the Hidden button. I have added the innerHTML in a variable so it's easier to understand, this little code in the innerHTML is really a picture simulating the Checked value.

3. Now we can access from VB the hidden field and do what ever we want like if it were a regular ASP CheckButton.

(Very Important note for Step 3: If there is a postback, check boxes will need to restored manually in the Load or another event that handles it. The code should be something like the one above in step 3.

Hope this helps someone.

Regards and Let the Good luck be with all of you. (Que la buena suerte os acompañe a todos)

Saludos!.