0

I am still quite a novice with jQuery, but I was able to configure the jQuery UI and implement the autocomplete functionality on my search box. However, I have been having some issues. Occasionally, the autocomplete will break, causing the search box itself to disappear. Firebug is telling me that the action is being aborted and there is no response received.

Firebug Console Error

There is no obvious pattern to these errors, and the same term will work the next time I try it, so I doubt it is a data issue. The main issue is that this causes the search box to completely disappear from the page until a page refresh. Is there any way to stop this happening at least? I am happy to provide any more information if requested.

$(document).ready(function($){
  $('.search').each(function(){
    var self = $(this);
    self.autocomplete({source: "/products/autocomplete"});
  });
});
ubik
  • 4,440
  • 2
  • 23
  • 29
tob88
  • 2,151
  • 8
  • 30
  • 33
  • Maybe this is related to http://stackoverflow.com/questions/2241861/firebug-1-5-showing-200-aborted-for-ajax-requests ? – ubik May 16 '12 at 18:56

2 Answers2

0

Looking at the link Pedro posted, this answer looks like a good starting point: Firebug 1.5 showing 200 Aborted for Ajax requests

For further debugging, I would also suggest wrapping the line

self.autocomplete({source: "/products/autocomplete"});

in a try with a catch that does a console.log or alert. Are you seeing anything in Firebug's console log about javascript errors, or just the http abort? Wrapping that line in a try might be a good pattern to potentially prevent network errors from blowing away that control for the remainder of the page lifecycle.

Community
  • 1
  • 1
Andrew N Carr
  • 336
  • 1
  • 5
  • Hi Andrew, I have taken a look at Pedro's link, and tried implementing preventDefault and return false (hopefully correctly). But neither had an impact. There are no errors in the log. I am stumped as to why it would cause the search box to disappear. It seems like an issue I could put up with if it did not do this! – tob88 May 16 '12 at 19:49
  • If you can, try replicating the issue in Google Chrome, I've seen cases where errors can be clearer in one browser where the other reports a more vague error. Of course, you aren't seeing any console error, but it is worth at try! – Andrew N Carr May 16 '12 at 20:01
  • Also, when the control disappears, if you inspect the DOM, has the element been deleted, or had its style set to hidden? – Andrew N Carr May 16 '12 at 20:03
  • Hi Andrew, good suggestion. It seems that the search box is being changed to display:none. Is there any way I could prevent this? – tob88 May 16 '12 at 20:24
  • Is there any place in your code that changes the display style on that element? – Andrew N Carr May 16 '12 at 20:45
  • Try to capture the moment it is changing. http://api.jquery.com/change/ I'd use that to bind a change event to the input element, and test for the css being set to display:none, and setting a conditional breakpoint so you can look at the stack trace to get an idea of what is causing the hide. – Andrew N Carr May 16 '12 at 20:46
0

Curiously, I am seeing the exact same "disappearance" behavior within firebug itself (firebug 1.9) when I try to use Firebug's search box. The {[case sensitivity],[previous],[Next]} popup appears and disappears immediately after I click in the search box to get focus, defocusing the cursor at the same time as the popup disappears. This prevents using the search box.

I do have a workaround, however: Clicking multiple times, really fast occasionally brings up the popup without it disappearing. Once I can get the popup to stick around, I am able to enter text in the search box. When I focus elsewhere, however, the popup disappears, making it difficult to click on [Next] to get the next occurence of the search string. Rapid clicking, again, is a workaround for this, too!

I can't replicate this in Chrome's debugger.

Michael
  • 1