Adding Javascript to Smart Part

[kj27]

Hi,

I've been able to add Javascript event handlers to individual form elements on my smart part. But I was wondering how you refer to the form elements from within the Javascript.

i.e. You have an element such as: <SalesLogix:Currency runat="server" ID="txtSales" ...

From the Javascipt function, I can't seem to use: document.getElementById("txtSales").value... 

So any suggestions would be greatly appreciated.

Thanks

[mdykun]

If you look at the markup that is rendered out from the Server the ID txtSales will not directly exist. The ID will be changed to some concatanation of nested ids and the like. You can either identify the name and use it in your dom lookup or you can use JQuery and look for the ID that ends with the text txtSales.

Mark 

[JasonHuber]

In the client side coding Master's Series class we cover this in a few ways.

Mark is correct that the client side name of your txtName control will be something based on the containers it is in and the hierarchy will be apparent. .NET 4.0 changes this a bit, so it is better to write code like this (Mark suggested this on a call a few months back and it was integrated into the class, but there are benefits and drawbacks IMO).

The control will be something like this: ctl00_MainContent_ProductDetails_txtName

here is the JS that you would use and following Mark's advice I am using JQuery here. That is why you see the $()...

<script>

alert($("#ctl00_MainContent_ProductDetails_FixedCost_InputCurrency").text);

</script>

but that will change with .net 4.0 and another solution is to get the client id from asp.net:

<script>

alert($("<%=txtName.ClientID%>").text);

</script>

A good explanation of this is here:

http://www.west-wind.com/weblog/posts/42319.aspx

The problem with the latter example is that many SalesLogix controls are composite controls. So when you get the clientID of the control it may not be the control that is "in front." In the client side Master's Series class we expose this a bit and show that changing the css using the latter example really changes the control "in back" which results in a slight red highlighting on the top of the control only rather than the whole control. It does look neat, but YMMV.

In either case you have a few options!

http://www.sageu.com/saleslogix/masters/

[kj27]

Thanks guys for both the suggestions. I basically did this in the OnWireEventHandlers():

txtRev.Attributes.Add("OnKeyUp","calcMarginPct();");

txtRev.Attributes.Add("onMouseUp","calcMarginPct();");

And then in the Actual function, I did a 

document.getElementById using the composite "ctl00$TabControl$"...

Like you said - not the prettiest way, but it does work correctly.

BTW, if either of you has a list of the attributes available with custom SLX controls (i.e. <SalesLogix: Currency>, it would be of great help. My VS2008 intellisense doesn't recognize SLX controls.

Thanks again!

[mdykun]

The one problem that I see with this approach is that your UI code will be interleaved with javascript code and the only way to introduce this is through obsolete methods or with some direct web control casting. I am more into the approach of having a centralized JS file for the work that has to be done for a given smartpart/page to have a single entry point for inserting the JS code into the processing loop. Think of it this way if an upgrade does occurr and your smart part is altered you need to go through all of your controls that have some special processing and potentially re-wire them all up instead of doing if from an external file that does the work on the client page load.

Mark

[kj27]

I'll implement Jason's approach of using asp.net to get my values as this seems a lot cleaner. In terms of interleaving, I agree that having a centralized JS file is a much cleaner approach.

My problem is that I don't know how to 'hook' the code into the smart part form object without using the old fashioned Attributes.Add. If you have an example available, I'd much rather follow that approach.

Thanks