We Keep Coding

Dynamic control 'ID' automatically added to 'name' attribute, instead of ID attribute

I have a couple of lists on a configuration page in my application where users can configure the order of items as well as the selection for specific application pages. I'm using the ID of the dynamic controls added at runtime to move them from A to B, but currently this doesn't work due to my JavaScript failing to retrieve the ID of the control selected.
After digging down and inspecting further, the dynamic controls aren't getting an ID attribute assigned automatically, instead the ID is applied to the name attribute of the control which is why the JavaScript is failing.
I'm using both dynamic HtmlGenericControls and Textboxes.
JavaScript that retrieves the ID, it works when I switch this.id to this.name. However I need to use the ID attribute.
document.getElementById('itemID').value = this.id;
'itemID' is a hidden input field.
I've tried applying runat="server", clientidmode="static" / "autoID" but no luck so far.
Why is my dynamic controls getting the ID assigned to the name attribute instead of the ID attribute?
Is there something missing that I need to add to make it apply it to the ID attribute?
If you need any more information just comment below :-)
Additional Information
The web page is using a master page, so the controls are added within content place holders.
I've tried setting the ID in the javascript which added the ID to the attribute correctly but when doing the following the item was still null.
this.id = this.name;
TextBox selectedItem = (TextBox)exampleList.FindControl(itemID.Value);
Example of the dynamic control after being added:
<input name="ctl00$uniqueBody$ctl86" type="text" value="EXAMPLE" runat="server">
As you can see the name attribute holds the ID.

When you create Dynamic Control and want them to have an id, you need to specify that when creating them.
TextBox tb = new TextBox();
tb.ID = "TextBox1";
PlaceHolder1.Controls.Add(tb);
Now JavaScript can locate them by their ID, and FindControl will also work. FindControl works recursively, so you first need to find the ContentPlaceHolder on the Master page, then the PlaceHolder and then the dynamically created TextBox.
ContentPlaceHolder contentPlaceHolder = Master.FindControl("ContentPlaceHolder1") as ContentPlaceHolder;
PlaceHolder placeHolder = contentPlaceHolder.FindControl("PlaceHolder1") as PlaceHolder;
TextBox textbox = placeHolder.FindControl("TextBox1") as TextBox;

If the value of this.ID is not a string, but instead is of type int, double, etc, you'll see problems like this with your code when trying to assign to a string value. You need to use either Convert.ToString(this.id) or this.id.ToString(). The latter cannot handle nulls on its own.
document.getElementById('itemID').value = Convert.ToString(this.id);
document.getElementById('itemID').value = this.id.ToString();
What you are seeing now instead is the default method, which prints the control Type. If you see the type like that, you likely passed the whole control in and not its value. That suggests you need to check a text value.
document.getElementById('itemID').value = this.id.Text;

Have you tried:
this.name.id
?

How to get current active instance of jquery datepicker

I have multiple datepicker controls on single page binded to input controls.
When I click on any of the input control datepicker control linked to that input gets visible.
Now I want to get input for which the current instance of datepicker is being shown on another JS events.
Is it possible?

You can try using the $.datepicker._getInst(target) method to get any specific datepicker on your page. You just have to pass in a target element, which you can do so by just passing the id using document.getElementById (don't use JQuery or it will return undefined).
So like so:
var id = document.getElementById('someId');
//replace someId with the id of the datepicker currently visible.
var inst = window.$.datepicker._getInst(id);
This is especially helpful if you are trying to get the current instance of a datepicker that's an inline element (not attached to an input).

Inserting Text At Cursor Location With Quill.js

I am trying to add a custom piece of functionality ("module") to quill.js and cannot seem to do it. Here is what I need:
If want to add a button that inserts a template replacement variable... say
something like {{company}} at the location of the cursor in the
editor, is that currently possible with the API - I thought I could do
it using insertText but I cant seem to get it to work.
Thanks

What I ended up doing in a very similar setup:
let mergeFieldText = '{{company}}';
var selection = this._quill.getSelection(true);
this._quill.insertText(selection.index, mergeFieldText);

You should be able to do this with insertText but you might need to use getSelection to get the cursor location. The object returned by getSelection will have an index and length key. Adding the button and necessary click handler will be up to the implementor. Note focus should be returned back to the editor before calling getSelection with focus or simply passing true to getSelection.

This code snippet is to add symbol at cursor position with a custom button with Quill.js.
First declare quill variable:
var quill = new Quill('.editor', {
theme: 'snow'
});
With button click event, add symbol at caret position.
$('.symbols').click(function(){
quill.focus();
var symbol = $(this).html();
var caretPosition = quill.getSelection(true);
quill.insertText(caretPosition, symbol);
});

For any of you still having problems with this, know that if you have a bootstrap modal showing when trying to focus on the Quill to be able to use method getSelection(), you first need to close the modal before forcing focus on the quill instance.

How to Get ClientSide Value from ASP.net Custom Control?

How can I get ClientSide(JavaScript) Value for My ASP.net Custom Control?
for example I want to get a value like this:
var selectedItemID = getElementById("<%=MyControl1.ClientId%>").value;
How can i set a specific Value in my control scripts to get it from ".value" property like above?
Additional Note:
i want ".value" property(javascript) to get the dropDown control(one of my controls in my custom control) selected Value.

You can have a custom attribute for your custom control while it is rendering and bind the necessary value. Then in the Clientside, you can get the custom attribute and get the corresponding value from it.
For ex: Say suppose you are adding a custom attribute to your control using the code below while rendering,
MyControl.Attribures.Add("attributeName","Value");
then you can get the value in the clientside using the code snippet below.
var controlValue = $("#"+"<%= MyControl1.ClientID %>").attr("attributeName");
This would give you the value that you stored in the custom attribute of the control.

I'm not sured but You can try this:
var control = $find("<%= MyControl1.ClientID %>");
may be following link usefull for you No error message displayed for custom validator

just do like this way using jquery:
$("<%= MyControl1.ClientID %>").val();
using javascript:
var Val=document.getelementbyid("<%= MyControl1.ClientID %>").value;
hope this help.

If your control rendered as an input, your code will work but if it is anything else, such as a span or label, you need to use .innerHTML instead of .value

Make user Control visible using Javascript

All I want to make user control visible on button click. I am getting object null typical error on following code. How do I make complete user Control visible or invisible using javascript?
Dim ucAddNewChekcing As SubscriberSetupPages_UserControls_CheckingAccount
ucAddNewChekcing = DirectCast(pnlTopLevel.Items().FindItemByValue("pnlAddChecking").FindControl("CheckingAcct1"), SubscriberSetupPages_UserControls_CheckingAccount)
Dim openWinScript As String = "SetVisibility('" & ucAddNewChekcing.ClientID & "');"
btnAddChecking.OnClientClick = openWinScript
Thanks in advance.

have visible="false" set means your control doesn't get rendered at all, so there's no element available when you want to display it. you can address this in a couple ways:
leave the control visible, so it renders, and use css styling to hide it until you want it: style="display: none;" in place of visible="false".
change visible to true and set style="display: none;" on some wrapping element (see edit below).
in your SetVisibility function, you can do
element.style.display = '';
to remove the none value and show the element.
edit: ok after thinking about this some more, we can't put style="display: none;" right in the user control tag because that doesn't map to any specific html element. instead, this needs to be set on an element that wraps the contents of the user control.
if the user control has such an element already, that would be a good place to set the display styling. you can add a method to the control that will return the ClientID for that element so you can reference it in script.otherwise if your layout will tolerate it you can put the control inside an asp:Panel and set the display property there.
the other option is to wrap your control in an UpdatePanel containing some control (like HiddenField) as a flag which will indicate if the control is visible or not. if you go that route you SetVisibility function looks something like
// change value on flag control
hiddenControl.value = '1';
// trigger a partial postback
__doPostBack('UpdatePanel1', '');
and then in your UpdatePanel_Load function you can check the value of your flag control and set the Visible property on your user control accordingly.