Tuesday, December 22, 2009

[jQuery] Autosuggest breaks in ie7/8

Hello,

I got this code for search auto suggest and everything works fine in
Firefox, Chrome, Opera etc. But it breaks in internet explorer 7 and
8.


I get this error:
-----------------------------------------
Line: 158
Character: 2
Code: 0
Error Message: 'fghds' is null or not an object
URL: http://localhost.com/js/search.js
-----------------------------------------

This is the jquery script:
-----------------------------------------

var SEARCH_BOX_DEFAULT_TEXT = 'Enter the keywords:';

var AJAX_PENDING_TIMER;
var CURRENT_PAGE = 1;
var CURRENT_LIMIT = 5;

function init() {

var sTextBox = $("#search_val");

sTextBox.focus(function() {
if(this.value == SEARCH_BOX_DEFAULT_TEXT) {
this.value = '';
}
});
sTextBox.blur(function() {
if(this.value == '') {
this.value = SEARCH_BOX_DEFAULT_TEXT;
}
});
sTextBox.blur();


sTextBox.keyup(function() {
var q = $("#search_val").val();
if( q == SEARCH_BOX_DEFAULT_TEXT || q == '' || q == undefined ||
q.length<=3) {
HideLiveSearch();
}
else {
clearTimeout(AJAX_PENDING_TIMER);
CURRENT_PAGE = 1;
AJAX_PENDING_TIMER = setTimeout("PerformLiveSearch()",300);
}

});

$("#livesearch_result_close_link").click(function() {
HideLiveSearch();
});

}

function NextPage(p) {
if(p['has_next']) {
AJAX_IS_RUNNING = false;
CURRENT_PAGE++;
PerformLiveSearch();
}
}
function PrevPage(p) {
if(p['has_prev']) {
AJAX_IS_RUNNING = false;
CURRENT_PAGE--;
PerformLiveSearch();
}
}

function ShowLoaders() {
$('#ajaxloader').fadeIn('fast');

if( $('#livesearch').css('display') == 'block' ) {
var h = $('#livesearch').height() - 5;
var w = $('#livesearch').width() - 45;
$('#loader_div').width(w);
$('#loader_div').height(h);
$('#loader_div p').css('margin-top',(h/2)+20);
$('#loader_div').fadeIn('fast');
}
}

function HideLoaders() {
$('#ajaxloader').fadeOut('fast');
$('#loader_div').hide();
}

var AJAX_IS_RUNNING = false;
function PerformLiveSearch() {

if(AJAX_IS_RUNNING == true) {
return;
}

var query = $("#search_val");
var q_val = (query.val() && query.val() !=
SEARCH_BOX_DEFAULT_TEXT) ? query.val() : '';

if(q_val == '') {
return;
}
AJAX_IS_RUNNING = true;

$.ajax({
url: './search',
data: {
query: q_val,
output: 'json',
page: CURRENT_PAGE,
limit: CURRENT_LIMIT
},
type: 'get',
timeout: '5000',
dataType: 'json',
beforeSend: function() {
// Before send request
// Show the loader
AJAX_IS_RUNNING = true;
ShowLoaders();
},
complete: function() {
// When Sent request
// Hide the loader
AJAX_IS_RUNNING = false;
HideLoaders();
},
success: function(data, textStatus) {
AJAX_IS_RUNNING = false;
HideLoaders();
$('#livesearch').slideDown();

// clear the results
$(".livesearch_results dd").remove();
var resultsNav = $('.livesearch_results dt');

if( data['results'].length ) {

// add the new results (in reverse since the
// append inserts right after the header and not
// at the end of the result list
var current = resultsNav;
for(i=data['results'].length;i>0;i--) {
current.after(
DisplayResult(data['results'][i-1])
);
}
}
else {
resultsNav.after('<dd id=""><p>No articles found with these search
terms</p></dd>');
}

// Pagination at the bottom of LiveSearch panel
Pagination(data['paging'],".livesearch_navbody");

},

// We're gonna hide everything when get error
error: function(XMLHttpRequest, textStatus, errorThrown) {
AJAX_IS_RUNNING = false;
HideLoaders();
HideLiveSearch();
}
});

}

function DisplayResult(row) {
var output = '<dd id="">';
output += '<a href="' + row['link'] + '">';
output += '<p>';
output += '<b>' + row['title'] + '</b>';
output += row['summary'];
output += '</p></a></dd>';
return output;
}

function Pagination(p,selector) {

$(selector + " *").remove();

if(p['start_idx'] != undefined) {
var html = '<span class="livesearch_legend">' + p['start_idx'] + ' -
' + p['end_idx'] + ' of ' + p['total'] + ' Results</span>';
html += '<a class="livesearch_next" href="javascript:void(0);"
title="Next 5 Results"><em>Next</em></a>';
html += '<a class="livesearch_prev" href="javascript:void(0);"
title="Previous 5 Results"><em>Previous</em></a>';
html += '<div class="clearfix">&nbsp;</div>';

$(selector).append(html);
}
else {
var html = '<span class="kbls_legend">0 Results</span>';
html += '<a class="livesearch_next" href="javascript:void(0);"
title="Next 5 Results"><em>Next</em></a>';
html += '<a class="livesearch_prev" href="javascript:void(0);"
title="Previous 5 Results"><em>Previous</em></a>';
html += '<div class="clearfix">&nbsp;</div>';

$(selector).append(html);
}

$(selector + " .livesearch_next").click(function() {
NextPage(p);
});
$(selector + " .livesearch_prev").click(function() {
PrevPage(p);
});

}

function HideLiveSearch() {
$('#livesearch').slideUp();
$('#ajaxloader').fadeOut('fast');
}

$(document).ready(function() {
init();
});
-----------------------------------------


I'm really getting headache to debug this one. Could someone help?

No comments: