jQuery code working on Chrome and Mozilla web browser but not on Internet Explorer

Question

I have the following code on aspx file:

<asp:GridView ID="GridView1"  runat="server" ShowFooter="true"  
AutoGenerateColumns="False" >
   <Columns>
            <asp:TemplateField>
              <ItemTemplate>
<asp:LinkButton ID="Button1" runat="server" Text="Active" OnClientClick="return 
confirmMessage(this);" />
             </ItemTemplate>
    </Columns>
</asp:GridView>

I have the following Jquery/client side code

function confirmMessage(obj)
{
if ($(obj).attr("text")=="Active")
{
return confirm("Convert from active to inactive");
}
else
{
return confirm("Convert from inactive to active");
}
}

The above mentioned code is working fine on Mozilla and Chrome browswer but in case of Internet Explorer , it's always executing the 2nd block ie

return confirm("Convert from inactive to active");

Help would be appreciated.

Answer 1

Your problem is very likely related to the string comparison differences between different browsers, as well as the differences in text-from-DOM generation mechanics. Have you tried to see under a debugger (such as IE9 Developer Tools/Scripting tab), what returns the $(obj).attr("text") under IE?

Furthermore, the approach of comparing texts is not highly reliable anyway (eg it would fail after any change in the Text of your LinkButton ). I would advise you to rely on either classes or different link buttons instead, for example:

1. Use the following markup for the LinkButton: (notice the CssClass property):

    <asp:LinkButton ID="Button1" runat="server" Text="Active" OnClientClick="return confirmMessage(this);" CssClass="button-activate" /> 

2. Then use the following JavaScript:

    function confirmMessage(obj) { if ($(obj).is(".button-activate")) { return confirm("Convert from active to inactive"); } else { return confirm("Convert from inactive to active"); } } 

When your button is not 'Activate' anymore but 'Deactivate', simply put any other CssClass value to the LinkButton .

Answer 2

There is no attribute called 'text', an ASP.NET server control 'Text' attribute gets converted to the 'value' attribute on the client side.

You need to refer to the value as so:

$(obj).attr("value");

Or more simply as:

$(obj).val();