How to add a css class to element based on a condition(value from code behind) using javascript

Question

I want to add a css class (fontawesome classes) to the <i> element based on the file type which is found from the code behind.

I'm trying to achieve something like this. (so that the font changes based on the file type from code behind)

I tried to write a JS function which I thought would solve the problem.

        <head>
            <script type="text/javascript">
                    function showIcon() {
                        if(<%#Eval("fileType")%>=="ppt" || <%#Eval("fileType")%> =="pptx")
                        {
                            document.getElementById('icon').className = 'fa fa-file-powerpoint-o  fa-3x';
                        }
                        else if(<%#Eval("fileType")%>=="doc" || <%#Eval("fileType")%> =="docx")
                        {
                            document.getElementById('icon').className = 'fa fa-file-word-o  fa-3x';
                        }
                    }
                </script>
            </head>

        <body>
            <div class="col-xs-1">
                                <h3><td><%# Eval("count") %></td></h3>
                                <span>match</span>
                                <div id="icon"><i aria-hidden="true"></i></div>
                            </div>
        </body>

Can someone help me to correct this. Is there any other way in which I can do this?

score 0 · Answer 1 · answered Jun 20 '16 at 08:22

0

Check your page source in your browser, but I'd guess that the line:

if(<%#Eval("fileType")%>=="ppt" || <%#Eval("fileType")%> =="pptx")

is being output as

if(ppt=="ppt" || ppt =="pptx")

into your html.

Try wrapping the Eval into '...' marks

    if('<%#Eval("fileType")%>'=="ppt" || '<%#Eval("fileType")%>' =="pptx")

answered Jun 20 '16 at 08:22

Jon Egerton

40,401
11
97
129

It is showing something like in page source. I think its not correctly giving the Eval property. `if(''=="ppt" || '' =="pptx")` – ASN Jun 20 '16 at 08:32

score 0 · Answer 2 · answered Jun 20 '16 at 08:25

0

Any HTML Element has a property called classList. You can access the contents like you would with an array (element.classList[0]) and add or remove elements with add, remove and toggle.

Mozilla Developer Article about the classList Property

answered Jun 20 '16 at 08:25

G_hi3

588
5
22

Looks like I didn't recognise your problem. I'd still like to leave this answer for future visitors – G_hi3 Jun 20 '16 at 08:27

score 0 · Answer 3 · edited May 23 '17 at 12:31

0

Try

<%= fileType %> instead of <%# Eval("fileType") %>

Make sure fileType is public

Please refer this link I want to get property value from code behind

edited May 23 '17 at 12:31

Community

1
1

answered Jun 20 '16 at 09:20

Sourav Kumar

296
1
10

CS0103: The name 'fileType' does not exist in the current context error – ASN Jun 20 '16 at 10:02
Change to property with public/protected access specifier BTW is that a field right ? – Sourav Kumar Jun 20 '16 at 10:03
`public string fileType { get; set; }` This is how it is defined. – ASN Jun 20 '16 at 10:06
Try to check the code or debug whether the value is being assigned properly – Sourav Kumar Jun 20 '16 at 10:07
More important you should call Page.DataBind(); in page load event – Sourav Kumar Jun 20 '16 at 10:09

WinHtaikAung · Answer 4 · 2016-06-21T05:00:25.937

A bit improvement on your JS because we shouldnt mix server side code and client code as much as possible

                <script type="text/javascript">
                    function showIcon(fileType) {
                        if(fileType ==="ppt" || fileType ==="pptx")
                        {
                            document.getElementById('icon').className = 'fa fa-file-powerpoint-o  fa-3x';
                        }
                        else if(fileType ==="doc" || fileType === "docx")
                        {
                            document.getElementById('icon').className = 'fa fa-file-word-o  fa-3x';
                        }
                    }
                </script>
                <div class="col-xs-1">
                            <h3><td><%# Eval("count") %></td></h3>
                            <span>match</span>
                            <div id="icon"><i aria-hidden="true"></i></div>
                        </div>

If you use Jquery run with

$(function(){
  showIcon('<%#Eval("fileType")%>');
});

If you are not using Jquery write function another javascript function

function yourFunctionName(){
  showIcon('<%#Eval("fileType")%>');
}

Then Call yourFunctionName in body .onLoad

<body onload="yourFunctionName()">

Because the server side data render first and it will also render <%#Eval("fileType")%> first then client side js functions will execute when the server side rendering complete.

here is ref for onload

Hope it would help :)

Actually the entire code is inside a repeater and so the filetype changes from one repeater item to another. so I dont think body onload will be helpful . Am I correct? — ASN, Jun 21 '16 at 04:00
I dont get your 'repeater'.As my understanding if your 'repeater' means iteration from server side script. It will work on body onload. Because it is Javascript onload event will called after your iteration from server side script. — WinHtaikAung, Jun 21 '16 at 04:42

How to add a css class to element based on a condition(value from code behind) using javascript

4 Answers4