Updating a Secondary Data Source in InfoPath Using AJAX
page 4 of 6
by S.Y.M. Wong-A-Ton
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 37971/ 60

Creating the InfoPath Form

Open Microsoft Office InfoPath and create a New Blank Form.  Use the controls, field names, and data types listed in Table 1 to construct the form and modify it to resemble Figure 1.

Table 1 - Settings for the controls on the InfoPath form

Control

Field Name

Data Type

Drop-Down List Box

listItems

Text (string)

Text Box

newItem

Text (string)

Button

btnDeleteItem

-

Button

btnAddItem

-

 

Figure 1 - InfoPath form in design mode

Create the Database Table

Use the information displayed in Table 2 to create a table called Properties in Microsoft SQL Server.

Table 2 - Table column settings for Properties table in Microsoft SQL Server 

 

Column Name

Data Type

Allow Nulls

Value

int (identity, primary key)

No

Name

varchar(50)

No

 

Add a Data Connection for the Secondary Data Source

Create and bind the drop-down list box to the secondary data source.

1.      Double-click on the drop-down list box to open its Properties dialog box.

2.      Select the Look up values in a data connection to a database, Web service, file, or SharePoint library or list radio button under List box entries.

3.      Click on the Add… button to open the Data Connection Wizard.

4.      Select the Database (Microsoft SQL Server or Microsoft Office Access only) radio button and click on Next >.

5.      Click on the Select Database… button.

6.      Click on the New Source… button and follow the instructions to set up a connection to the database table you previously created in Microsoft SQL Server and select this new source to be used as a secondary data source in the InfoPath form.

7.      Click on the Next > button when you get back in the first Data Connection Wizard.

8.      Click on the Finish button to close the Data Connection Wizard.

9.      Back in the Properties dialog box, click on the Select XPath button behind the Entries field.

10.  Select the Properties node in the Select a Field or Group dialog box and click on OK.

11.  Back in the Properties dialog box, click on the Select XPath button behind the Value field.

12.  Select the Value node in the Select a Field or Group dialog box and click on OK.

13.  Back in the Properties dialog box, click on the Select XPath button behind the Display name field.

14.  Select the Name node in the Select a Field or Group dialog box and click on OK.

15.  Click on OK to close the Properties dialog box.

Add Event Handlers and AJAX Code

Make sure the default programming language of the form is set to JScript by selecting the Tools > Options… menu item, clicking on the Design tab on the Options dialog box, and setting the Default programming language to JScript.

Open the Microsoft Script Editor by selecting the Tools > Programming > Microsoft Script Editor menu item.  Append the code displayed in Listing 1 to the code that InfoPath has added for you by default.

Listing 1 - AJAX functions

var req = null; 
var READY_STATE_COMPLETE = 4;
function sendRequest(url, params, HttpMethod)
{
  if (!HttpMethod)
  {
    HttpMethod = "GET";
  }
  req = new ActiveXObject("Microsoft.XMLHTTP");
  if (req)
  {
    req.onreadystatechange = onReadyState;
    req.open(HttpMethod, url, true);
    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    req.send(params);
  }
}
 
function onReadyState()
{
  var ready = req.readyState;
  var data = null;
      
  if (ready == READY_STATE_COMPLETE)
  {
    data = req.responseText;
    XDocument.DataObjects["Properties"].Query();
    XDocument.DOM.selectSingleNode("//my:listItems").text = 
            XDocument.DOM.selectSingleNode("//my:newItem").text;    
    XDocument.DOM.selectSingleNode("//my:newItem").text = "";
  }   
}

Listing 1 displays two core functions needed to make AJAX calls to the web server.  The first function, sendRequest(), creates an XMLHTTPRequest object to be able to prepare and send a request to the web server, while the second function, onReadyState(), is an asynchronous event handler that continuously polls for responses coming back from the web server.  When a response comes back from the web server, you can retrieve the XML data sent back from the web server using

data = req.responseText;

and refresh the list of items in the drop-down list box by using the Query() method of the secondary data source as in

XDocument.DataObjects["Properties"].Query();.

Finally, you can set the selected value of the listItems drop-down list box to the value of the newItem text box

XDocument.DOM.selectSingleNode("//my:listItems").text = 
    XDocument.DOM.selectSingleNode("//my:newItem").text; 

and then clear the newItem text box with

XDocument.DOM.selectSingleNode("//my:newItem").text = "";.

Switch back to Microsoft Office InfoPath and double-click on the Add Item button to open its Properties dialog box.  Click on the Edit Form Code… button to switch back to the Microsoft Script Editor and add an OnClick event handler for this button.  Add the code displayed in Listing 2 in the OnClick event handler you just added.

Listing 2 - Code in the OnClick event handler for the Add Item button

var value = XDocument.DOM.selectSingleNode("//my:newItem").text;
sendRequest("http://localhost/UpdateDSwithAjax/Default.aspx","q="+value+"&a=a","POST");

The code in Listing 2 passes two parameters (q and a) to an ASP.NET page called Default.aspx that is located on a web server at http://localhost/UpdateDSwithAjax/.  "q" is set to the value of the text in the newItem text box, while "a" is set to an "a" to indicate that the item should be added.

Switch back to Microsoft Office InfoPath and double-click on the Delete Item button to open its Properties dialog box.  Click on the Edit Form Code… button to switch back to the Microsoft Script Editor and add an OnClick event handler for this button.  Add the code displayed in Listing 3 in the OnClick event handler you just added.

Listing 3 - Code in the OnClick event handler for the Delete Item button

var value = XDocument.DOM.selectSingleNode("//my:listItems").text;
 sendRequest("http://localhost/UpdateDSwithAjax/Default.aspx","q="+value+"&a=d","POST");

The code in Listing 3 passes two parameters (q and a) to the ASP.NET page.  "q" is set to the value of the selected item in the listItems drop-down list box, while "a" is set to a "d" to indicate that the item should be deleted.


View Entire Article

User Comments

No comments posted yet.






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-28 7:04:44 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search