Error with AJAX in JavaScript for Cross Domain ASMX Web Service JSONP Call

Question

I have a locally running web service that I believe meets the required criteria for cross-domain JavaScript calls for accessing external data from within dynamics CRM, and I am running into some errors creating the JavaScript AJAX Code to access that external web service.

and I can cause the results shown in Screen Shot 1 below to appear by accessing the web service at http://aloyegeneraltest1/ReturnJSON.asmx/GetPriceJSON

Screen Shot 1

My problem is that I am unable to figure out how to properly write the JavaScript code that will actually get the serialized items shown in the web service above.

When I run the page below, and click the "test" button, I get an error stating:

0x800a1391 - JavaScript runtime error: 'GetJSONP' is undefined.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ClientSideGeneralTest._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/.../xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">

   
        <script language="JavaScript" type="text/JavaScript" src="Scripts/jquery-3.1.1.min.js">

function GetJSONP() {
  debugger;
 $.ajax({
    url: "aloyegeneraltest1/.../GetPriceJSON",
    type: "POST",
    contentType: "application/json; charset=utf-8",
    data: '{"name":' + JSON.stringify(GetData()) + '}'
  }).done(function(result) {
    alert(result.d);
  }).fail(function(result) {
    alert(result.d);
  });
            }

}

      
</script>

<head runat="server">

    
    <title></title>
</head>
<body>
   <form id="form1" runat="server"> 
<div> 
<input id="Button1" type="button" 
  value="Test" onclick="GetJSONP()" /><br /> 

</div> 
</form> 

    &nbsp;
</body>
</html>

If I remove the JQuery reference entirely, that eliminates the undefined function error above, but doing so causes a new unhandled exception error as shown:

0x800a1391 - JavaScript runtime error: '$' is undefined

The modified code that produces the new error looks like this:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ClientSideGeneralTest._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/.../xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">

   
        <script language="JavaScript" type="text/JavaScript">

function GetJSONP() {
  debugger;
 $.ajax({
    url: "aloyegeneraltest1/.../GetPriceJSON",
    type: "POST",
    contentType: "application/json; charset=utf-8",
    data: '{"name":' + JSON.stringify(GetData()) + '}'
  }).done(function(result) {
    alert(result.d);
  }).fail(function(result) {
    alert(result.d);
  });
 
}

      
</script>

<head runat="server">

    
    <title></title>
</head>
<body>
   <form id="form1" runat="server"> 
<div> 
<input id="Button1" type="button" 
  value="Test" onclick="GetJSONP()" /><br /> 

</div> 
</form> 

    &nbsp;
</body>
</html>

It appears to be having some kind of issue with the $ at the start of the Ajax code.

I am completely new to AJAX and am fairly new to development in general so any help or advice that anyone may be able provide would be greatly appreciated.

Prashant Hadole · Accepted Answer · 2017-03-01 12:48:47Z

May be these lines of code solve your problem

          var jsonData = [YOUR JSON PARAMETER];

            $.ajax({
                async: false,
                type: "POST",
                url: [YOUR WEB SERVICE URL],
                contentType: "application/json; charset=utf-8",                  
                data: JSON.stringify({ json: jsonData }),
                dataType: "json",                
                success: OnSuccess,
                failure: function(err) {
                    alert("Error : " + err.d);
                }  
            }); 

            function OnSuccess(data) {
                alert("Success:" + data.d);                       
            }

You can do one thing for that just need to set Access-Control-Allow-Origin & Access-Control-Allow-Headers in CustomeHeaders your web service web.config file.

 <add name="Access-Control-Allow-Origin" value="*" />
 <add name="Access-Control-Allow-Headers" value="Content-Type" />

If you want to allow only for specific domain , you can do that with specific value of domain instead of * value

ACE · Accepted Answer · 2016-11-10 22:43:43Z

0

I solved my own problem. See the two different script lines below.

<html xmlns="http://www.w3.org/1999/xhtml">
<script language="JavaScript" src="Scripts/jquery-1.7.1.min.js"></script>  
<script language="JavaScript" type="text/JavaScript">**
    function GetJSONP() {
        //debugger;
        $.ajax({
            url: "aloyegeneraltest1/.../GetPriceJSON",
            type: "POST",
            contentType: "application/json; charset=utf-8",

answered Nov 10, 2016 at 22:43

ACE

437 bronze badges

Collectives™ on Stack Overflow

Error with AJAX in JavaScript for Cross Domain ASMX Web Service JSONP Call

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related