Chrome issues with jQuery.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Chrome issues with jQuery.

Post 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
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Chrome issues with jQuery.

Post 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)?
(#10850)
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Chrome issues with jQuery.

Post 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 :|
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Chrome issues with jQuery.

Post 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);
		});
	});
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Chrome issues with jQuery.

Post 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()?
(#10850)
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Chrome issues with jQuery.

Post 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
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Chrome issues with jQuery.

Post by Christopher »

Aren't the option:selected problem and the click() vs on('blur') difference separate issues?
(#10850)
danwguy
Forum Contributor
Posts: 256
Joined: Wed Nov 17, 2010 1:09 pm
Location: San Diego, CA

Re: Chrome issues with jQuery.

Post 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.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Chrome issues with jQuery.

Post 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.
(#10850)
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Chrome issues with jQuery.

Post 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>
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
Post Reply