Different results for same jQuery code in chrome and Firefox - javascript

I can't figure out what the problem is. The following code works well in Chrome (v29) but not on firefox (v23):
// some test data
var serviceOptions = '<optgroup label="Domiciliary Care"><option value="1">Meals</option><option value="2">Personal Hygiene</option></optgroup><optgroup label="Live in Care"><option value="3">Housekeeping and Cleaning</option><option value="4">Assisted Mobility</option></optgroup>';
var cat = "Live in Care";
// escape illegal characters
var escaped_cat = cat.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/#])/g, "\\$1");
var options = $(serviceOptions).filter("optgroup[label='" + escaped_cat + "']").html();
var expectedOptions = '<option value="3">Housekeeping and Cleaning</option><option value="4">Assisted Mobility</option>';
// OK in Chrome, ERROR in FF
console.log(options == expectedOptions ? "OK" : "ERROR")
// passing the string directly instead of using a var works on FF
options = $(serviceOptions).filter("optgroup[label='Live\ in\ Care']").html();
console.log(options == expectedOptions ? "OK" : "ERROR")
The goal is simple as you can see: to filter a set of options by a specific optgroup.
You can test it by opening the jQuery website, opening the console and copy-paste the code.
Meanwhile if I discover something, I'll update this post.
UPDATE
Thanks for the feedback:
It seams that the problem is with the escaping of illegal characters, on firefox with jQuery 1.9.1. Either upgrading jQuery or not escaping the characters produces the expected results under Firefox.
Since upgrading jQuery is not an option for me, anyone knows what can be the problem with that escape regex?

Seems to be an issue with older versions of jQuery but not newer ones. Try updating your jQuery to 1.10
Not working old version of jQuery including migrate
1.9.1 JSFIDDLE
Working new version of jQuery
1.10.1 JSFIDDLE
the jQuery main site is running an older version of jQuery by the way

Related

Get table row object inside javascript function - DHTMLX

We are doing cross browser compatibility for an application which was built over 8 years ago. The app works only in IE. Now we are making it work in Chrome too. The application had used 1.5 version of DHTMLX. Now we have replaced it to version 3.5. After upgradation to 3.5, we are having some issues. At some places, we are getting NULL values in Chrome when debugged in the console.
For example, we have this below function. On click of a DHTMLX grid checkbox, this function is called.
var glbGroupId=null;
function setRowCellVals(){
if(arguments[0]!=null){
radioFlag = true;
src=$(arguments[0]);
if(!glbCheckAction){
if(src.childNodes[0].childNodes[0].checked){
src.childNodes[0].childNodes[0].checked=false;
}else{
src.childNodes[0].childNodes[0].checked=true;
}
}
glbCheckAction = false;
glbGroupId=src.childNodes[0].childNodes[0].value;
document.manageKpiGroupForm.parent_GId.value = src.id;
document.manageKpiGroupForm.parent_Gname.value = src.childNodes[1].innerHTML;
document.manageKpiGroupForm.parent_mId.value = $F('moduleCmb');
document.manageKpiGroupForm.parent_mName.value = src.childNodes[3].innerHTML;
document.manageKpiGroupForm.parent_gDesc.value = src.childNodes[4].innerHTML;
moduleRowId=arguments[0];
return true;
}
}
In Chrome, the src is being rendered as NULL. We checked the same function in IE, in another copy which has the older version of DHTMLX, the src value comes as [object DispHTMLTableRow] in the IE console. Any idea how to resolve this?
Thanks.
Unfortunately, the reason of the issue cannot be found with the provided code.
Please provide with a more detailed sample or with the link to the demo, where the problem can be reconstructed.

html().split() not working in Chrome/IE but working perfectly in Firefox

I have a line in my jsp that is not working in Chrome and IE but works in Firefox:
var readInnerHtml = $(rowElement).html().split('<input class="')[1];
Its becomes undefined when my application runs in Chrome or IE. Can anyone help in this?
My actual function is:
function rowAdded(rowElement) {
$(rowElement).find("input").not('input[type=hidden]').not('input[type=checkbox]').val('');
$(rowElement).find('input[type=hidden]').val(0);
var ele = $(rowElement).find('input[type=checkbox]');
var indexString = $(rowElement).html().split(']')[0];
var readInnerHtml = $(rowElement).html().split('<input class="')[1];
var checkForOutputDef = readInnerHtml.split('"')[0];
............
}
here i observed one thing that split('....') working in both browsers but split('....').[1] working in only firefox but not in chrome can any one describe me what i must do now??
Reposting my comment for formatting
Do not try to parse HTML. Look in the console for what Chrome actually uses - for example the quotes may be single instead of double or the tag uppercase. Use className = ele.attr('class'); or .prop("class")
function rowAdded(rowElement) {
$(rowElement).find("input").not('input[type=hidden], input[type=checkbox]').val('');
$(rowElement).find('input[type=hidden]').val(0);
var checkForOutputDef = $(rowElement).find('input[type=checkbox]').attr("class");
}

jQuery modal is not working in latest version and event.returnvalue is deprecated error

I am using a javascript function for some sort of validation,
EDIT
I made an edit to below function with exact piece of code that works in firefox but not in chrome and gives below errors,
function check_time () {
var start_time = $("#start_time select").val();
var end_time = $("#end_time select").val();
var stt = new Date("November 24, 2013 " + start_time);
stt = stt.getTime();
var endt = new Date("November 24, 2013 " + end_time);
endt = endt.getTime();
if(stt > endt || stt == endt) {
$('#popup_box').show();
return false;
} else {
$('#popup_box').hide();
return true;
}
}
This works absolutely fine in Firefox, but in Chrome, I got an error, and my script doesn't execute:
event.returnvalue is deprecated. please use the standard event.preventdefault() instead
I followed this link,
I changed my jQuery version to 1.10.2 and also tried with 2.0.3.
Still won't work in chrome, and by using this, jQuery modal fails to load except of screen size overlay, and console shows this error..
c.browser is undefined // line 396 in my jquery-ui-1.8.12.custom.min.js version
my jQuery and css files are:
<link rel="stylesheet" href="<?=base_url()?>public/css/jquery-ui-1.8.12.custom.css" type="text/css" />
<script type="text/javascript" src="<?=base_url()?>public/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="<?=base_url()?>public/scripts/jquery-ui-1.8.12.custom.min.js"></script>
Please guide me to resolve these two issues below,
if i use 1.7.1 that I was previously using, modal works fine, but I got chrome error.
if i use 1.10.2 or latest version of jQuery to get rid of Chrome error, I face both "chrome" error and "modal" error
The issue related to e.returnValue is a warning not an error.
The main problem is jQuery ui 1.8.* which uses features that were removed in jQuery 1.9.
Use jQuery migration plugin for backward compatibility if you can't upgrade jQuery ui

Cannot access document's title element with jQuery (IE 8)

I'm seeing this issue in Internet Explorer 8, but not in Safari or Firefox. So far, I have not tested in other IE versions.
I am developing my own jQuery plugin and, for this question, I've stripped it down to the two relevant lines.
In IE 8, using the code below, $('title').text() does not do anything. docTitle is blank because title is blank, as if the jQuery selector for <title>, $('title') is not working. (Again, AFAIK, this is just in IE 8)
(function ($) {
$.fn.myPlugin = function (options) {
var title = $('title').text(),
docTitle = escape(title);
};
})(jQuery);
http://jsfiddle.net/sparky672/YMBQ2/
However, using the plain JavaScript code below, document.title is working fine in everything including IE 8...
(function ($) {
$.fn.myPlugin = function (options) {
var docTitle = escape(document.title);
};
})(jQuery);
EDIT:
It does not matter that this code is inside a plugin.
Same result in IE 8 with this...
$(document).ready(function () {
var title = $('title').text();
alert(title);
});
Just to clarify, I am not insisting on using this. In fact, I fixed my plugin by simply using document.title instead. If it wasn't clear initially, I'm just asking why this does not work in IE 8.
Can anyone explain why, or what stupid mistake I may have made here?
EDIT 2:
Here are some jQuery Bug reports on this issue
http://bugs.jquery.com/ticket/7025
http://bugs.jquery.com/ticket/5881
http://bugs.jquery.com/ticket/2755
And dozens of others reporting the same thing. The official response is to state, "document.title is the only reliable cross-browser way and should be used instead" and the Ticket is closed. So there you go.
I guess jQuery iterates over all TextNodes and concatenates its nodeValue. IE stores this value differently than other browsers.
var title = document.getElementsByTagName('title')[ 0 ];
title.firstChild // This would be the Text-Object with the characterdata of the title
// Firefox: [object Text]
// IE: null
This should be the reason you cannot get the textContent with jQuery.text(). title.text seems to be cross browser comp. I only tested it in IE 7 and Firefox 3.6 but you can check the other browser if you like. But why not using document.title?
try using $('title').html() which should work in all browsers

IE 8 (ONLY) crashes with JavaScript / jQuery calls to plugins

I'm in need of some help.
I'm building a team bio page it keeps crashing IE8 when I call jQuery plugins.
I'm not sure what is going on and can't even run the IE debugger because it crashes so hard.
Any IE8 / jQuery experts out there willing to take a look and offer some help?
Here is the main team page. Clicking through to any of the links causes the crash in IE8.
I am using:
jQuery Tagsphere, AnythingSlider, and jQuery Cycle.
Thanks in advance for any insight into this.
I had a similar problem, most notably closing iframes with IE8. Stumbled across the following code in jquery-1.6.2, which was intended to solve problems with document.domain. Some comments on the web lead me to believe this was a recent problem. Dropped back to jquery-1.4.4 and the problem was resolved.
CODE SEGMENT FROM JQUERY-1.6.2 FOLLOWS:
// #8138, IE may throw an exception when accessing
// a field from window.location if document.domain has been set
try {
ajaxLocation = location.href;
} catch( e ) {
// Use the href attribute of an A element
// since IE will modify it given document.location
ajaxLocation = document.createElement( "a" );
ajaxLocation.href = "";
ajaxLocation = ajaxLocation.href;
}

Categories

Resources