Solved

length error in Jquery code for search box in Internet Explorer

Posted on 2016-07-18
5
38 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

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
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)

688 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