Tuesday, December 22, 2009

Re: [jQuery] Re: Autosuggest breaks in ie7/8

Sorry, but that's not right at all. There is no problem with using 'row' as a function parameter name in IE.

We're veering into Cargo Cult Programming here, but it's not your fault, MorningZ. The problem is that we can't see the actual code that's going wrong, so we're all reduced to guessing.

GJK, could you please post a link to a test page that demonstrates the problem? That's the only way we can see the real issue and offer useful advice.

-Mike

On Tue, Dec 22, 2009 at 6:50 PM, MorningZ <morningz@gmail.com> wrote:
IE has a really hard time with "reserved words" used as function names
and/or properties

try changing "row" to something else, even "Row" would be different
enough, as IE *might* be thinking you mean a table row

so instead of

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;

}

try

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

if that doesn't work, see if the value passed in is indeed a JSON
object

function DisplayResult(row) {
   $.each(row, function(key, val) {
      alert(key + ": " + val);
   });
}

if that doesn't work then you are not passing an object into the
function (perhaps it's a string?)



On Dec 22, 8:35 pm, GJK <gerlofva...@gmail.com> wrote:
> Ok thank you,
>
> Why does this code work in Firefox etc. And not in internet explorer
> 7/8.
>
> And how to fix this for internet explorer?
>
> Greatly appreciate it!
>
> On Dec 23, 1:38 am, MorningZ <morni...@gmail.com> wrote:
>
>
>
>
>
> > that means that "title" is not a valid property of the "row"
> > object....
>
> > On Dec 22, 5:46 pm, GJK <gerlofva...@gmail.com> wrote:
>
> > > The error was wrong, the good one from internet explorer:
> > > -----------------------------------------
> > > Line: 158
> > > Character: 2
> > > Code: 0
> > > Error Message: 'title' is null or not an object
> > > URL:http://localhost.com/js/search.js
>
> > > And it's coming from this function:
>
> > > -----------------------------------------
> > > 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;
>
> > > }
>
> > > On Dec 22, 9:53 pm, GJK <gerlofva...@gmail.com> wrote:
>
> > > > 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>';
>
> > > >      
>
> ...
>
> read more »

No comments: