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

  • Question

  • User-1060182652 posted

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

    The web service runs at http://aloyegeneraltest1/ReturnJSON.asmx

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

    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 regarding how I might resolve this syntax/structure issue would be greatly appreciated.

    Thursday, November 10, 2016 9:14 PM

Answers

  • User-1060182652 posted

    I solved my own problem. I highlighted the fix in bold 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",

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 10, 2016 10:45 PM