Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy can't I process the returned HTTP status codes from $.ajax?
    text
    copied!<p>I have next JSP page that works on Google App Engine:</p> <pre><code>&lt;%@ page contentType="text/html; charset=windows-1251" language="java" %&gt; &lt;%@ page import="com.wedding.Register" %&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Test&lt;/title&gt; &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt; &lt;script src="js/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; function submitMyForm(button) { var myForm = $(button).closest('form'); $.ajax({ url: $(myForm).attr('action'), type: "post", contentType:attr("enctype", "multipart/form-data"), data: $(myForm).serialize(), statusCode: { 400: function () { $('.form-inline').after("&lt;h1&gt;400!&lt;/h1&gt;"); }, 200: function () { $('.form-inline').after("&lt;h1&gt;200!&lt;/h1&gt;"); } } }); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="container"&gt; &lt;% String companyName = Register.getLoggedInCompanyName(request); if (companyName == null) { %&gt; &lt;div class="navbar"&gt; &lt;div class="navbar-inner"&gt; &lt;a class="brand" href="#"&gt;Menu&lt;/a&gt; &lt;ul class="nav"&gt; &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li class="active"&gt;&lt;a href="/reg.jsp"&gt;Register&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="hero-unit"&gt; &lt;h1&gt;Login&lt;/h1&gt; &lt;p&gt;Enter login credentials&lt;/p&gt; &lt;p&gt; &lt;form action="/reg?action=login" class="form-inline" method="post" enctype="multipart/form-data"&gt; &lt;input type="text" name="email" class="input-xlarge" placeholder=""&gt; &lt;input type="password" name="password" class="input-xlarge" placeholder=""&gt; &lt;button type="submit" class="btn" onClick="submitMyForm(this)"&gt;Login&lt;/button&gt; &lt;/form&gt; &lt;/p&gt; &lt;/div&gt; &lt;% } else { %&gt; &lt;div class="navbar"&gt; &lt;div class="navbar-inner"&gt; &lt;a class="brand" href="#"&gt;Menu&lt;/a&gt; &lt;ul class="nav"&gt; &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li class="active"&gt;&lt;a href="/reg?action=logout"&gt;Logout&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="hero-unit"&gt; &lt;h1&gt;Error&lt;/h1&gt; &lt;p&gt;Error.&lt;/p&gt; &lt;/div&gt; &lt;% } %&gt; &lt;/div&gt; &lt;div id="footer"&gt; &lt;div class="container"&gt; &lt;p class="muted credit"&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p></p> <p>The problem is that when a click button the form is sent to the server but if the server return 400 HTTP status code</p> <pre><code>$('.form-inline').after("&lt;h1&gt;400!&lt;/h1&gt;"); </code></pre> <p>is not invoked.</p> <p>I've also tried success/error function and other HTTP codes but without success. The interesting thing is that it worked once and then always fails. Instead of adding new element to HTML the browser is redirected to the generated error page.</p> <p>The status code is returned using</p> <pre><code>HttpServletResponse.sendError(400); </code></pre> <p>I've checked that a correct request and response are sent. I've also checked that the latest jquery is linked.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload