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.

Answer 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.