Using script within ASPX page

Question

so I have this code within an ASPX page. I am trying to use it within a text box in the same page, but no success. However, I can use the script within a text box in my master page? Any help would be appreciated, thanks

<asp:Content runat="server" ID="FeaturedContent" 
ContentPlaceHolderID="FeaturedContent">

<script src="jquery-1.12.1.js"></script>
<script src="jquery-ui.js"> </script>
<link href="jquery-ui.css" rel="stylesheet" />

<script type="text/javascript">
    $(document).ready(function () {
        $('#txtStationName').autocomplete({
            source: 'StationHandler.ashx'
        });
    });
</script>

 <asp:TextBox ID="txtStationName" runat="server">
 </asp:TextBox>

the textbox that generated by the asp is different id, try to look into browser console to check what is the real id, it usually generate like (your masterpagename)_txtstationname or use $('input[id$="txtStationName"]') — Se0ng11
– Se0ng11, Commented May 31, 2018 at 3:50

Kiran Shahi · Accepted Answer · 2018-05-31 03:58:30Z

5

Since your <asp:TextBox ID="txtStationName" runat="server"> is server side component. .NET will append certain value with your ID. There might be two solution for this condition.

1) You can use ClientIDMode="Static" to make the generated IDs consistent

<asp:Content runat="server" ID="FeaturedContent" 
ContentPlaceHolderID="FeaturedContent">

<script src="jquery-1.12.1.js"></script>
<script src="jquery-ui.js"> </script>
<link href="jquery-ui.css" rel="stylesheet" />

<script type="text/javascript">
    $(document).ready(function () {
        $('#txtStationName').autocomplete({
            source: 'StationHandler.ashx'
        });
    });
</script>

<asp:TextBox ID="txtStationName" runat="server" ClientIDMode="Static">
</asp:TextBox>

2) Or find the exact ID generated on DOM from developer console and use js on that element.

answered May 31, 2018 at 3:58

Kiran Shahi

8,0109 gold badges41 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

monty · Accepted Answer · 2018-05-31 03:51:04Z

2

The ID of your textbox will be changed by the asp.net compiler. To prevent this you'll want to do:

<asp:TextBox ID="txtStationName" runat="server" ClientIdMode="static">

</asp:TextBox>

answered May 31, 2018 at 3:51

monty

1,59015 silver badges34 bronze badges

Comments

Kiran Shahi · Accepted Answer · 2018-05-31 03:59:31Z

1

I suggest you to try with classname in your code

 <asp:TextBox CssClass="uniquetxtStationName" ID="txtStationName" runat="server">
 </asp:TextBox>

and use it in script :

$('.uniquetxtStationName').autocomplete({
    source: 'StationHandler.ashx'
});

Reason behind this : aspx will update all your ID of server tag, so you cant use actual ID of your tag in to javascript function directly.

edited May 31, 2018 at 3:59

Kiran Shahi

8,0109 gold badges41 silver badges77 bronze badges

answered May 31, 2018 at 3:57

Saurin Vala

1,9381 gold badge18 silver badges25 bronze badges

Comments

Manish Singh · Accepted Answer · 2018-06-02 07:31:23Z

0

you have two option to work one is id another is class

<asp:TextBox CssClass="clstext" ID="txtauto" runat="server"> </asp:TextBox>

for class you use

$('.clstext').autocomplete({
source: 'StationHandler.ashx'

});

if you use id then

<asp:TextBox ID="txtStationName" runat="server" ClientIdMode="static">

$('.txtStationName').autocomplete({
source: 'StationHandler.ashx'
});

answered Jun 2, 2018 at 7:31

Manish Singh

1,0041 gold badge14 silver badges30 bronze badges

Collectives™ on Stack Overflow

Using script within ASPX page

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related