Databases
StackOverflow2013
Postsdbo
POASP MVC, jQuery issue returning error on ajax post when user hits enter key whilst textbox has focus
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POASP MVC, jQuery issue returning error on ajax post when user hits enter key whilst textbox has focus
    text
    copied!<p>First off. I am using ASP MVC 4, C# and Jquery 1.9.1.</p> <p>I have a very unusual error where an ajax post is returning on its error handler when no error is present.</p> <p>Basically I have written a search box and hooked this into returning a partial view for the search results when no errors with the model are found. Alternatively if errors are found the page will be redirected to the initial action method. CUrrently the only model error I trap is whether or not they have entered anything in the search box. However I perform a check in jQuery so this kind of makes it a moot point.</p> <p>All of this is triggered by either pressing the enter key, or by clicking the search button with the mouse. </p> <p>These events will both call the same jQuery function. Here is the jQuery.</p> <pre><code>$(document).ready(function () { $('#search-button').on('click', function () { runSearch(); }); $(document).keypress(function (e) { if (e.which == 13) { runSearch(); } }); /* Set loading dialog */ function disableScreen() { $('#dialog').attr('title', 'Please wait...').attr('id', 'dialog').html('&lt;p&gt;Loading... Please wait.&lt;/p&gt;').dialog({ open: function () { $(".ui-dialog-titlebar-close").hide(); }, draggable: false, resizable: false, show: 'fade', modal: true }); } /* Remove loading dialog */ function enableScreen() { $('.ui-dialog:has(#' + $('#dialog').attr('id') + ')').empty().remove(); $('#dialog').html(''); } function runSearch() { var searchTxt = $('#SearchString').val(); var searchbox = $('#search-text'); var parent = $('#search-results'); /* Start search if search text is greater than 0 characters */ if (searchTxt.length &gt; 0) { disableScreen(); $.post('/Search/OrderSearch', { 'searchString': searchTxt }, function (data) { parent.html(data); searchbox.val(searchTxt); $(window).scrollTop('0'); }).success(function () { enableScreen(); }).error(function () { alert('Error'); enableScreen(); }); } else { alert('Please enter a search string'); } } }); </code></pre> <p>Now this all works perfectly fine if you:</p> <ol> <li><p>Enter a name to search in the text box, click out of the box and press the enter key</p></li> <li><p>Enter a name to search in the text box, click the search button with the mouse</p></li> </ol> <p>This falls over if you:</p> <ol> <li>Enter a name to search in the text box and then press the enter key (without exiting the text box)</li> </ol> <p>The controller does not return an error, it returns the partial in every instance. However when the error is triggered, the entire page is rendered as the partial, not the targeted parent object.</p> <p>To me this is very bizarre behaviour. Firstly why does jQuery think there is an error since the controller does not pass one back and secondly why does jQuery re-render the entire page as the partial data returned when it has a target to render too?</p> <p>EDIT:</p> <p>This is the response returned an all cases (even when it mucks up)</p> <pre><code>HTTP/1.1 200 OK Server: ASP.NET Development Server/10.0.0.0 Date: Wed, 06 Nov 2013 12:30:40 GMT X-AspNet-Version: 4.0.30319 X-AspNetMvc-Version: 4.0 Cache-Control: private, s-maxage=0 Content-Type: text/html; charset=utf-8 Content-Length: 777 Connection: Close &lt;table id="search-table" class="results-table"&gt; &lt;tr&gt; &lt;th&gt;Order No&lt;/th&gt; &lt;th&gt;Budget&lt;/th&gt; &lt;th&gt;Client No&lt;/th&gt; &lt;th&gt;Client Name&lt;/th&gt; &lt;th&gt;Post Code&lt;/th&gt; &lt;th&gt;Order Date&lt;/th&gt; &lt;/tr&gt; &lt;tr data-id="11767" class="clickable"&gt; &lt;td&gt; 1 &lt;/td&gt; &lt;td&gt; 2014/15 &lt;/td&gt; &lt;td&gt; MC0000 &lt;/td&gt; &lt;td&gt; My Company Ltd &lt;/td&gt; &lt;td&gt; 123 456 &lt;/td&gt; &lt;td&gt; 31/10/2013 &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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