articles >> asp.net ajax >> Update Multiple Page Elements Using The XMLHTTPRequest ...

Update Multiple Page Elements Using The XMLHTTPRequest Object and JavaScript

By : Ashish Sarda Sep 01, 2007

Printer friendly

Page 2 / 2

4. Up to this point we have finished with development of the Ajax logic which will return a response. So now we need to develop logic for updating the HTML controls.

 

In this.handleResponse (step 3) we have seen that we get response in the “data” variable in JavaScript.
 
So now we have response from the server we will add following logic:

switch(self.JSONArray.dependentType)
       {
        case 0:
         PopulateControls(self.JSONArray.isEdit[0].textBoxId,data);
         //simple call to JS function
        break;
        case 1:
        PopulateControls(self.JSONArray.isEdit[0].dropDownId,data);
        break;
}

self.JSONArray.isEdit[0].textBoxId will contain the id of the text box in which we need to update. And data is the response from the server. In our switch we have simply used the elements of JSON object developed in Step 2.

We will now focus on initiating a request and setting the elements of the JSON objects.

First simply create object of our AjaxClass().

var obj = new AjaxClass(); //Object creation
obj.JSONArray.Method = "GET"; //Setting Method
obj.JSONArray.isEdit[0].textBoxId="txt1";//Textboxid for response
obj.JSONArray.dependentType=0;//0->Textbox,1->drop downlist,
                              //2->tagId,3->Misc and so on
obj.init();//Initiate the AjaxCall

If obj.JSONArray.dependentType=1 then our switch case will not work for the textbox, but it will work for a dropdown list (check above switch case). This means we will have to set the dropdown in the JSON object:

obj.JSONArray.isEdit[0].dropDownId="ddl1";

In this way we can define our own set of HTML controls to be updated.

In the same way we can also change all the default settings in JSON object of that class.

 e.g.

obj.JSONArray.Method = "GET";
obj.JSONArray.CallPage = "Mywebservice/webMethod";
obj.JSONArray.Querystring= "My querystring";

For this URL will be : this.url = this.url + this.JSONArray.CallPage + this.JSONArray.Querystring ;

In case of a web service we will have to set the CallPage element as we did in the above example.

For multiple textboxes use: obj.JSONArray.isEdit[0].textBoxId="txt1$txt2$txtn";//$ is a delimiter

While sending data from the server send it with the same delimiter,in such a way when we split obj.JSONArray.isEdit[0].textBoxId and response data on $; we will receive data and the appropriate textBoxId.

Now that we have different types like “txtbox(es) + drop down list(s) + div" in such case we can use "misc" option of isEdit element of JSON object.

And we can define our  PopulateControls function the way we want. For ASP.NET we could also integrate ICallback logic for large data transfers.

 

You can download the demo code here . This contains an ASP.NET project with the following files:

• XMLHTTPJsClass.js this file contains our AjaxClass() and funtion to populate textbox(es).
• Demo.js this file contains 3 js function which initiates AjaxRequest with customization of  request. Here you can find web page and webservice calls.
• Default.aspx page
• Webservice.asmx page.