title: SOAP webservice call to a method using jquery ajax that sends 2 parameters, how to catch the responses in a loop
body: <p>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 </p>
  
  <pre>
  
  [{"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}]
  
  </pre>
  
  <p>I found this using web service invoke method given on the web service description page.</p>
  
  <p>I want to catch the response using ajax. </p>
  
  <p>So far I wrote this </p>
  
  <pre>
  $(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
  
              }
  
  
          });
  
      }
  
  });
  </pre>
  
  <p>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</p>
  
  <p>Edit : Tried to post </p>
  
  <pre>
   data: "{'id': '" + instructorInputID + "','theDate': '" + instructorInputDate + "'}",
  </pre>            
  
  <p>THis is the response I get from console</p>
  
  <pre>
  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. </pre>
  
  <pre><code>EDIT Two :
  complete code : Still Error.. msg not defined
  &lt;pre&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function () {
  
  $("#findClassBtn").click(function () {
  
  displayClass();
  });
  
  function onSuccess(msg) {
  $.each(msg, function(i, item) {
  var tds = "";
  $.each(item, function(i, item) {
  tds += "&lt;td&gt;" + item + "&lt;/td&gt;";
  });
  $('#table').append("&lt;tr&gt;" + tds + "&lt;/tr&gt;");
  });
  }
  
  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)
  });
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form id="form1" runat="server"&gt;
  &lt;div&gt;
  &lt;/div&gt;
  &lt;asp:Label ID="Label1" runat="server" Text="Add Your Id"&gt;&lt;/asp:Label&gt;
  &lt;p&gt;
  &lt;asp:TextBox ID="instructorIdText" runat="server"&gt;&lt;/asp:TextBox&gt;
  &lt;/p&gt;
  &lt;asp:Label ID="Label2" runat="server" Text="Add date (dd/mm/yyyy)"&gt;&lt;/asp:Label&gt;
  &lt;p&gt;
  &lt;asp:TextBox ID="instructordateText" runat="server"&gt;&lt;/asp:TextBox&gt;
  &lt;/p&gt;
  &lt;asp:Button ID="findClassBtn" runat="server" OnClick="findClassBtn_Click" Text="Find Classes" /&gt;
  &lt;p&gt;
  &lt;asp:Label ID="Label3" runat="server" Text="Label"&gt;&lt;/asp:Label&gt;
  &lt;/p&gt;
  &lt;/form&gt;
  &lt;table id="table"&gt;
  &lt;/table&gt;
  &lt;pre&gt;
  
  Error: msg is not defined. 
  </code></pre>