Thursday, June 11, 2009

Simple Jquery Ajax : Server side Autocomplete and Server side data fetching


Simple way of using the jquery ajax is here.
I tried to make use the [webMethod] calls of Jquery ajax on the same aspx page and to fetch the database data.
In this article will learn:
Here you will find simple solutions on
1. How to use jquery
2. How to use Jquery ajax.
3. How to use jquery to call server side method.
4. How to use Jqeury ajax to call aspx methods and update the controls on the page.
5. Learn Autocomplete implementation and Server side data fetching (even from database)
without any postback.


Source code below.


1. ASPX code
   1:  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Simple.aspx.cs" Inherits="Simple" %>
   2:   
   3:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   4:   
   5:  <html xmlns="http://www.w3.org/1999/xhtml">
   6:  <head runat="server">
   7:      <title></title>
   8:       
   9:      <link href="Common/_assets/css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
  10:      <link href="Common/_assets/css/MyMessage.css" rel="stylesheet" type="text/css" />
  11:      <script src="Common/Scripts/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
  12:      <script src="Common/Scripts/jQuery/jquery.autocomplete.js" type="text/javascript"></script>
  13:     
  14:      <script language="javascript" type="text/javascript">
  15:          var data = "";
  16:          $(document).ready(function() {             
  17:              $("#Result").click(function() {
  18:                  $.ajax({
  19:                      type: "POST",
  20:                      url: "Simple.aspx/GetTime",
  21:                      data: "{}",
  22:                      contentType: "application/json; charset=utf-8",
  23:                      dataType: "json",
  24:                      success: function(msg) {                             
  25:                              $("#ya").attr("value", msg.d);                        
  26:                      }
  27:                  });
  28:              });
  29:   
  30:            
  31:              $.ajax({
  32:                  type: "POST",
  33:                  url: "Simple.aspx/LoadData",
  34:                  data: "{}",
  35:                  contentType: "application/json; charset=utf-8",
  36:                  dataType: "json",
  37:                  success: function(msg) {
  38:                      data = msg.d.split(" ");
  39:                      $("#ya").autocomplete(data);
  40:                  }
  41:              });
  42:          }); 
  43:      </script>     
  44:  </head>
  45:  <body>
  46:      <form id="form1" autocomplete="true" runat="server">
  47:      <asp:ScriptManager ID="ScriptManager1" runat="server">
  48:      </asp:ScriptManager>
  49:      <div>
  50:      Autocomplete text box : type a,b,c<input type="text" style="width:300px;" name="searchQuery"   id="ya" />
  51:      <input type="button" id="Result"  value="Get Server time now " name="Result"/>    
  52:      <asp:Label runat="server" ID="lblinfo" ></asp:Label>    
  53:      <div visible="false">
  54:      </div>
  55:      </div>
  56:      </form>
  57:  </body>
  58:  </html>



2 ASPX.CS Code
   1:  using System;
   2:  using System.Collections.Generic;
   3:  using System.Linq;
   4:  using System.Web;
   5:  using System.Web.UI;
   6:  using System.Web.UI.WebControls;
   7:   
   8:  public partial class Simple : System.Web.UI.Page
   9:  {
  10:      protected void Page_Load(object sender, EventArgs e)
  11:      {
  12:      }
  13:   
  14:      [System.Web.Services.WebMethod]
  15:      public static string GetTime()
  16:      {
  17:          return DateTime.Now.ToString();
  18:          //this.lblinfo.Text = "";
  19:      }
  20:   
  21:      #region "AutoComplete"
  22:      [System.Web.Services.WebMethod]
  23:      public static string LoadData()
  24:      {
  25:          // this function can fetch data from database
  26:          return  "Aeroplane Apple Ambulance Border Crops Desalination Elephants  Parrot ";
  27:      }
  28:      #endregion
  29:   
  30:  }


Screen shot and code is straight forward. if you problem to understand, I will be glad to help.

Other Problems and solutions.
If any issues with Firefox for autocomplete
just make

<form id="form1" autocomplete="true" runat="server">