This topic won't teach you how to use Javascript. Instead it provides techniques for incorporating your scripts, whether they are plain Javascript or jQuery, into your XMod Pro solutions.

Injecting Javascript Into the Page

For plain Javascript, you can simply type it into your Form or Template and it will be rendered out to the page at run-time. If you need to register a Javascript libraries in other files or inject a function or several functions, use a Script Block tag. Use the <xmod:ScriptBlock> tag in Templates and the <ScriptBlock> tag in Forms.

Running Javascript After Page Load With jQuery

If your site is using jQuery (and just about every recent DNN version automatically includes it), you can easily add your Javascript to the page and have it execute after the browser has loaded the DOM (Document Object Model). This is often required by jQuery libraries or any Javascript that manipulates elements on your page. XMod Pro makes this simple with the <jQueryReady> tag for Forms and the <xmod:jQueryReady> tag for Templates.

For those who know jQuery, these tags put a jQuery document ready block in the page. However, the tag does more than that. It wraps the block in a closure and inserts the block near the end of the page. This allows you to safely use the "$" operator in your Javascript to refer to jQuery. It ensures that other variables on the page do not interfere with your code so you don't have any conflicts with other libraries and plugins that may be registered on the page. Finally, by inserting your code near the bottom of the page, it helps the user see your page faster, aiding in performance.

So how would this all look? Let's say you had a hyperlink on your page with a class name of "my-button". When it is clicked, you want an alert to popup. It's a contrived example but keeps the code simple.

It might look something like this:

...
<a href="#" class="my-button">Click Me!</a>
...
<xmod:jQueryReady>
  $('.my-button').click( function() {
    alert("I've been clicked!");
  });
</xmod:jQueryReady>

Using Javascript Inside XMod Pro Tag Attributes

Often, you'll need to react to an event initiated by an XMod Pro control. The most obvious example is the Click event of buttons, links, and clickable images. For this, you should put your Javascript in the OnClientClick attribute of the control.

Here's an example. Note that this is not a complete example of the tag since we're only focusing on the use of Javascript

<xmod:DeleteButton ...OnClientClick="return confirm('Delete This Record?');" ...

When the button is clicked, the built-in Javascript function "confirm" is called. The confirmation function pops up a dialog which displays a message ("Delete This Record"), and prompts the user to click "OK" or "Cancel". If the user clicks "OK", the function returns "true". If the "Cancel" button is pressed, a value of "false" is returned.

It is important to return a value of true or false in cases like this. If false is returned, the button will stop its processing. In other words, it won't post back to the server and won't delete the record. If true is returned, then processing continues normally.

Doing More with the [[Join()]] Token

Let's say you want to pass one of your field values to a Javascript function. How would you do it? For this, you'll need to use XMod Pro's Join function. The Join function allows you to merge text with field values and other token values. It can be used in plain text, but it's primary purpose is for use within tag attributes. See the Function Tokens help topic for the Join function's syntax:

<xmod:DeleteButton ... OnClientClick='[[Join("myFunction(""{0}"");", [[CompanyName]])]]' ...

There are a number of things happening in the above snippet:

1. Since we're using a Token, we have to delimit the OnClientClick attribute with single quotes (') instead of double-quotes (").
2. Javascript is just text until it is interpreted by the browser, so we pass the Javascript call in as the Input to the Join function (the first parameter). Within the Javascript text, we use numbered placeholders (starting with zero) which correspond with the additional parameters we pass to the function. In this case, we just have one parameter, but we could have two or three or more. At run-time, the {0} will be replaced by the value of the CompanyName column.
3. For the sake of this example, let's say the myFunction function expects a text value, so we have to delimit it with quotes. However, since we're delimiting the OnClientClick attribute with single quotes, we have to use double quotes. The problem, though, is that we're also using the double quotes to delimit the Join function. What to do? We have to escape the double quotes by typing two consecutive double quote characters for each individual double quote character we need.

Getting Form Control Client ID's

If you're using Javascript in your forms, you'll more than likely need to access the controls on the form from within your script. You'll quickly discover, though, that the ID value you use for your control in XMod Pro, doesn't match the ID that is rendered in the final HTML source code. ASP.NET works to ensure that ID's in the final page are unique within the page. So, it takes your ID and generates a long, but unique ID to use in the browser.

While it's nice that ASP.NET helps keep your code HTML compliant, all that re-naming ends up making it very difficult to write client-side script that uses those ID's. Well, XMod Pro has your back. The <AddForm> and <EditForm> tags each have an attribute called ClientName. Create a unique value and place it in this attribute. Then you can access your form controls with simple dot-notation:

<AddForm ClientName="MyUniqueId">
	...
	<TextBox ID="txtFirstName" .../>
	...
	<a href="#" onclick="alert(document.getElementById(MyUniqueId.txtFirstName);return false;">Click Me</a>
	...
</AddForm>