We Keep Coding

C# Get id of dynamically created labels

I need to be able to set the IDs of dynamically generated labels instead of letting SharePoint prefix my labels with a long cryptic id of its own. Is this possible or is there another property of label that I can use as a unique identifier in a separate method?
Label animal = new Label();
animal.ID = cat;
The id for this label will be something like:
ctl00_m_g_e0c173c0_edf3_4a99_a1dd_7bef33144c0b_ctl00_cat
I need it to be cat.

To force the client-side id to be the same as the server-side id, use:
animal.ClientIDMode = ClientIDMode.Static;

You cannot set the ClientId of a server control. It is a read only property.
The cryptic id you see is actually your control heirarchy.

If you're attempting to access the control with javascript and are using jQuery, you can just the various regex selectors:
$("label[id$='cat']")
That will look for a label element with an id that ends with 'cat'
If your javascript is in the aspx file, and not a js file, you can also access it like so:
$('#<%=cat.ClientID %>')
That will just inject that long id created by Sharepoint into your js. Key is it needs to reside in the aspx file, not a js file.

Get child controls on server control using javascript ASP.NET

I've create a basic composite server control that contains a button.
<Custom:Class1 ID="testClass" ClientInstanceName="test1" runat="server"></Custom:Class1>
I would like to be able to get to the child controls using javascript for example:
var myButton = testClass.FindControl('btnTest');
Is there anyway to do this?

Create a client side object to represent your server side control (javascript class). Put a collection of references to the child controls on the client side object. Then on the server side OnPreRender event create or load a script to define your client side object and at the same time pass the collection of references to its constructor.
Example of how to embed a javascript file containing the clientside object definition (put this somwhere above the namespace declaration:
[assembly: WebResource("myNS.stuff.clientSideObj.js", "application/x-javascript")]
namespace myNS.stuff
{
Example of how to register the WebResouce (OnPreRender):
ClientScriptManager cs = this.Page.ClientScript;// Get a ClientScriptManager reference from the Page class.
Type csType = this.GetType();// Get the type from this class.
//Register an embedded JavaScript file. The JavaScript file needs to have a build action of "Embedded Resource".
String resourceName1 = "myNS.stuff.clientSideObj.js";
cs.RegisterClientScriptResource(csType, resourceName1);
Example of creating a script to declare an instance of your client side object (OnPreRender):
String childControlIDsList= getChildControlList();//I am not writing this one.. just look up javascript arrays.
String uniqueScriptKey = "myKey";
StringBuilder theScript = new StringBuilder();
theScript.AppendLine("var myObj = new clientSideObj(" + childControlIDsList + ");");
theScript.AppendLine("window['myClientControl'] = myObj;") //create a client side reference to your control.
cs.RegisterStartupScript(csType, uniqueScriptKey, theScript.ToString(), true);
I will leave the client side object definition up to you... Hope that helps!

This is for Sharepoint visual web controls, but the same general process applies:
http://lemonharpy.wordpress.com/2011/07/20/expose-clientid-to-javascript-in-sharepoint-2010-visual-web-control/
Essentially, in the code behind on the page you get a reference to the ClientId on the page, and then expose that up as a javascript variable that you can prepend onto your jQuery selectors.
I feel this is a little hacky - but I think it gets the job done...

If you're using .net 4.0 you can set the the 'ClientIDMode' property on the button to Static then set the ID property to something like ID="myButton" and access it with with jquery like so
$("#myButton")
If you dont use jquery you can use
document.getElementById("myButton")
If you are using the control multiple times in the form you could prefix the button id with your custom controls id. Remember to set your custom controls ClientIDMode property to static as well.
<asp:Button ID="<%=Me.Id%>_myButton " ClientIDMode="Static" runat="server"/>
Not entirely sure this is even good practice or if it will work but you can try it.( remember to set your custom controls id

Is there way to associate a function to usercontrol

Is there way to associate a javascript function to a user control? Lets say I have a name control written in .ascx. Can I define a client side function, lets say .clear(), that would be associated to name control. The clear function would clear all the elements of that control. I know I can create clear() javascript function but that would be global javascript function, not necessarily tied to name control. I want to tie the function to name control so that given that I have reference to name object, I should be able to simply call that function from that reference something like:
name.clear();
I know this can be done using MS Ajax framework but was wondering if I can do something like that using jQuery.

If by "clear" you mean set the value of text/password inputs, textareas and select elements to an empty string, and set radio and checkboxes to !checked, then you can do something like this:
$("#someid").find('select,textarea,input[type="text"],input[type="password"]').val('');
$("#someid").find('input:radio,input:checkbox').prop('checked',false);
Or as a plugin:
(function( $ ) {
$.fn.clearChildren = function() {
this.find('select,textarea,input[type="text"],input[type="password"]').val('');
this.find('input:radio,input:checkbox').prop('checked',false);
return this;
};
})( jQuery );
$("#someid").clearChildren();
Demo: http://jsfiddle.net/nnnnnn/AvfUz/
(jQuery does have an ":input" selector that selects all selects, textareas and inputs, but you don't want to set the value of checkboxes and radios so they need to be done separately.)

The user control itself is not rendered as an actual html element, but any of the parts of the user control that's actually rendered as an html element can be referenced from client scripts.
You need to write the control client id to the html from the page or the user control like this:
<script type="text/javascript">
$('#<%= TheControl.ClientID %>').clearChildren();
</script>
The jQuery function for clearing the children is defined in #nnnnnn's answer.

How to Customize Hyperlinks on Client Side in ASP.NET MVC

I need to be able to do two things with Javascript or JQuery, without involving third-party open source libraries:
Use a jQuery or Javascript function to fill the HREF attribute of a link.
Perform an HTTP Get or Post operation OnUpdate of a text box or combo box (using the above javascript function to specify the HTTP target)
The end result will be hyperlinks posted to the controller that look similar to this:
http://mydomain/addresses/1?order=name&state=ca
The controller will return a new page, ordered by name and filtered on the state of California.
Suggestions?

If you have 2 textboxes and a hyperlink with url, try something like:
$(document).ready(function() {
$('a#yourHyperLinkId').click(function(event) {
event.preventDefault();
var url = $(this).attr('href');
var order = $('input#order').val();
var state = $('input#state').val();
$.get(url, { order: order, state: state }, function(response) {
$('div#yourDivForResponse').html(response);
});
});
});

I am not sure I follow...
Why do you need to fill the HREF of the link if your going to use JQuery to do the postback anyway?

Some elements of answer here : Passing Javascript variable to <a href >
If you want to load the controller response in the window, you can use a form with a crafted action. If not, you can either use an iframe as a target to the form or use an XHR object. Whatever solution you choose, you will link it to the onchange event of the text box or combo box.

Thanks fellas for pointing me in the right direction.
Answer to #1:
document.getElementById("link2").setAttribute("href",strLink);
Answer to #2 (more or less):
$("#mySelect").change(function() {
document.location = this.value;
});

JQuery Facebox Plugin : Get it inside the form tag

I am wanting to use the Facebox plugin for JQuery but am having a few issues getting it running how I want. The div that houses the facebox content is created outside of the tag so even though I am loading up some web controls none of them are firing back to the server.
Has anyone dealt with this that can give me some pointers?

poking around the facebox.js I came across this line in the function init(settings)...
$('body').append($.facebox.settings.faceboxHtml)
I changed that to ...
$('#aspnetForm').append($.facebox.settings.faceboxHtml)
and it loads up in the form tag, not sure yet if there are any side effects

You can use this code to register the PostBack event:
btn.OnClientClick = string.Format("{0}; $.facebox.close();",ClientScript.GetPostBackEventReference(btn, null));
this will let the button fires a PostBack.

Even after the :
$('#aspnetForm').append($.facebox.settings.faceboxHtml)
change I found it problematic. When you look at the page source using firebug you see that all the html in the div assigned to be the facebox div is doubled up (repeated).
So all of those controls with supposed unique id's are doubled up on the page, that can't be good on the postback, i've decided putting asp.net web controls in a facebox is not a good idea.

I modified facbox.js to do this. Maybe there is a better solution but this works like a charm
Here what i did:
add two lines on top of facbox.js before '(function($)'
var willremove = '';
var willremovehtml = '';
find "reveal: function(data, klass) {" and add this lines before the first line of function.
willremove = data.attr('id')
willremovehtml = $('#'+willremove).html()
$('#'+willremove).html('')
find "close: function() {" and make it look like below.
close: function() {
$(document).trigger('close.facebox')
$('#'+willremove).html(willremovehtml)
willremovehtml = ''
willremove = ''
return false
}