Another great aspect of XMod Pro is that you can include client side script in your forms and templates. This gives you access to Javascript which is very useful but can be difficult and very time consuming to work with. However, working with Javascript became a whole lot easier with the arrival of the jQuery library.

The beauty of using jQuery is that you don’t have to worry about cross-browser issues with your Javascript. The library takes care of everything and provides an incredibly powerful tool to enhance your pages.

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” - jQuery

As a measure of how useful and important jQuery is, Microsoft has enhanced ASP .NET to better integrate with jQuery.

So what can it do for me you might ask? Why would I need it with XMod Pro when XMod Pro already does so much for me?

Well, imagine you want to make some dynamic changes to your new interface in response to certain user events. For example, what if you wanted to total all the values on a form as the user entered them and have this value saved in the DB on form submit? This kind of thing is relatively simple with jQuery.

In the following example, I've created a simple form that shows a series of fields. There is no database to worry about at this stage. You can simply modify the example to fit your needs.

<AddForm>

<SubmitCommand CommandText="" />

<ScriptBlock ScriptId="AlertScripts" RegisterOnce="true">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
</ScriptBlock>

<p>
<table id="fish" cellpadding="10" cellspacing="10">
	<th>Fish Name</th>
	<th>Quantity</th>

	<tr>
		<td>Cod</td>
		<td><TextBox Class="xFields" Id="txtFieldOne" DataField="Field1" DataType="int32" /></td>
	</tr>
	<tr>
		<td>Salmon</td>
		<td><TextBox Class="xFields" Id="txtFieldTwo" DataField="Field2" DataType="int32" /></td>
	</tr>
	<tr>
		<td>Sea Bass</td>
		<td><TextBox Class="xFields" Id="txtFieldThree" DataField="Field3" DataType="int32" /></td>
	</tr>
	<tr>
		<td>Trout</td>
		<td><TextBox Class="xFields" Id="txtFieldFour" DataField="Field4" DataType="int32" /></td>
	</tr>
</table>
</p>

<p> 
	<Label For="txtFieldFive" Class="NormalBold" Text="Total in a text box :" />
	<TextBox Class="xTotal" Id="txtFieldFive" Value="0" DataField="Field5" DataType="int32" ReadOnly="true" />
</p>

<p><div class="NormalBold" id="msg">message</div></p>

<p><div class="NormalBold" id="inclVAT">with vat</div></p>

<script type="text/javascript">
    $(document).ready(function(){
   
    // on load fill in totals
    LoadTotals();
    LoadRunningTotals();
});

    // when user fires key up load the running totals
     $('.xFields').keyup(function () {
     LoadRunningTotals();
     });
    
   function LoadTotals() {
     var tmp = 0;
     var total = 0;   
     $(".xFields").each( function(){
     tmp=parseInt($(this).val(),10);
     if (isNaN(tmp)){tmp=0;};
     total= total + tmp;
     $('#msg').html("The total in a DIV:" + total); // set the DIV contents
     $(".xTotal").val(total);  // set a text box value#
     var vat=17.5/100 * total;
     total=total + vat; // add VAT
     total.toFixed(2); // two decimal places
     $('#inclVAT').html("The total with added VAT is:" + total.toFixed(2)); 
     });
    }

   function LoadRunningTotals() {
   // call function on keyup
     var tmp = 0;
     var total = 0;   
     $(".xFields").each( function(){
     tmp=parseInt($(this).val(),10);
     if (isNaN(tmp)){tmp=0;};
     total= total + tmp;     
     });
     $('#msg').html("The total in a DIV:" + total); // set the DIV contents
     $(".xTotal").val(total);  // set a text box value
     var vat=17.5/100 * total;
     total=total + vat; // add VAT
     $('#inclVAT').html("The total with VAT is:" + total.toFixed(2)); 
	}

</script>

</AddForm>

The XMod Pro <ScriptBlock> tag is used to include the Google based jQuery library but this may not be necessary for DNN5 sites where jQuery is included in DotNetNuke.

Each field that you need to total is given a class. In this case it is called “xFields”. This gives you the ability to find all the items on the page with that class and do something with them. Using the selector $(“.xFields”).each(function()) we can get the value in each text box and total it up.

The example captures the keyup event and checks each value the user enters in case it is null or not a number and totals them up. At the bottom it displays the running total in a text box which can be bound to a DataField, a <div>, and also with a calculation applied for Value Added Tax (VAT).

I hope this example will show you what can be achieved with a few lines of code and give you some ideas to enhance your XMod projects. A demo can be found here:

jQuery for running totals in XMod Pro Forms Demo