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
aehrenwoTechnology AnalystAsked:
Who is Participating?
 
RobConnect With a Mentor Owner (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
 
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
 
aehrenwoTechnology AnalystAuthor 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
 
aehrenwoTechnology AnalystAuthor Commented:
Thank you... got this to work
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.