All geek questions in one place

JQuery Ajax calls binding tag binding

I am new to jQuery and trying to learn an example using the example. In the example below, I am trying to call a servlet on a tag binding event using jQuery Ajax. I have several anchor tags on my page and I want a different servlet to be called for each of them. If I use the id of the anchor tag, for example $ ('# submit1'), click as shown below, it does not work. But if I replaced it with "a", it works, which calls the same servlet for both anchor tags

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>AJAX calls using Jquery in Servlet</title> <script src="http://code.jquery.com/jquery-latest.js"> </script> <script> $(document).ready(function() { $('#submit1').click(function(event) { event.preventDefault(); var username=$('#user').val(); $.get('ActionServlet',{user:username},function(responseText) { $('#welcometext').text(responseText); }); }); }); $(document).ajaxStart(function(){ $('#content_progress').text("Loading..."); }); $(document).ajaxComplete(function(){ $('#content_progress').text(""); }); </script> </head> <body> <form id="form1"> <h1>AJAX Demo using Jquery in JSP and Servlet</h1> Enter your Name: <input type="text" id="user"/><br> <a name="submit1" href="#">View Profile</a> <a name="submit2" href="#">Course Details</a> <br/> </form> <div id="content_progress"> </div> <div id="welcometext"> </div> </body> </html>
+4
source share
3 answers

id-selector

change name=submit1

to

id=submit1

 <a id="submit1" href="#">View Profile</a>

or

attribute-equals-selector

if you want to access tag a on name

change $('#submit1').click(function(event) {

to

$('a[name="submit1"]').click(function(event) {

+2
source

You need to specify id a not name , # is the id-selector , so the value should be the value of the id attribute of the target element

 <a id="submit1" href="#">View Profile</a> <a id="submit2" href="#">Course Details</a>
+1
source

I have one more problem. I get a form that allows the user to change their password as an ajax response from the servlet. Now I have added the ajax function for the buttons in the new form, but when I click the Change password button, the whole form disappears, instead I want to call the servlet again when I click Change Password . I am sure that the jsp file test.jsp , which receives the response from the ajax call, already includes the ajax logic for the change password identifier #changePswd

test.jsp

 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>AJAX calls using Jquery in Servlet</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function() { $('#submit1').click(function(event) { event.preventDefault(); $.get('ActionServlet',{request:"form"},function(responseText) { $('#welcometext').html(responseText); }); }); $('#changePswd').click(function(event) { event.preventDefault(); $.get('ActionServlet',{request:"action"},function(responseText) { $('#content_progress').html(responseText); }); }); }); $(document).ajaxStart(function(){ $('#content_progress').text("Loading..."); }); $(document).ajaxComplete(function(){ $('#content_progress').text(""); }); </script> </head> <body> <form id="form1"> <h1>AJAX Demo using Jquery in JSP and Servlet</h1> Enter your Name: <input type="text" id="user" /><br> <a id="submit1" href="#">View Profile</a> <a name="submit2" href="#">Course Details</a> <br /> <div id="content_progress"></div> <div id="welcometext"></div> </form> </body> </html>

Servlet

 package ajaxdemo; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class ActionServlet extends HttpServlet { private static final long serialVersionUID = 1L; public ActionServlet() { } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String requestType=null; String data = null; requestType = request.getParameter("request").toString(); if(requestType.equals("form")) { data = "<form id = \"formChangePswd\"><table><tbody>" +"<tr><td class=\"style1\">Old Password</td><td class=\"style2\"><input type=\"text\" id=\"oldPswd\" size=\"20\" class=\"textchange\" /></td></tr>" +"<tr><td class=\"style1\">New Password</td><td class=\"style2\"><input type=\"text\" id=\"newPswd\" size=\"20\" class=\"textchange\"/></td></tr>" +"<tr><td class=\"style1\">Confirm New Password</td><td class=\"style2\"><input type=\"text\" id=\"confirmPswd\" size=\"20\" class=\"textchange\"/></td></tr>" +"<tr></tr><tr><td align=\"right\" class=\"style1\"><input type=\"reset\" id=\"reset\" value=\"Reset\" /></td><td class=\"style2\"><input type=\"submit\" id=\"changePswd\" value=\"Change Password\"/></td>" +"</tr></tbody></table></form>"; } else if(requestType.equals("action")) { data = "Your request is lodged, we will get back to you soon"; } response.setContentType("text/html"); response.setCharacterEncoding("UTF-8"); response.getWriter().write(data); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } }
+1
source

Source: https://habr.com/ru/post/1498798/

More articles:


All Articles