jQuery / Javascript：如何获取动态生成的控件的ClientID

Question

How can I get the client ID for dynamically created controls using javascript/jquery.

I have a datepicker and if value change it should trigger a textchanged event and do some functionality. Below is my script

function BindControlEvents() {
    $(".datepicker").datepicker({
        format: 'mm/dd/yyyy',
        autoclose: true,
        todayBtn: 'linked'
    }).on('changeDate', function (ev) {
        __doPostBack('MainContent_dteFr1002', '');
    }).on('clearDate', function (ev) {
        //to do
    });
}

//Initial bind
    $(document).ready(function () {
        BindControlEvents();
    });

//Re-bind for callbacks
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function () {
        BindControlEvents();
    });

Code-Behind for Dynamically generated textbox Datepicker

protected void Page_Init(object sender, EventArgs e)
{
      LoadControls(reportDefId);
}

protected void LoadControls(int reportDefId)
{
  HtmlTableCell cellDate = new HtmlTableCell();
  TextBox dte = new TextBox();
  dte.ToolTip = "If you need to filter for blank dates, please select date range 1/1/1753-1/1/1753";
  dte.Attributes.Add("type", "text");
  dte.Attributes.Add("class", "datepicker");
  if (rfl.fieldDisplayName.Contains("Start") || rfl.fieldDisplayName.Contains("End"))
      dte.ID = "dte" + id.ToString();
  else
      dte.ID = "dteFr" + id.ToString();
  dte.Style["Width"] = "85px";
  dte.Style["Height"] = "24px";
  dte.TextChanged += new EventHandler(dte_TextChanged);
  cellDate.Controls.Add(dte);
}

For testing, I have hard coded of ClientID 'MainContent_dteFr1002' to see if it fires textchnaged event. It does. So I need to pass cliendid value dynamically which ever cliendID contains dte.

I have searched but I didn't find appropriate answer.

Please help! Thanks

Answer 1

You can store the ClientID for each control for later use somewhere.

List<string> dynamicID = new List<string>();
dynamicID.Add(dte.ClientID);

Or give your controls self made ID and set the ClientID Mode to static so they will not be renamed by aspnet into MainContent_ID_5

dte.ID = "ID_" + index;
dte.ClientIDMode = ClientIDMode.Static;

Or navigate down the control path and find the correct ID, in this example the TextBox is added to PlaceHolder1 as the first control.

<%= PlaceHolder1.Controls[0].ClientID %>

Answer 2

The on change function should automatically have the reference to the dynamic control that triggered it.

alert(ev.target.id);

is one way, you should see the id.

$(this).attr("id");

or

this.id

should also contain the dynamic id's respectively. If your definition of CliendID means something else besides the control that is triggered in the event then you should specify what it is and how it's uniquely tied to this on change event.

Answer 3

lets assume that you have the button in a container.

<div class='ButtonContainer'>
<button value="textChanges" id="MainContent_dteFr1002" />
</div>
<input type="text" class='datepicker' value='2017-05-01' />

then you event could look like this

$(".datepicker").datepicker({
    format: 'mm/dd/yyyy',
    autoclose: true,
    todayBtn: 'linked'
}).on('changeDate', function (ev) { 
   $(".ButtonContainer").find("button").click();
}).on('clearDate', function (ev) {
    //to do
});

 //OR text changed on the same controller

$(".datepicker").datepicker({
format: 'mm/dd/yyyy',
 autoclose: true,
 todayBtn: 'linked'
}).on('changeDate', function (ev) { 
// (this) is the changes textbox
var id = $(this).attr("id");
 __doPostBack(id, '');
}).on('clearDate', function (ev) {
                //to do
 });