{"id":1643,"date":"2011-03-14T17:05:32","date_gmt":"2011-03-14T11:35:32","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=1643"},"modified":"2011-03-14T17:05:32","modified_gmt":"2011-03-14T11:35:32","slug":"servlet-hibernate-jquery-and-ajax-based-google-like-chat","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/java\/jsp\/servlet-hibernate-jquery-and-ajax-based-google-like-chat\/","title":{"rendered":"Servlet, Hibernate, jQuery and Ajax based google like chat"},"content":{"rendered":"

Hi, In this article, my aim is to create an application which uses the concept of Hibernate in Servlet with Ajax support of Jquery<\/strong>.
\nBelow figure can give you the idea of final look and feel of the complete application:<\/p>\n

\"Servlet,<\/a>
Servlet, Hibernate, jQuery and Ajax based google like chat<\/figcaption><\/figure>\n

DataBase:<\/strong>
\nHere I am using the MySQL Database for saving the messages entered by the users:
\nCopy below code to create the table in database named “test”\u009d.<\/p>\n

\nDROP TABLE IF EXISTS `test`.`chatmessage`;\nCREATE TABLE  `test`.`chatmessage` (\n`Id` int(10) unsigned NOT NULL AUTO_INCREMENT,\n`Message` varchar(4000) NOT NULL,\n`userName` varchar(100) NOT NULL,\n`MsgTime` varchar(45) NOT NULL,\n`colorSelected` varchar(45) NOT NULL,\nPRIMARY KEY (`Id`)\n) ENGINE=InnoDB AUTO_INCREMENT=400 DEFAULT CHARSET=latin1;\n<\/pre>\n
Hibernate:<\/strong>
\nNow, start with the hibernate part of the code.
\nCreate the POJO (Plain Old Java Object)<\/strong>, which mapps the table “chatmessage”\u009d to the object in our application.<\/p>\n
\npackage com.G2.pojo;\n\nimport java.text.DateFormat;\nimport java.text.SimpleDateFormat;\nimport java.util.Date;\n\npublic class ChatMessage {\n\tprivate String Message;\n\tprivate String userName;\n\tprivate String MsgTime;\n\tprivate Long Id;\n\tprivate String colorSelected;\n\n\tpublic String getColorSelected() {\n\t\treturn colorSelected;\n\t}\n\n\tpublic void setColorSelected(String colorSelected) {\n\t\tthis.colorSelected = colorSelected;\n\t}\n\n\tpublic String getMessage() {\n\t\treturn Message;\n\t}\n\n\tpublic void setMessage(String message) {\n\t\tMessage = message;\n\t}\n\n\tpublic String getUserName() {\n\t\treturn userName;\n\t}\n\n\tpublic void setUserName(String userName) {\n\t\tthis.userName = userName;\n\t}\n\n\tpublic Long getId() {\n\t\treturn Id;\n\t}\n\n\tpublic void setId(Long id) {\n\t\tId = id;\n\t}\n\n\tpublic String getMsgTime() {\n\t\tDateFormat dateFormat = new SimpleDateFormat("yyyy\/MM\/dd HH:mm:ss");\n\t\tDate date = new Date();\n\t\treturn dateFormat.format(date);\n\t}\n\n\tpublic void setMsgTime(String msgTime) {\n\t\tMsgTime = msgTime;\n\t}\n}\n<\/pre>\n
After creating the POJO class, create the hibernate configuration file, from which the application will come to know that how to map the table’s column from database to the class members, database name and so on. The hibernate configuration file name must be “hibernate.cfg.xml<\/strong>“\u009d and it should reside at the root of source code.
\nCode of hibernate.cfg.xml:<\/p>\n
\n<?xml version='1.0' encoding='utf-8'?>\n<!DOCTYPE hibernate-configuration PUBLIC\n"-\/\/Hibernate\/Hibernate Configuration DTD\/\/EN"\n"http:\/\/hibernate.sourceforge.net\/hibernate-configuration-3.0.dtd">\n\n<hibernate-configuration>\n<session-factory name="java:hibernate\/SessionFactory">\n      <property name="hibernate.connection.driver_class"> com.mysql.jdbc.Driver<\/property>\n      <property name="hibernate.connection.url"> jdbc:mysql:\/\/localhost\/test<\/property>\n      <property name="hibernate.connection.username"> username<\/property>\n      <property name="hibernate.connection.password"> pwd<\/property>\n      <property name="hibernate.connection.pool_size"> 10<\/property>\n      <property name="show_sql"> true<\/property>\n      <property name="dialect"> org.hibernate.dialect.MySQLDialect<\/property>\n      <property name="hibernate.hbm2ddl.auto"> update<\/property>\n      <!-- Mapping files -->\n      <mapping resource="ChatMessage.hbm.xml"\/>\n<\/session-factory>\n<\/hibernate-configuration>\n<\/pre>\n
To keep the code simple, normally I add different configurations for different classes in hibernate.
\nWhat is the need of dialect in hibernate:
\nDatabases implement subtle differences in the SQL they use. Things such as data types for example vary across databases Or database specific functionality – selecting the top n rows is different depending on the database. The dialect abstracts this so you don’t have to worry about it. In short the dialect property internally creates the highly optimized query for underlying database.<\/strong>
\nHere also, as you can see, I have included file ChatMessage.hbm.xml file.
\nCode of ChatMessage.hbm.xml:<\/p>\n
\n<?xml version="1.0"?>\n<!DOCTYPE hibernate-mapping PUBLIC\n"-\/\/Hibernate\/Hibernate Mapping DTD 3.0\/\/EN"\n"http:\/\/hibernate.sourceforge.net\/hibernate-mapping-3.0.dtd">\n\n<hibernate-mapping default-lazy="false">\n\t<class name="com.G2.pojo.ChatMessage" table="chatmessage">\n\t\t<id name="id" type="long" column="Id">\n\t\t\t<generator class="identity" \/>\n\t\t<\/id>\n\t\t<property name="Message">\n\t\t\t<column name="Message" \/>\n\t\t<\/property>\n\t\t<property name="userName">\n\t\t\t<column name="userName" \/>\n\t\t<\/property>\n\t\t<property name="MsgTime">\n\t\t\t<column name="MsgTime" \/>\n\t\t<\/property>\n\t\t<property name="colorSelected">\n\t\t\t<column name="colorSelected" \/>\n\t\t<\/property>\n\t<\/class>\n<\/hibernate-mapping>\n<\/pre>\n
UI Part of the application:<\/strong>
\nFor the UI, I have written lots of css classes, this is not possible to write complete code here. Please check the code from download link provided at the bottom of the article.
\nUI of the chat window is created to give the feel of the Gmail chat application as shown in below image:<\/p>\n
\"Gmail<\/a>
Gmail like chat window with emoticons<\/figcaption><\/figure>\n
Here, find the javascript code, which is responsible to send the AJAX request to the servlet, and getting back the response code:<\/p>\n
\n<script type="text\/javascript">\n\tvar uEnteredName = prompt("Please Enter Your Name");\n\t$("#chat_Header").html(uEnteredName);\n\t$("#msg").focus();\n\n\tfunction openEmot()\n\t{\n\t\tvar $ele = $("#emoticons");\n\t\tvar visibility = $ele.css('display');\n\n\t\tif(visibility == 'none')\n\t\t{\n\t\t\t$ele.show();\n\t\t}\n\t\telse{\n\t\t\t$ele.hide();\n\t\t}\n\t}\n\n\tfunction smileyCode(iconCode)\n\t{\n\t\tvar $msgEle = $("#msg");\n\t\t$msgEle.val($msgEle.val() + iconCode);\n\t\tvar $ele = $("#emoticons");\n\t\t$ele.hide();\n\n\t\t$msgEle.focus();\n\t}\n\n\tfunction saveChats() {\n\t\tvar uName = $("#chat_Header").html();\n\t\tif (uName == '') {\n\t\t\talert('Please enter your name ');\n\t\t\treturn false;\n\t\t}\n\t\tvar msg = $("#msg").val();\n\t\t\/\/var oldMsg = $("#chat-area").html();\n\t\tvar colorCode = $('input[name=nameColor]:checked', '#send-message-area')\n\t\t\t\t.val();\n\n\t\t$.ajax( {\n\t\t\t\t\ttype : "POST",\n\t\t\t\t\tdata : "uName=" + uName + "&msg=" + msg + "&colorCode="\n\t\t\t\t\t\t\t+ colorCode,\n\t\t\t\t\turl : "Chatprocess.do",\n\t\t\t\t\terror : function(xhr, ajaxOptions, thrownError) {\n\t\t\t\t\t\talert(xhr.status);\n\t\t\t\t\t\talert(thrownError);\n\t\t\t\t\t},\n\t\t\t\t\tsuccess : function(data) {\n\t\t\t\t\t\t$("#chat-area").html(data);\n\t\t\t\t\t\t$("#ChatAtBigScreen").html(data);\n\t\t\t\t\t\tdocument .getElementById('chat-area').scrollTop = document .getElementById('chat-area').scrollHeight;\n\t\t\t\t\t\tdocument .getElementById('ChatAtBigScreen').scrollTop = document .getElementById('ChatAtBigScreen').scrollHeight;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\treturn false;\n\t}\n\t$('#msg').keyup(function(e) {\n\n\t\tif (e.keyCode == 13) {\n\t\t\tsaveChats();\n\t\t\t$("#msg").val('');\n\t\t}\n\t});\n<\/script>\n<\/pre>\n
Utility class, responsible to save the chat in the database using hibernate:<\/p>\n
\npackage com.G2.Model;\n\nimport java.util.ArrayList;\nimport java.util.Iterator;\nimport java.util.List;\n\nimport org.hibernate.Query;\nimport org.hibernate.Session;\nimport org.hibernate.SessionFactory;\nimport org.hibernate.Transaction;\nimport org.hibernate.cfg.Configuration;\n\nimport com.G2.pojo.ChatMessage;\n\npublic class DBManager {\n      \/\/ Read Hibernate.cfg.xml\n\tstatic Configuration cf = new Configuration().configure();\n\tstatic SessionFactory factory = cf.buildSessionFactory();\n\n\tpublic static void saveChat(ChatMessage chat) {\n\n\t\tSession session = null;\n\t\ttry {\n\n\t\t\tsession = factory.openSession();\n\t\t\tTransaction tx = session.beginTransaction();\n\n\t\t\tsession.save(chat);\n\t\t\ttx.commit();\n\n\t\t} catch (Exception e) {\n\t\t\te.printStackTrace();\n\t\t} finally {\n\t\t\tif (session != null) {\n\t\t\t\t\/\/ I faced problem here, if below line is not written then data automatically gets deleted after insertion\n\t\t\t\tsession.flush();\n\t\t\t\tsession.close();\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic static List<ChatMessage> getMessages() {\n\t\tList<ChatMessage> MessageList = new ArrayList<ChatMessage>();\n\t\tSession session = null;\n\t\ttry {\n\t\t\tsession = factory.openSession();\n\t\t\tString SQL_QUERY = "from ChatMessage c";\n\t\t\tQuery query = session.createQuery(SQL_QUERY);\n\t\t\tIterator<ChatMessage> it = query.iterate();\n\t\t\twhile (it.hasNext()) {\n\t\t\t\tChatMessage c = it.next();\n\t\t\t\tMessageList.add(c);\n\t\t\t}\n\n\t\t} catch (Exception e) {\n\t\t\te.printStackTrace();\n\t\t} finally {\n\t\t\tsession.flush();\n\t\t\tsession.close();\n\t\t}\n\n\t\treturn MessageList;\n\t}\n}\n<\/pre>\n
As shown in above code, to work with hibernate, our application will need to read the configuration file of hibernate by below line of code:<\/p>\n
\nstatic Configuration cf = new Configuration().configure();\n<\/pre>\n
Now, we will need to create the session object from the SessionFactory class:<\/p>\n
\nstatic SessionFactory factory = cf.buildSessionFactory();\nSession session = factory.openSession();\n<\/pre>\n
Create the object of transaction :<\/p>\n
\nTransaction tx = session.beginTransaction();\n<\/pre>\n
To save the object in the database use save()<\/strong> method of the transaction.
\nTo get the list of chat messages from the database :<\/p>\n
\nString SQL_QUERY = "from ChatMessage c";\nQuery query = session.createQuery(SQL_QUERY);\nIterator<ChatMessage> it = query.iterate();\n<\/pre>\n
Here object of org.hibernate.Query<\/strong> is created and using method iterate(), it gives all the records from the database as a object. (That is what ORM \u2013 Object Relation Mapping<\/strong>)<\/p>\n
Servlet Code:<\/strong><\/p>\n
\npackage com.G2.servlets;\n\nimport java.io.IOException;\nimport java.io.PrintWriter;\nimport java.util.HashMap;\nimport java.util.List;\n\nimport javax.servlet.ServletException;\nimport javax.servlet.http.HttpServlet;\nimport javax.servlet.http.HttpServletRequest;\nimport javax.servlet.http.HttpServletResponse;\n\nimport com.G2.Model.DBManager;\nimport com.G2.pojo.ChatMessage;\n\npublic class ChatProcess extends HttpServlet {\n\n\t@Override\n\tprotected void doPost(HttpServletRequest req, HttpServletResponse resp)\n\t\t\tthrows ServletException, IOException {\n\n\t\tString uName = req.getParameter("uName");\n\t\tString msg = req.getParameter("msg");\n\t\tString colorCode = req.getParameter("colorCode");\n\n\t\tChatMessage chat = new ChatMessage();\n\t\tchat.setMessage(msg);\n\t\tchat.setUserName(uName);\n\t\tchat.setColorSelected(colorCode);\n\n\t\tDBManager.saveChat(chat);\n\t\tPrintWriter out = resp.getWriter();\n\t\tList<ChatMessage> msgList = DBManager.getMessages();\n\n\t\tStringBuilder sb = new StringBuilder();\n\n\t\tfor (ChatMessage chatMsg : msgList) {\n\t\t\tsb.append("<span style='background:#"\n\t\t\t\t\t+ chatMsg.getColorSelected() + "'>" + chatMsg.getUserName()\n\t\t\t\t\t+ "<\/span>" + chatMsg.getMessage() + "<br\/><br\/>");\n\t\t}\n\n\t\tout.print(replaceEmoticons(sb.toString()));\n\t}\n\n\tprivate String replaceEmoticons(String msg) {\n\t\tString imgTag = "<img src="..\/images\/smiley\/{PH}.gif">";\n\t\tString placeHolder = "{PH}";\n\n\t\tSmileyCodes smileyCode = new SmileyCodes();\n\t\tHashMap<String, String> codeMap = smileyCode.getSmileyMap();\n\n\t\tfor (Object key: codeMap.keySet()) {\n\t\t\tString val = codeMap.get(key);\n\t\t\tif(msg.contains(key.toString()))\n\t\t\t{\n\t\t\t\tmsg = msg.replace(key.toString(), imgTag.replace(placeHolder,val));\n\t\t\t}\n\t\t}\n\n\t\treturn msg;\n\t}\n\n}\n<\/pre>\n
This servlet class is called by the ajax code, and from here the message is saved using DBManager class.
\nServlet mapping in web.config<\/strong><\/p>\n
\n\t<servlet>\n\t\t<servlet-name>Chatprocess<\/servlet-name>\n\t\t<servlet-class>com.G2.servlets.ChatProcess<\/servlet-class>\n\t<\/servlet>\n\n\t<servlet-mapping>\n\t\t<servlet-name>Chatprocess<\/servlet-name>\n\t\t<url-pattern>\/Pages\/Chatprocess.do<\/url-pattern>\n\t<\/servlet-mapping>\n<\/pre>\n
 Emoticon \/Smiley part \u2013 XML Module: <\/strong><\/p>\n
As you can see in the servlet code,<\/p>\n
\nSmileyCodes smileyCode = new SmileyCodes();\n<\/pre>\n
SmileyCodes class is responsible to render the symbol as a smiley. For the performance purpose, the smiley code is saved in xml file with corresponding image file name. Below class reads the xml and creates the HashMap (Only once).<\/p>\n
\npackage com.G2.servlets;\n\nimport java.io.IOException;\nimport java.io.InputStream;\nimport java.util.HashMap;\n\nimport javax.xml.parsers.DocumentBuilder;\nimport javax.xml.parsers.DocumentBuilderFactory;\nimport javax.xml.parsers.ParserConfigurationException;\n\nimport org.w3c.dom.Document;\nimport org.w3c.dom.Element;\nimport org.w3c.dom.Node;\nimport org.w3c.dom.NodeList;\nimport org.xml.sax.SAXException;\n\npublic class SmileyCodes {\n\n\tprivate static HashMap<String, String> smileyCodes = null;\n\n\tpublic static void main(String args[]) {\n\t\tnew SmileyCodes().replaceCodeBySmiley();\n\t}\n\n\tpublic HashMap<String, String> getSmileyMap() {\n\t\tif (smileyCodes == null) {\n\t\t\treplaceCodeBySmiley();\n\t\t}\n\t\treturn smileyCodes;\n\n\t}\n\n\tprivate void replaceCodeBySmiley() {\n\n\t\ttry {\n\n\t\t\tif (smileyCodes == null) {\n\t\t\t\tSmileyCodes testMain = new SmileyCodes();\n\t\t\t\tInputStream st = testMain.getClass().getResourceAsStream("\/SmileyCode.xml");\n\t\t\t\tDocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();\n\t\t\t\tDocumentBuilder builder;\n\n\t\t\t\tsmileyCodes = new HashMap<String, String>();\n\t\t\t\tbuilder = factory.newDocumentBuilder();\n\t\t\t\tDocument doc = builder.parse(st);\n\n\t\t\t\t\/\/ Get Root Node and its child\n\t\t\t\tNode root = doc.getDocumentElement();\n\t\t\t\tNodeList childNodes = root.getChildNodes();\n\n\t\t\t\tfor (int i = 0; i < childNodes.getLength(); i++) {\n\t\t\t\t\treplaceCodeBySmiley(childNodes.item(i));\n\t\t\t\t}\n\t\t\t}\n\n\t\t} catch (ParserConfigurationException e) {\n\t\t\te.printStackTrace();\n\t\t} catch (SAXException e) {\n\t\t\te.printStackTrace();\n\t\t} catch (IOException e) {\n\t\t\te.printStackTrace();\n\t\t}\n\n\t}\n\n\tprivate void replaceCodeBySmiley(Node node) {\n\n\t\tif (node.getNodeType() == Node.ELEMENT_NODE) {\n\t\t\tElement e = (Element) node;\n\t\t\tString[] keyVal = e.getTextContent().trim().split("#");\n\t\t\tsmileyCodes.put(keyVal[0].trim(), keyVal[1].trim());\n\t\t}\n\t}\n\n\tprivate String nodeType(short type) {\n\t\tswitch (type) {\n\t\tcase Node.ELEMENT_NODE:\n\t\t\treturn "Element";\n\t\tcase Node.DOCUMENT_TYPE_NODE:\n\t\t\treturn "Document type";\n\t\tcase Node.ENTITY_NODE:\n\t\t\treturn "Entity";\n\t\tcase Node.ENTITY_REFERENCE_NODE:\n\t\t\treturn "Entity reference";\n\t\tcase Node.NOTATION_NODE:\n\t\t\treturn "Notation";\n\t\tcase Node.TEXT_NODE:\n\t\t\treturn "Text";\n\t\tcase Node.COMMENT_NODE:\n\t\t\treturn "Comment";\n\t\tcase Node.CDATA_SECTION_NODE:\n\t\t\treturn "CDATA Section";\n\t\tcase Node.ATTRIBUTE_NODE:\n\t\t\treturn "Attribute";\n\t\tcase Node.PROCESSING_INSTRUCTION_NODE:\n\t\t\treturn "Attribute";\n\t\t}\n\t\treturn "Unidentified";\n\t}\n\n}\n<\/pre>\n
Download Complete code – JQuery Chat in Hibernate<\/a> (Change\u00a0extension\u00a0from zip to rar )<\/p>\n
Download 2 –\u00a0JQueryChat<\/a><\/p>\n
Note:<\/strong><\/p>\n
Following jar files will be needed:<\/p>\n
antlr-2.7.6.jar
\ncommons-collections-3.1.jar
\ndom4j-1.6.1.jar
\nhibernate-jpa-2.0-api-1.0.0.Final.jar
\nhibernate-testing.jar
\nhibernate3.jar
\njavassist-3.12.0.GA.jar
\njta-1.1.jar
\nmysql-connector-java-3.1.14-bin.jar
\nslf4j-api-1.6.1.jar<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
Servlet, Hibernate, jQuery and Ajax based google like chat with source code<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[25,4,11],"tags":[33,109,126,134,148,162],"class_list":["post-1643","post","type-post","status-publish","format-standard","hentry","category-hibernate","category-jsp","category-servlet","tag-ajax","tag-google","tag-javascript","tag-jquery","tag-mysql","tag-query-browser"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":1664,"url":"https:\/\/www.jitendrazaa.com\/blog\/java\/jsp\/step-by-step-dwr-application-simple-ajax-in-java\/","url_meta":{"origin":1643,"position":0},"title":"Step by Step DWR Application – Simple AJAX in JAVA","author":"Jitendra","date":"March 15, 2011","format":false,"excerpt":"Step by Step DWR Application - Simple AJAX in JAVA","rel":"","context":"In "JSP"","block_context":{"text":"JSP","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/java\/jsp\/"},"img":{"alt_text":"How DWR works in Java","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/03\/How-DWR-works-in-Java.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":790,"url":"https:\/\/www.jitendrazaa.com\/blog\/microsoft\/net\/row-expand-collapse-using-jquery-and-ajax\/","url_meta":{"origin":1643,"position":1},"title":"Row expand collapse using jquery and Ajax","author":"Jitendra","date":"August 19, 2010","format":false,"excerpt":"Using JQuery and Ajax to expand and collapse the row in ASP.NET","rel":"","context":"In "ASP.NET"","block_context":{"text":"ASP.NET","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/microsoft\/net\/"},"img":{"alt_text":"Ajax JQuery Row Expand Collapse","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2010\/08\/rowexpand-300x203.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2281,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/disable-inputs-after-submit-to-avoid-double-submission-using-jquery-and-ajax\/","url_meta":{"origin":1643,"position":2},"title":"Disable inputs after submit to avoid double submission using JQuery and Ajax","author":"Jitendra","date":"June 24, 2011","format":false,"excerpt":"This article will explain the safe way to submit the forms using JQuery. It will avoid accidental double submission.","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Disable inputs after submit to avoid double submission using JQuery","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/06\/Disable-inputs-after-submit-to-avoid-double-submission-using-JQuery.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1527,"url":"https:\/\/www.jitendrazaa.com\/blog\/microsoft\/net\/ajax-based-multiselect-jquery-autocomplete-control-in-asp-net\/","url_meta":{"origin":1643,"position":3},"title":"Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net","author":"Jitendra","date":"February 19, 2011","format":false,"excerpt":"Tutorial on creating Ajax Based Multiselect JQuery Autocomplete User Control in ASP.Net","rel":"","context":"In "ASP.NET"","block_context":{"text":"ASP.NET","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/microsoft\/net\/"},"img":{"alt_text":"Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/02\/Ajax-Based-Multiselect-JQuery-Autocomplete-Control-in-ASP.Net_.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3347,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/ajax-based-autocomplete-component-in-salesforce-using-jquery-ui-and-json\/","url_meta":{"origin":1643,"position":4},"title":"AutoComplete Component in Visualforce using JQueryUI","author":"Jitendra","date":"June 28, 2013","format":false,"excerpt":"In this tutorial, I am going to explain very Simple AJAX and JSON based Auto Complete component with the help of JQuery UI. First I am assuming that you already have Static Resource of named \"AutoCompleteWithModal\"\u009d. This Static resource has all images, CSS and JQuery library needed to implement this\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"JQuery UI and JSON based AJAX AutoComplete Component in Salesforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":2347,"url":"https:\/\/www.jitendrazaa.com\/blog\/java\/hibernate\/step-by-step-hibernate-tutorial-using-eclipse-wtp\/","url_meta":{"origin":1643,"position":5},"title":"Step By Step Hibernate Tutorial Using eclipse WTP","author":"Jitendra","date":"August 8, 2011","format":false,"excerpt":"Step By Step Hibernate (ORM Tool) Tutorial Using eclipse WTP","rel":"","context":"In "Hibernate"","block_context":{"text":"Hibernate","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/java\/hibernate\/"},"img":{"alt_text":"Eclipse Install New Software - Hibernate","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/08\/Eclipse-Install-New-Software-Hibernate.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/1643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=1643"}],"version-history":[{"count":0,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/1643\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=1643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=1643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=1643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}