SOAP webservice call to a method using jquery ajax that sends 2 parameters, how to catch the responses in a loop

Question

I have a SOAP webservice created in c# (hosted on localhost) called soapService.aspx . It has a method called displayClass(String id, String theDate) it returns. This returns following json


[{"lesson_id":2,"customer_id":4,"instructor_id":8,"dance_style_id":2,"hourly_rate":20,"lesson_time":"Afternoon","lesson_date":"03/12/2015","start_time":"11:22","end_time":"14:22 ","notes":"test test","payment_status":0,"status":0,"lesson_slot":null,"duration":3},{"lesson_id":3,"customer_id":4,"instructor_id":8,"dance_style_id":2,"hourly_rate":20,"lesson_time":"Afternoon","lesson_date":"03/12/2015","start_time":null,"end_time":null,"notes":null,"payment_status":0,"status":0,"lesson_slot":null,"duration":3},{"lesson_id":4,"customer_id":4,"instructor_id":8,"dance_style_id":2,"hourly_rate":20,"lesson_time":"Afternoon","lesson_date":"03/12/2015","start_time":null,"end_time":null,"notes":null,"payment_status":0,"status":0,"lesson_slot":null,"duration":3}]

I found this using web service invoke method given on the web service description page.

I want to catch the response using ajax.

So far I wrote this

$(document).ready(function () {

    function displayClass() {
        var instructorInputID = $('#instructorIdText').val();
        var instructorInputDate = $('#instructordateText').val();
        //send this id to web service

        $.ajax({

            url: "http://localhost/soapService.asmx/displayClasses",
            type: POST,
            dataType:"json",
            data:instructorInput,
            contentType:"application/json; charset:utf-8",

            success:function(msg){

                //process the msg

            }


        });

    }

});

1) How do I invoke the web service method by passing parameters 2) How do i display all these json data in a table? Please help

Edit : Tried to post

 data: "{'id': '" + instructorInputID + "','theDate': '" + instructorInputDate + "'}",

THis is the response I get from console

XMLHttpRequest cannot load http://localhost:18324/soapService.asmx/displayClasses. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:17182' is therefore not allowed access.

EDIT Two :
complete code : Still Error.. msg not defined
<pre>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function () {

$("#findClassBtn").click(function () {

displayClass();
});

function onSuccess(msg) {
$.each(msg, function(i, item) {
var tds = "";
$.each(item, function(i, item) {
tds += "<td>" + item + "</td>";
});
$('#table').append("<tr>" + tds + "</tr>");
});
}

function displayClass() {
var instructorInputID = $('#instructorIdText').val();
var instructorInputDate = $('#instructordateText').val();
//send this id to web service
$.ajax({
url: "soapService.asmx/displayClasses",
type: "POST",
dataType:"json",
data: {
'id': instructorInputID,
'theDate': instructorInputDate
},
contentType: "application/json; charset:utf-8",
success: onSuccess(msg)
});
}

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:Label ID="Label1" runat="server" Text="Add Your Id"></asp:Label>
<p>
<asp:TextBox ID="instructorIdText" runat="server"></asp:TextBox>
</p>
<asp:Label ID="Label2" runat="server" Text="Add date (dd/mm/yyyy)"></asp:Label>
<p>
<asp:TextBox ID="instructordateText" runat="server"></asp:TextBox>
</p>
<asp:Button ID="findClassBtn" runat="server" OnClick="findClassBtn_Click" Text="Find Classes" />
<p>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
</p>
</form>
<table id="table">
</table>
<pre>

Error: msg is not defined.

In _data_ you tried to post the string, not the json object – Romario Apr 05 '16 at 12:07 — Romario, Apr 05 '16 at 12:07

Romario · Accepted Answer · 2016-04-05T13:53:45.213

0

$(document).ready(function () {

    function displayClass() {
        var instructorInputID = $('#instructorIdText').val();
        var instructorInputDate = $('#instructordateText').val();
        //send this id to web service

        $.ajax({

            url: "http://localhost/soapService.asmx/displayClasses",
            type: POST,
            dataType:"json",
            data: {
              'id': instructorInputID,
              'theDate': instructorInputDate
            },
            contentType: "application/json; charset:utf-8",

            success: function (msg) {
              $.each(msg, function(i, item) {
                var tds = "";
                $.each(item, function(i, item) {
                  tds += "<td>" + item + "</td>";
                });
                $('#table').append("<tr>" + tds + "</tr>");
              });
            }
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
</table>

edited Apr 05 '16 at 13:53

answered Apr 05 '16 at 12:03

Romario

168
1
7

Added the code. It gives internal 500 error. The location of the webservice ASPX is on localhost and the client code is also on localhost. is this causing the problem?? – Nurul Alam Apr 05 '16 at 14:02
@NurulAlamAnik This error? `XMLHttpRequest cannot load http://localhost:18324/soapService.asmx/displayClasses. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:17182' is therefore not allowed access` – Romario Apr 05 '16 at 14:08
@ It seems you're trying to send request from `'http://localhost:17182'` to `http://localhost:18324/...`. It's cross-origin request. Check out this http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource. – Romario Apr 05 '16 at 14:13
Hi Romario...Now only error seems to be jquery.min.js:2 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in I am returning json.. I think each only works with object.. I am not good with javascript.. I cant be sure.. can you kindly help on that? – Nurul Alam Apr 05 '16 at 17:52
@NurulAlamAnik It's better to accept this answer if it helped you and create new question with details of your problem. – Romario Apr 05 '16 at 18:00

SOAP webservice call to a method using jquery ajax that sends 2 parameters, how to catch the responses in a loop

1 Answers1