retrieve id of textbox from content place holder in jquery function

Question

I am using JQUERY UI for my web pages. I am trying to use datepicker control. The problem is jquery function is not taking the textbox ID. It is working when I concatenate the content placeholder id with textbox id.

<asp:Content ID="PassportContent" ContentPlaceHolderID="CPH001" runat="server">
<div class="form-group">
    <label>Date Of Birth</label>
    <asp:TextBox ID="datepicker" runat="server" CssClass="txt-control"></asp:TextBox>
</div>
</asp:Content>

actual jquery code

<script src="../jquery/external/jquery/jquery.js"></script>
<script src="../jquery/jquery-ui.min.js"></script> 
<script>
    $(function () {
        $("#datepicker").datepicker();
    });
</script>

working jquery code

<script>
    $(function () {
        var temp = document.getElementById('<%= datepicker.ClientID %>').value;
        alert(temp);
        $("#CPH001_datepicker").datepicker();
    });
</script>

When I searched in forums most of the solutions suggested to use document.getElementById, I tried getting the ID using >>

document.getElementById('<%= datepicker.ClientID %>').value; but the alert box is showing NULL.

How to solve this problem?
When I keep my js code in seperate file, how to solve this problem ?

As suggested, I used $("[id$=datepicker]").datepicker();. And it works I am getting the datepicker. But I cannot change the date format and restrict the date range. Please suggest.

<script>
    $(function () {
        $("[id$=datepicker]").datepicker();        

        $("[id$=datepicker]").datepicker({ dateFormat: 'ISO 8601 - yy-mm-dd' }); // not working
    });
    // not working
    $("#format").change(function () { $("[id$=datepicker]").datepicker('ISO 8601 - yy-mm-dd', "dateFormat", $(this).val()); });
</script>

You can just set ClientIDMode="Static" in asp:TextBox. This would create the rendered element with the actual id defined, and then you can use $("#datepicker").datepicker(); — DinoMyte, Feb 24 '16 at 01:13

score 1 · Accepted Answer · edited May 23 '17 at 12:23

1

When Content page renders Textbox id Changes. Use Textbox id like this

<script>
$(function () {
    $("[id$=datepicker]").datepicker();
});
</script>

See How to use JQuery with Master Pages?

edited May 23 '17 at 12:23

Community

1
1

answered Feb 24 '16 at 01:14

Nagib Mahfuz

833
10
19

Thanks for the reply. It works. One question >> Will it work too when I keep the js code in separate file ? Also, I tried restricting the date range, but the code is not working. `$("[id$=datepicker]").datepicker(); $("[id$=datepicker]").datepicker({ minDate: -20, maxDate: "+1M +10D" }); $("#format").change(function () { $("[id$=datepicker]").datepicker('ISO 8601 - yy-mm-dd', "dateFormat", $(this).val()); });` – user4221591 Feb 24 '16 at 02:20
Yes it will work if you keep js in separate file. But i am confused about the date range. Which range of year/date you want to show?? Example like if you want to use 1990 to present use some thing like ` $(function () { $("[id$=datepicker]").datepicker({ changeMonth: true, changeYear: true, dateFormat: 'dd/mm/yy', yearRange: "1990:+0" }); });` – Nagib Mahfuz Feb 24 '16 at 03:31

score 0 · Answer 2 · answered Feb 24 '16 at 00:30

0

Try it with an input field, your code is correct:

<input type="text" id="datepicker" runat="server" CssClass="txt-control" />

I'm not sure if jquery can handel an "asp:TextBox" tag or will it be replaced?

answered Feb 24 '16 at 00:30

what is the difference b/n `asp:TextBox` and `input`. How does `input` effect my code. – user4221591 Feb 24 '16 at 00:34
as i understand you this pice of code is not working `$("#datepicker").datepicker();`...maybe it expect an input tag but im not sure like i said, you can try. – Feb 24 '16 at 00:39

retrieve id of textbox from content place holder in jquery function

2 Answers2