XhrIo making multiple calls onclick

Question

My .js file

        function call() {
            var val1;
            var val2;
            var b2 = new goog.ui.Button();
            b2.decorate(goog.dom.getElement('but'));
            goog.events.listen(b2, goog.ui.Component.EventType.ACTION,
                function(e) {
                val1 = (goog.dom.getElement('liun').value);
                val2 = (goog.dom.getElement('lipw').value);
            var request = new goog.net.XhrIo();
            var res;
            goog.events.listen(request, "complete", function(e){
                var xhr = /** @type {goog.net.XhrIo} */ (e.target);
                res = xhr.getResponseText();
            if(xhr.getResponseText() == "true")
                    {
                goog.dom.getElement("sp1").innerHTML = ("Hi Welcome");
                    }
                    else
                    {
                goog.dom.getElement("sp1").innerHTML = ("Invalid Username or Password");
                    }
                });
            var url = 'mylogin?username='+val1+'&password='+val2;
            request.send(url, "GET");       
            });
        }

My servlet

    public class mylogin extends HttpServlet
    {
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
        {
            String uname = ((req.getParameter("username")).trim());
            String pword = ((req.getParameter("password")).trim());
                resp.setContentType("text/html");  
                PrintWriter out = resp.getWriter();
                System.out.println("" + uname + " " + pword);
                String tof;
                if((uname.equals("arjun"))&&(pword.equals("daglur")))
                {
                    tof = "true";
                }
                else
                {
                    tof = "false";
                }
                System.out.println(tof);
                out.write(tof);
                out.close();

        }
    }

1st time when i click send its not being sent. 2nd time its making a single call. 3rd time its making 2 calls and 4th time makes 3 calls. The call() is being invoked on click in jsp.

"The call() is being invoked on click in jsp." can you put up the code where this happens? it seems likely you are rebinding the onclick event to the same DOM element. — ne8il, Aug 29 '13 at 13:05

score 1 · Accepted Answer · answered Aug 30 '13 at 13:59

1

You are decorating the button "#but", which has an onclick method of "call()". The first time you click it, it binds a google event listener to the button -

goog.events.listen(b2, goog.ui.Component.EventType.ACTION,

Now "#but" has both the onclick method of "call()" (which is not overridden by Closure's event handlers) and one event handler. The second time you click the button, it triggers both the event handler and the "onclick" method, which binds another event handler to the button. (and so on). This is why it increases the amount of calls each time you click it.

I would suggest not having the button have an onclick method, and instead bind the event handler to the button after the page has been rendered.

answered Aug 30 '13 at 13:59

ne8il

2,427
1
20
18

ok i figured it out i changed the events listener to this goog.events.listen((goog.dom.getElement('but')), goog.events.EventType.CLICK, function(e) {...............} – Arjun Aug 30 '13 at 14:58
ok i have another problem when im trying to forward to a new page on user authentication being true im failing. i have mapped the new request to a servlet where im forwarding the request to a new page.The code in my .js is as foolows `var req1 = new goog.net.XhrIo(); req1.send('forward'); ` and code in forward servlet is as follows `RequestDispatcher dispatch = req.getRequestDispatcher("test1.jsp"); dispatch.forward(req, resp);` – Arjun Aug 30 '13 at 15:02

XhrIo making multiple calls onclick

1 Answers1