Iron Speed Technical Forums
Register Latest Topics
 
 
 


Reply
  Author   Comment  
DeanJPepper

Avatar / Picture

Iron Speed MVP
Consulting Organization

Registered:
Posts: 29
Reply with quote  #1 

JavaScript Confirmation Dialogue

Display a JavaScript confirmation dialogue when saving records.

Dean Pepper, Iron Speed MVP

Dot Net Architect

 

January 4th 2012

Iron Speed Designer v9.0.1

Introduction

This article will demonstrate how to easily call client-side JavaScript from buttons in Iron Speed Designer. The JavaScript can perform validation of the data entered to save the overhead of post-backs to the server or can display a confirmation dialogue to the user to provide warning messages if certain data is entered.

Implementation

This article has been built on the default Iron Speed Southwind database.

Step 1: Open the ‘add record’ page you would like the JavaScript code to run on and navigate to the Page Buttons section. In my example, I will add the validation to the AddOrders.aspx page.

Figure 1 – The ‘add record’ page to add the JavaScript code to.


Step 2: Select the ‘save’ button, then in the Properties panel, click Custom Properties and click the ellipsis to open the Properties dialogue box.

Add the property ‘Button-HtmlAttributes-onClick’ with the value ‘javascript:return ConfirmShipCountry();’. When the save button is clicked, the ‘onClick’ event will fire and run the ConfirmShipCountry JavaScript function. If the JavaScript function returns true, the button will cause a post-back and the server-side ‘Click’ code will execute. Otherwise, if the function returns false, no action will be taken.

Figure 2 – The custom properties for the ‘save’ button.

 


Step 3: Right-click any empty cell and click on Page Directives, then paste the JavaScript validation code as shown in Figures 3 and 4.

<script>

function ConfirmShipCountry()

{

       var answer = true;

       var shipCountry =

              document.getElementById("ctl00_PageContent_ShipCountry").value;

      

       if(shipCountry == "")

       {

              alert('Please enter a country');

              return false;

       }

      

       if(shipCountry != "UK")

       {

              answer = confirm('Please confirm you want to ship outside the UK.');

       }

      

       return answer;

}

script>

Figure 3 – The JavaScript validation code.

Figure 4 – The Page Directives with the JavaScript function.

The name of the text box control in my example is ‘ShipCountry, so the control Id on the page is ‘ct100_PageContent_ShipCountry’ as the name of the content placeholder is prefixed to the name of the controls you see in Iron Speed Designer.

The easiest way to find the name of the control to target is to use the Firebug add-on for Firefox. https://addons.mozilla.org/en-US/firefox/addon/firebug/

Results

If someone attempts to save an order without entering the Ship Country, the warning message shown in Figure 5 will be displayed and the save will be cancelled.

Figure 5 – Error message when the Ship Country is not specified.


If a Ship Country other than the UK is entered, the confirmation message shown in Figure 6 will be displayed and the order will only be saved if ‘OK’ is clicked.

Figure 6 – Confirmation message when the Ship Country is not UK.

Conclusion

This article shows how JavaScript code can be added to the ‘onClick’ event of buttons in Iron Speed Designer to display confirmation dialogues if certain data has been entered.

The JavaScript shown in this article can be expanded to perform client-side validation to save the overhead of a post-back when invalid data has been entered.

Read More

You can read more Iron Speed Designer articles on the Dot Net Architect website.


__________________
Dean Pepper
UK Iron Speed MVP
Dot Net Architect
+44 (0)1621 835002
http://www.dotnetarchitect.co.uk
dean.pepper@dotnetarchitect.co.uk
Previous Topic | Next Topic
Print
Reply

Quick Navigation:

Download Iron Speed Designer

Terms of Service Privacy Statement