Question

I have a simple ajax request that I am trying to call a web service I created. The web service code is never being executed. I got this code sample from the net and I think maybe I am calling the url wrong in the jquery i dunno?

here is the jquery

<script type="text/javascript">
    $(document).ready(function() { 

    alert("Hi");
        $("#btnTitleQuery").bind("click", function() {
            $("#query_results").empty();
            $("#query_results").append('<table id="ResultsTable" class="BooksTable"><tr><th>BookNum</th><th>Title</th><th>Author</th></tr>');
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "BookServices.asmx/GetBooksByTitle",
                data: '{ strTitle: "' + $("#txtTitle").val() + '" }',
                dataType: "json",
                success: function(msg) {
                    var c = eval(msg.d);
                    for (var i in c) {
                        $("#ResultsTable tr:last").after("<tr><td>" + c[i][0] + "</td><td>" + c[i][1] + "</td><td>" + c[i][2] + "</td></tr>");
                    }
                }
            });
        })
        $("#btnAuthorQuery").bind("click", function() {
            $("#query_results").empty();
            $("#query_results").append('<table id="ResultsTable" class="BooksTable"><tr><th>BookNum</th><th>Title</th><th>Author</th></tr>');
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "BookServices.asmx/GetBooksByAuthor",
                data: '{ strAuthor: "' + $("#txtAuthor").val() + '" }',
                dataType: "json",
                success: function(msg) {
                    var c = eval(msg.d);
                    for (var i in c) {
                        $("#ResultsTable tr:last").after("<tr><td>" + c[i][0] + "</td><td>" + c[i][1] + "</td><td>" + c[i][2] + "</td></tr>");
                    }
                }
            });
        })
    }); 
</script>

The web service is in my root directory.

using System;

 using System.Web;

 using System.Collections;

 using System.Web.Services;

using System.Web.Services.Protocols;

 using System.Data;

  using System.Data.Odbc;

   using System.Web.Script.Serialization;

 using System.Web.Script.Services;

namespace TryWillJSON
{

 [WebService(Description = "Web services to query the book database.", Namespace = "http://www.williamsportwebdeveloper.com/")]

  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

   [ScriptService]

 public class BookServices : System.Web.Services.WebService {



       public BookServices () {



        //Uncomment the following line if using designed components 

         //InitializeComponent(); 

     }



     [WebMethod(Description = "Gets the books matching part of a title.")]

    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

     public string GetBooksByTitle(string strTitle) {

        OdbcConnection objConnection = new OdbcConnection(System.Configuration.ConfigurationManager.ConnectionStrings["Books"].ConnectionString);

         OdbcCommand objCommand = new OdbcCommand("SELECT * FROM reading WHERE Title LIKE '%" + strTitle + "%' ORDER BY BookNum;", objConnection);

         DataSet objDataSet = new DataSet();

         OdbcDataAdapter objDataAdapter = new OdbcDataAdapter(objCommand);

         objDataAdapter.Fill(objDataSet, "reading");

           objConnection.Close();



         // Create a multidimensional jagged array

        string[][] JaggedArray = new string[objDataSet.Tables[0].Rows.Count][];

        int i = 0;

         foreach (DataRow rs in objDataSet.Tables[0].Rows)

        {

            JaggedArray[i] = new string[] { rs["BookNum"].ToString(), rs["Title"].ToString(), rs["Author"].ToString() };

             i = i + 1;

          }



        // Return JSON data

         JavaScriptSerializer js = new JavaScriptSerializer();

      string strJSON = js.Serialize(JaggedArray);

       return strJSON;

      }



     [WebMethod(Description = "Gets the books matching part of an author's name.")]

   [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

    public string GetBooksByAuthor(string strAuthor)

       {

         OdbcConnection objConnection = new OdbcConnection(System.Configuration.ConfigurationManager.ConnectionStrings["Books"].ConnectionString);

         OdbcCommand objCommand = new OdbcCommand("SELECT * FROM reading WHERE Author LIKE '%" + strAuthor + "%' ORDER BY BookNum;", objConnection);

         DataSet objDataSet = new DataSet();

        OdbcDataAdapter objDataAdapter = new OdbcDataAdapter(objCommand);

        objDataAdapter.Fill(objDataSet, "reading");

        objConnection.Close();



          // Create a multidimensional jagged array

         string[][] JaggedArray = new string[objDataSet.Tables[0].Rows.Count][];

        int i = 0;

        foreach (DataRow rs in objDataSet.Tables[0].Rows)

      {
             JaggedArray[i] = new string[] { rs["BookNum"].ToString(), rs["Title"].ToString(), rs["Author"].ToString() };

             i = i + 1;

        }



          // Return JSON data

        JavaScriptSerializer js = new JavaScriptSerializer();

         string strJSON = js.Serialize(JaggedArray);

         return strJSON;

     }



   }
}

I can see the alert hits, but in firebug when I check whats in the “msg” parameter of the jquery function firebug tells me this “ReferenceError: msg is not defined”

Here is where I am getting the code:
williamsportwebdeveloper.com/cgi/wp/?p=494

If anyone has time can you see if you can set it up correctly in visual studio

Here is a fiddle I setup as well for what its worth
http://jsfiddle.net/npl77/U33XS/

Answer 1

Your parameters do not have the proper single tick marks around the property names
Rewrite them to look like this:

data: "{ 'strAuthor': '" + $("#txtAuthor").val() + "' }",

data: "{ 'strTitle': '" + $("#txtTitle").val() + "' }",

because of this, your parameters are not matching up when being checked on the server-side. Therefore, your code is never executed. That is the first mistake I found … there could be more,

check that then we’ll see.

Also, you can use JSON natively in javascript which will make this tedious and error proned string building process hands off. You just need to get a copy of the small JSON library here and add it to your project (it’s only a javascript file btw).

http://sourceforge.net/projects/json-lib/files/

Here is an example

 //using native JSON
    var per = { FirstName: $('#fName').val(),
                LastName : $('#lName').val(),
                Address : $('#address').val(),
                City : $('#city').val(),
                State : $('#state').val(),
                ZipCode : $('#zip').val()
              };

   $.ajax(
   {
       type: "POST",
       url: "Default.aspx/GetPersonObj",
       data: JSON.stringify(per),  //<---- right here the magic happens
       contentType: "application/json; charset=uft-8",
       dataType: "json",
       success: function (rsp) { SetPerson(rsp); },
       error: function (rsp)
       {
           alert(rsp.responseText); //<--- this is always good to add, that way you can get some feedback from the ajax call about what the hell went wrong.
       }
   });