Page 1 of 1
Chrome issues with jQuery.
Posted: Thu Dec 13, 2012 7:46 am
by social_experiment
I'm having a problem with chrome and jQuery. My code works perfectly in FF and IE (ironic hey) but in Chrome the same code doesn't work. Simplified snippet below
Code: Select all
<!doctype html>
<html lang="en" >
<head>
<meta charset="iso-8859-1" >
<title>Fails in chrome</title>
<script src="jquery-1.8.1.min.js" ></script>
<script>
jQuery(document).ready(function(){
//
jQuery('select#box option').click(function(){
//
var term = jQuery('select#box option:selected').val();
alert(term);
});
});
</script>
</head>
<body>
<form action="" method="post" >
<select name="box" id="box" >
<option value="A" >A</option>
<option value="B" >B</option>
</select>
</form>
</body>
</html>
I've tried a few of the suggestions i found online but i can't get it working using the existing code. Something i noticed is that if i change 'select#box option' to 'select#box' it works in chrome but then i don't get the value i need from the select dropdown menu
Thanks in advance
Re: Chrome issues with jQuery.
Posted: Thu Dec 13, 2012 11:32 am
by Christopher
That is strange. It give the error "Uncaught TypeError: Cannot read property 'href' of null chrome-extension://.../contentScript.js:1". Not sure what doesn't have the href property (the select certainly doesn't)?
Re: Chrome issues with jQuery.
Posted: Thu Dec 13, 2012 3:25 pm
by social_experiment
I checked the developer console in chrome but no error or warnings displayed; i'm using a very old (first) version of chrome so i wonder if that couldn't be the issue. Yes the errors doesn't seem to make any sense

Re: Chrome issues with jQuery.
Posted: Thu Dec 13, 2012 3:39 pm
by social_experiment
the code below seems to 'work' as i want it (retrieve the value for the chosen option);
Code: Select all
jQuery(document).ready(function(){
//
jQuery('select#box').on('change', function(){
//
var term = jQuery('select#box option:selected').val();
alert(term);
});
});
Re: Chrome issues with jQuery.
Posted: Thu Dec 13, 2012 10:24 pm
by Christopher
I have the latest Chrome and even tried jQUery 1.8.3 ... but still got the error. So it seems to works without the alert()?
Re: Chrome issues with jQuery.
Posted: Thu Dec 13, 2012 11:34 pm
by social_experiment
It seems problem lies with the 'select#box option' for chrome; if the 'option' is removed it echoes the selection but i found a problem with the script i pasted; if the first option is selected from the dropdown (A in this case) it doesn't display the alert message - only when selecting another option does the message display; the snippet below seems the most viable in terms of using the script in chrome
Code: Select all
//
jQuery('select#box').on('blur', function(){
//
var term = jQuery('select#box option:selected').val();
alert(term);
});
The snippet alerts the correct option but only after clicking elsewhere on the page; not so much a problem for me but it might annoy people using the script
Re: Chrome issues with jQuery.
Posted: Fri Dec 14, 2012 1:40 pm
by Christopher
Aren't the option:selected problem and the click() vs on('blur') difference separate issues?
Re: Chrome issues with jQuery.
Posted: Fri Dec 14, 2012 5:08 pm
by danwguy
using the really nested selectors usually isn't a good idea... and I don't mean $("div#test") I mean $("div#test .findme") The better usage would be $("div#test").find('.findme'). That said a simple solution to your problem is this...
Code: Select all
//I will be using $ as jQuery as it's easier to type
$("select#box").change(function() {
alert($(this).val());
});
There is no need to re-select everything once inside the change as you are already in the proper scope so $("select#box option:selected").val() is the same as $(this).val() only a whole lot slower as it has to re-query the dom to find it. not to mention if you are only alerting something there is no reason to store it in a variable first... it's just garbage collection.
Re: Chrome issues with jQuery.
Posted: Fri Dec 14, 2012 9:43 pm
by Christopher
Very interesting ... once you have selected the element then you don't need to re-select it to find its value -- you already have it.
Re: Chrome issues with jQuery.
Posted: Sat Dec 15, 2012 7:33 am
by social_experiment
Christopher wrote:Aren't the option:selected problem and the click() vs on('blur') difference separate issues?
no because the option:selected syntax causes the click and blur function/s not to work in chrome
danwguy wrote:There is no need to re-select everything once inside the change as you are already in the proper scope so $("select#box option:selected").val() is the same as $(this).val() only a whole lot slower as it has to re-query the dom to find it. not to mention if you are only alerting something there is no reason to store it in a variable first... it's just garbage collection.
thanks for the hint
Just a note on the code you posted: it works but your first value (A in this case) won't be displayed the first time the script is executed unless you have a 'placeholder' value as the first option. You'd need something like the snippet below for it to work; i think i'll go with this option if all else fails
Code: Select all
<select name="list" id="list" >
<option value="" >Choose option</option>
<!-- rest of the options -->
</select>