How to call web service on Text box Lost Focus Event from javascript? – SharePoint Custom Application

Requirement : 

On blur event of text box, need to do a calculation which is written in an asmx web service.

Solution : 

On Page Load add the onblur event for the required text box like below: 

txt_Quantity.Attributes.Add(“onblur”, “javascript:LostFocusTotalCalc(‘” + txt_Quantity.ClientID + “‘,'” + txt_TotalQty.ClientID + “‘)”);

Here,

txt_Quantity is the input value we are going to pass to our web service

txt_TotalQty is the output text box we are going to set the calculated value

To call the web service from Java Script use the below code : 

<script type=”text/javascript”>

function LostFocusTotalCalc(txtControlInput, txtControlOutput) {
var ctrMsg = document.getElementById(txtControlInput);
var strMsg = ctrMsg.value;

var a = null;
if (window.ActiveXObject) {
a = new ActiveXObject(“Microsoft.XMLHTTP”);
}
else if (window.XMLHttpRequest) {
a = new XMLHttpRequest();
}
else {
throw new Error(“XMLHttpRequest not supported”);
}

if (a == null) return null;

a.Open(“POST”, “/_layouts/Factory_Custom_Apps/CalculateService.asmx”, false);
a.setRequestHeader(“Content-Type”, “text/xml; charset=utf-8”);
a.setRequestHeader(“SOAPAction”, “http://tempuri.org/CalcualteTotalFromMultiline&#8221;);
var d = “<?xml version=\”1.0\” encoding=\”utf-8\”?><soap:Envelope xmlns:xsi=\”http://www.w3.org/2001/XMLSchema-instance\” xmlns:xsd=\”http://www.w3.org/2001/XMLSchema\” xmlns:soap=\”http://schemas.xmlsoap.org/soap/envelope/\”><soap:Body><CalcualteTotalFromMultiline xmlns=\”http://tempuri.org/\”><input>” + strMsg + “</input></CalcualteTotalFromMultiline></soap:Body></soap:Envelope>”;

a.Send(d);
var xmlDoc = a.responseXML;

document.getElementById(txtControlOutput).value = xmlDoc.text.toString();

}

</script>

In the above example, the xml output is in single node. Because of this reason I am taking the value directly from the xml output (xmlDoc.tex).

If you have parent & child nodes in your xml output, use the below code:

var elmValue = xmlDoc.getElementsByTagName(“Value”);
for (i = 0; i < elmValue.length; i++) {
if (elmValue[i].parentNode.parentNode.parentNode.childNodes[2].text == ‘NodeTagName’) {
strName = elmValue[i].childNodes[0].nodeValue;
}

Advertisements

About Joseph Velliah
As a SharePoint Developer my professional interests tend to be technical and SharePoint focused. I run a blog at "SP RIDER" where you can expect to read HOW TOs and scenarios that I run into during my day to day job. I hope my posts will give back a little to the community that is helped me.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: