Solved

length error in Jquery code for search box in Internet Explorer

Posted on 2016-07-18
5
35 Views
Last Modified: 2016-11-10
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
Comment
Question by:aehrenwo
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 41717167
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
 

Author Comment

by:aehrenwo
ID: 41717230
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
 
LVL 43

Accepted Solution

by:
Rob earned 500 total points (awarded by participants)
ID: 41717298
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
 

Author Comment

by:aehrenwo
ID: 41723534
Thank you... got this to work
0

Featured Post

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
PHP Web Development 6 64
Building JSON/JQuery Results Display 11 51
GitHub 1 35
How to change normal array form to associative in javascript 1 22
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question