CODEWITHSUNDEEP
javascriptc#jqueryasp.net
crony
crony

Reputation: 511

Jquery/Javascript: How can I get ClientID for dynamically generated controls

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

Upvotes: 0

Views: 883

Answers (3)

VDWWD
VDWWD

Reputation: 35564

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 %>

Upvotes: 1

Alen.Toma
Alen.Toma

Reputation: 4870

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
 });

Upvotes: 0

Nard Dog
Nard Dog

Reputation: 916

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.

Upvotes: 0

Related Questions