dropdownlist with jQuery not working? : The Official Microsoft ASP.NET Forums

Reply

dropdownlist with jQuery not working?

Jan 09, 2012 06:16 AM|LINK

Hi

I am trying to use style dropdownlist using example from http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/ but am getting this error.

Microsoft JScript runtime error: Object expected

If i download and run its working fine but if i create a new website and add the contents same as in the above link its not working. Why?

Thanks

Reply

Re: dropdownlist with jQuery not working?

Jan 09, 2012 06:21 AM|LINK

Have you added JQuery file reference...if yes then paste your code here.

Please mark the post as "Answer" that helps you.

Reply

Re: dropdownlist with jQuery not working?

Jan 09, 2012 06:22 AM|LINK

hi

here is my code

<head runat="server">
    <title></title>
    <link type="text/css" rel="Stylesheet" href="CSS/Selectbox.css" />
    <link type="text/javascript" href="js/jquery.min.js" />
    <link type="text/css" href="js/jquery.selectbox-0.5.js" />
    <script type="text/javascript">
        $(document).ready(function() {
            $('#Items').selectbox();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:DropDownList name="Items" ID="Items" runat="server" >
        <asp:ListItem Text="test1" Value="test1"></asp:ListItem>
        <asp:ListItem Text="test2" Value="test2"></asp:ListItem>
        <asp:ListItem Text="test3" Value="test3"></asp:ListItem>
        <asp:ListItem Text="test4" Value="test4"></asp:ListItem>
        <asp:ListItem Text="test5" Value="test5"></asp:ListItem>
    </asp:DropDownList>
    </form>
</body>

Reply

Re: dropdownlist with jQuery not working?

Jan 09, 2012 07:11 AM|LINK

Hi,

File reference has some problem. Try with ResolveClientUrl or ResolveUrl-

http://forums.asp.net/p/1742058/4695188.aspx/1?Re+CSS+couldn+t+be+retrieve+

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Marked as answer by athar_techsavvy on Jan 09, 2012 10:23 AM

Reply

Re: dropdownlist with jQuery not working?

Jan 09, 2012 07:18 AM|LINK

athar_techsavvy

hi

here is my code

<head runat="server">
    <title></title>
    <link type="text/css" rel="Stylesheet" href="CSS/Selectbox.css" />
    <link type="text/javascript" href="js/jquery.min.js" />
    <link type="text/css" href="js/jquery.selectbox-0.5.js" />
    <script type="text/javascript">
        $(document).ready(function() {
            $('#Items').selectbox();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:DropDownList name="Items" ID="Items" runat="server" >
        <asp:ListItem Text="test1" Value="test1"></asp:ListItem>
        <asp:ListItem Text="test2" Value="test2"></asp:ListItem>
        <asp:ListItem Text="test3" Value="test3"></asp:ListItem>
        <asp:ListItem Text="test4" Value="test4"></asp:ListItem>
        <asp:ListItem Text="test5" Value="test5"></asp:ListItem>
    </asp:DropDownList>
    </form>
</body>

for javascript file reference use script instead of link

replace:

  <link type="text/javascript" href="js/jquery.min.js" />
    <link type="text/css" href="js/jquery.selectbox-0.5.js" />
with :

 <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.selectbox-0.5.js" type="text/javascript"></script>

Welcome To My Blog

Reply

Re: dropdownlist with jQuery not working?

Jan 09, 2012 07:30 AM|LINK

hi

Thanks Anup file reference problem is solved but this event is not firing, why?

protected void ddlstAllCISTablesChanged(object sender, EventArgs e)

 if i remove this property

ClientIDMode="Static"  event is firing but style is not applying. How to solve this?

Reply

Re: dropdownlist with jQuery not working?

Jan 09, 2012 07:55 AM|LINK

Hi,

I am not sure what event you are talking about?

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Reply

Re: dropdownlist with jQuery not working?

Jan 09, 2012 08:05 AM|LINK

hi

protected void ddlstAllCISTablesChanged(object sender, EventArgs e) // This is not firing

{ }

OnSelectedIndexChanged event is not firing

Reply

Re: dropdownlist with jQuery not working?

Jan 09, 2012 08:26 AM|LINK

Hi

here is my full code

<asp:UpdatePanel ID="upd" runat="server">
        <ContentTemplate>
            <table cellpadding="5">
                <tr>
                    <td>
                        <asp:Label ID="lblTableNames" runat="server" Text="Select Table"></asp:Label>
                    </td>
                    <td>
                        <asp:DropDownList name="ddlstAllCISTables" ID="ddlstAllCISTables" runat="server" Height="25px" Width="150px"
                            OnSelectedIndexChanged="ddlstAllCISTablesChanged" AutoPostBack="true">
                            <asp:ListItem Text="-- Select Table --" Value="-- Select Table --"></asp:ListItem>
                            <asp:ListItem Text="G_CODES" Value="G_CODES"></asp:ListItem>
                            <asp:ListItem Text="X" Value="X"></asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <td>
                        <asp:Label ID="lblSchema" runat="server" Text="Select Schema" Visible="false"></asp:Label>
                    </td>
                    <td>
                        <asp:DropDownList ID="ddlstSchemaNames" runat="server" Height="25px" Width="145px"
                            Visible="false" AutoPostBack="true" OnSelectedIndexChanged="ddlstSchemaNamesChanged"
                            CssClass="dropdownList">
                            <asp:ListItem Text="-- Select Schema --" Value="-- Select Schema --"></asp:ListItem>
                            <asp:ListItem Text="bdsp" Value="bdsp"></asp:ListItem>
                        </asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td colspan="4" align="center">
                        <asp:Button ID="btnCompare" runat="server" Text="Compare" Visible="false" ToolTip="Click to compare two tables"
                            OnClick="btnCompare_Click" />
                    </td>
                </tr>
            </table>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ddlstAllCISTables" EventName="SelectedIndexChanged" />
            <asp:AsyncPostBackTrigger ControlID="ddlstSchemaNames" EventName="" />
        </Triggers>
    </asp:UpdatePanel>

protected void ddlstAllCISTablesChanged(object sender, EventArgs e) // This is not firing

{ }

OnSelectedIndexChanged event is not firing

How to solve this?

Reply

Re: dropdownlist with jQuery not working?

Jan 09, 2012 09:42 AM|LINK

Hi,

Selected change event will not work. As the plugin dropdown what you can see is not actually a dropdownlist. Its basically a textbox with ul li. Check the HTML created at runtime in the image below-

Your dropdownlist is actually made hidden(black square). Search in the plugin there will be some event like change. In that event change the selected item index of the actual(hidden) ddl using jQuery.

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

dropdownlist with jQuery not working? RSS

10 replies

athar_techsa...

dropdownlist with jQuery not working?

me_ritz

Re: dropdownlist with jQuery not working?

athar_techsa...

Re: dropdownlist with jQuery not working?

asteranup

Re: dropdownlist with jQuery not working?

Yousef_Jadal...

Re: dropdownlist with jQuery not working?

athar_techsavvy

athar_techsa...

Re: dropdownlist with jQuery not working?

asteranup

Re: dropdownlist with jQuery not working?

athar_techsa...

Re: dropdownlist with jQuery not working?

athar_techsa...

Re: dropdownlist with jQuery not working?

asteranup

Re: dropdownlist with jQuery not working?

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft