jQuery Date Range Picker giving error in Google Chrome - javascript

I am using the jQuery Date Range Picker by the filament group.
My code is such that I'm dynamically creating a textbox or rather an AJAX query returns HTML of a form. When I dump the HTML onto my page I call a script that invokes the daterangepicker() function supposed to turn an inputbox into a date range picker.
My code works perfectly fine in Firefox and Internet Explorer, however it just dies in Google Chrome. The script doesn't run and I get this error in the logs:
Uncaught Error: INVALID_NODE_TYPE_ERR: DOM Range Exception 2
What could be the problem here? I really need to fix this - the exception is thrown within the core jQuery code. The date picker seems to work fine when I view the site demo.
You don't suppose it has something to do with being called to attach to an element that is created by an AJAX query at run time. Whatever the issue I need to get this working pronto and would appreciate any kind of help.

I had the same problem, and Chrome debugger notes the error is in the Jquery library version 1.3.2
I looked at the source for filaments daterangepicker demo page, and it turns out they are using jquery library 1.3.1
... src="js/jquery-1.3.1.min.js"
I ran a test using 1.3.1 instead of 1.3.2 and that worked for my site.
I recommend to test for browser and use 1.3.1 in the case that the user is using chrome.
All the Best,
Yehuda

several people report that this functionality is broken in Chrome. Maybe you should look out for alternatives.

Related

jQuery Datatable and range datepicker working in jsFiddle but not my website

I made a post about this a while back and never got a firm fix for this, so excuse my double posting.
I've got a jQuery DataTable and I've got my dates in the second column in MM-DD-YYYY format. I'm trying to get my date range picker to work with it, so my datatable only shows rows with dates within the range in the picker.
Poultry in Motion kindly made the jsFiddle for me with my code and it is working perfectly there. Although on my website, it isn't working. I've tried the exact same scripts as the fiddle has. Except my jquery is a different version. Even when I switch it to 3.2.1 I still get the same error as with 1.12.4.
The error is:
Uncaught TypeError: Cannot read property 'apply' of undefined
at HTMLInputElement. (jquery-ui.min.js:9)
at Function.each (jquery-1.12.4.min.js:2)
What could my problem be?
You seem to be using a mismatched version of either jQuery or more likely jQueryUI. Switch the version on your website to be the exact same as in the working jsFiddle.
Moving to a newer version of the libraries that is not the same as the working jsFiddle version is not an acceptable fix, you need to match the exact version to debug this issue.

IE 11 showing error when i clicking with jquery function

IE so much confusing me with some errors like this,
SCRIPT1002: Syntax error
File: jquery-2.1.4.min.js, Line:2 Column 2538
The weird thing is , on firefox and chrome running well and no error.
And some button with jquery click function is working.
I'm Using IE 11
Before this i'm using jquery-1.1.13.min.js and when i use jquery 2.0 it still running properly on firefox and chrome
I'm really new with cross browser so any info will helping me very much, thanks :)
For the record I had this error which only showed itself on IE when doing cross-browser testing of a big Javascript code change.
In my case the problem was a function definition which included what would be a default in any other language:
i.e. Function Foo(param1, param2, param3=false)
.. clearly this was a stupid bit of code .. but it took me a while to track down so this might help someone out there. Doesn't show up in Chrome, FF, or even Edge.
Mostly these errors are not problems of jQuery itself. The problem situates in code using jQuery or inserted into jQuery (callbacks or event functionalities). In my case I used $.ajax to load a remote page in a div element. In the page I loaded there where // comment tags in the javascript part. As IE is putting this content on one line, more code that as I wanted was commented and this created the error.
So if in our case us are using $.ajax maybe this can be an issue. Otherwise best thing to do is debugging the code that generates this error and look for code that is not supported by IE (the version you use). Look for functions passed trough to jQuery.

jQuery on scroll event not working

I'm trying to display an alert on chrome using jQuery 1.3.2 as follows:
$(window).scroll(alert("Hello"));
It worked a few times, but then I received an error after five scrolls saying: TypeError: Object 100 has no method 'apply'
So I changed it to the following: $(window).scroll(function(){alert("Hello")});
But this does nothing at all whatsoever. I am testing this on Chrome. Could anyone let me know what I'm doing wrong?
The second code snippet you posted is the correct syntax for assigning a function to run on an event. That code works properly when I test it with a current version of jQuery. jQuery 1.3.2 is five years out of date, so I'd hazard a guess the issue is with the crazily old jQuery version you're trying to use.

Changing javascript to jQuery first time Struts 1.3 application

I am changing the javascript in my project to jquery. This is the first time im using Jquery and expect me to be making silly mistakes please.
I placed a simple JQ alert function in a .js file which looks like below.
$(document).ready(function(){
$("#stt").change(function(){
alert("hi");
});
});
So the aim is to throw an alert msg when the value of a td element with id="stt" is changed.
<tr id="stttr">
<td id="stt"> <html:text property="stt" size="20" maxlength="20" style="height:12px; width: 180px;" /></td></tr>
and this is how im referencing jquery between the head tags of the jsp.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9/jquery.min.js"></script>
<script src="javascript/SearchPanelJQ.js"></script>
<script src="javascript/CalendarPopup.js"></script>
The Calendarpop.js is an older javascript file which i dont want to replace (it works fine on all browsers).
Now when i visit this page in a browser with script debugging enabled in IE, i get the following error .
HTML1201: localhost is a website you've added to Compatibility View.
ReportingTemplate.jsp
SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.
ReportingTemplate.jsp
SCRIPT5007: The value of the property '$' is null or undefined, not a Function object
SearchPanelJQ.js, line 1 character 1
The last line tells me something is not right with the setup. Can you tell me what?
I installed the jsdt jquery plugin and am using JQ v1.9.
The project is a struts project.
Edit:
1) It works when the JQ function is included in the jsp. it dosent work when its in a different .js file.
2) even if i include http:in the reference, it only works when the document.ready function is in the same JSP and not when it is in a different .js file. This beats the purpose as the same validations will be used in multiple pages in my project.
for future reference:
Run in Chrome (or any browser as other users have pointed out)
Right click > Inspect Element > Console
Read error logs (Console can provide js, php, and other errors to help pinpoint specific lines where the malfunction is happening)
Your
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9/jquery.min.js"></script>
should be
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9/jquery.min.js"></script>
The reason, provided by user2736012 is:
OP is using a "protocol relative" url, which automatically uses the protocol that was used for fetching the page. In this case, if the protocol is file://home/User/Desktop/foo.html, the protocol relative url becomes file://ajax.googlapis..., which of course won't work. But it'll work when fetching the page using http, because it'll then be http://ajax.googleapis...
I found the issue. I am referencing JQ version 1.9 because i read in a tutorial that it should automatically pick the latest version in the 1.9 series. It works if i change it to 1.9.0 or 1.9.1. However, i still dont understand why 1.9 didnt work. it should have picked the latest 1.9.* version.
But atleast by making it 1.9.1/0 it works from a .js file.
the link for library is right, check it here!
look at this line
SCRIPT5007: The value of the property '$' is null or undefined, not a Function object
SearchPanelJQ.js, line 1 character 1
Something wrong with this library or conflict occurred.

Could not complete the operation due to error 80020101 in IE

I am using jQuery 1.7.2 and lighbox in my website.
The HTML code which I want to load in lightbox is following:
//script type="text/javascript">
//jquery code
</script>
//html code..
While using firefox and chrome there is no problem while opening lightbox,
but while using IE it is displaying following error:
SCRIPT257: Could not complete the operation due to error 80020101.
jquery.min.js, line 2 character 11497..
When I change script type from text/javascript to text/html, lightbox opens fine but now javascript code doesn't work...
I have encountered this issue, as well. I have been using jQuery 1.7.2 and I am unable to get past this.
A solution was posted as being implemented in jQ 1.8.2, but that did not affect my results.
I changed my character encoding to UTF-8 (another suggestion I encountered), but that also did not help.
Eventually I rolled back to jQ 1.4.2 (the next previous version stored locally) and the problem went away. I know this isn't a "solution" but it's a workaround that got me back in the game and moving towards a deployable EAR.
You have a Javascript code that can't be correctly evaluated. I had exactly the same scenario and the solution was to change the name of an associative array key from class to "class" (this is only one example of evaluation error).
For more details, please see this answer

Categories

Resources