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"> </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"> </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:
Post a Comment