[jQuery] Invoke Web service from jQuery

Invoke ASP.Net web service from jQuery. To invoke a web method with parameters, change the data :{} to

   1: data : "{'Para1':'Value1',''Para2':'Value2'}"

   1: <script type="text/javascript" language="javascript">

   2:     function invokeWS() 

   3:     {

   4:         //Set up Button to invoke web service

   5:         $.ajax({

   6:             type: "POST",

   7:             url: "/JQueryTestService.asmx/GetResponseFromWebService",

   8:             data: {},

   9:             contentType: "application/xml; charset=utf-8",

  10:             dataType: "xml",

  11:             success: function (msg) {

  12:                 alert(msg.text);

  13:             },

  14:             error: function (msg) {

  15:                 alert('error:' + msg.responseBody);

  16:             }

  17:         });

  18:     }

  19: </script>

And for the web service

   1: [WebService(Namespace = "http://sampleCodes.michael.com/")]

   2: [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

   3: [System.ComponentModel.ToolboxItem(false)]

   4: [System.Web.Script.Services.ScriptService]

   5: public class JQueryTestService : System.Web.Services.WebService

   6: {

   7:     [WebMethod]

   8:     public string GetResponseFromWebService()

   9:     {

  10:         return "this is a test!";

  11:     }

  12: }

[jQuery] Quick Note

This is only a note for my first jQuery html page. The following codes allow user to move focus between textbox on the page via arrow keys(Up/Down)

   1: <script type="text/javascript">

   2:     $(function () {

   3:         var total = 0;

   4:         $("input").each(function (i) {

   5:             if ($(this).attr("type") == "text") {

   6:                 $(this).addClass("tabIndexedInput").attr("idx", total++);

   7:             }

   8:         });

   9:         $("input.tabIndexedInput").live("keydown", function (evt) {

  10:             var idx = parseInt($(this).attr("idx"));

  11:             switch (evt.which) {

  12:                 case 38:

  13:                     idx -= 1;

  14:                     break;

  15:                 case 40:

  16:                     idx += 1;

  17:                     break;

  18:             }

  19:             if (idx >= 0) {

  20:                 $("input.tabIndexedInput[idx=" + idx + "]").focus();

  21:                 return false;

  22:             } else {

  23:                 return true;

  24:             }

  25:         });

  26:     });

  27: </script>