• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 55
  • Last Modified:

length error in Jquery code for search box in Internet Explorer

I have the following jquery code on a web page that is referencing if there is any text in a search box. It is being identified by a input type reference.  

This code does NOT fail in Chrome or Firefox.

//on input search change check if it is blank - if blank hide table (all questions)

$(document).ready(function() {
$('#faq_table').on( 'search.dt', function () {
  if ($( "input[type='search']" ).val().length > 1) 
  {  
  $("#faqinfo").hide();
  $('#faq_table').show();
  }
  else
  {
  $("#faqinfo").show();
  $('#faq_table').hide();
  }     
});
}
);

Open in new window


I am getting the following error in IE11

SCRIPT5007: Unable to get property 'length' of undefined or null reference

Below is the portion of the webpage that references the various JS libraries that are also being used.

<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.js"></script>
<script type="text/javascript" src="../js/concur_faq.js"></script>
<script type="text/javascript" src="../js/jquery.SPServices-0.7.2.min.js"></script>
<script type="text/javascript" src="../js/json2.js"></script>
<script type="text/javascript" src="../js/datatables/jquery.dataTables-1.10.5.min.js"></script>
<script type="text/javascript" src="../js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>

Open in new window


Tried Googling this and none of the answers were specific to my issue.

Thanks,

Adam
0
aehrenwo
Asked:
aehrenwo
  • 2
  • 2
1 Solution
 
RobOwner (Aidellio)Commented:
Certainly looks like it's line 5 of your code above:

if ($( "input[type='search']" ).val().length > 1)

better to test it first:

var myLength = $( "input[type='search']" ).val() || [];

if (myLength.length > 1)
0
 
aehrenwoAuthor Commented:
It looks like IE for some reason doesn't recognize the reference to the input. Maybe because the type property isn't getting defined in IE right away? Again - this work without any issues Chrome and Firefox.  It also seemed to work OK when I had IE8 but now that I have upgraded on my work machine to IE11 this error appeared. Is there an alternate way to test why the value is not being picked up?

I tried code like this but the same error is appearing when I do that check.

 
//on input search change check if it is blank - if blank hide table (all questions)

$(document).ready(function() {
$('#faq_table').on( 'search.dt', function () {

var searchlength
if ($( "input[type='search']").val().length = null)
{
searchlength = 0; 
}
else
{
searchlength = $( "input[type='search']" ).val().length;
}
  
  if (searchlength > 1) 
  {  
  $("#faqinfo").hide();
  $('#faq_table').show();
  }
  else
  {
  $("#faqinfo").show();
  $('#faq_table').hide();
  }     
});
}
);

Open in new window

0
 
RobOwner (Aidellio)Commented:
You're assigning it to NULL :)
$( "input[type='search']").val().length = null

should be

$( "input[type='search']").val().length == null

But it REALLY should be:

//on input search change check if it is blank - if blank hide table (all questions)

$(document).ready(function() {
$('#faq_table').on( 'search.dt', function () {

var searchlength = $( "input[type='search']").val() || 0;
  
  if (searchlength > 1) 
  {  
  $("#faqinfo").hide();
  $('#faq_table').show();
  }
  else
  {
  $("#faqinfo").show();
  $('#faq_table').hide();
  }     
});
}
);

Open in new window

0
 
aehrenwoAuthor Commented:
Thank you... got this to work
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now