Highlight product row when qty box is the focus

[LHorton]

Hi all

I am using Business 12.0.2 with single add to cart button and Product list with Horizontal Dividers. I'm trying to highlight a table row in the product list when the qty box is the focus.

I have added

.highlightedRow { 
background-color: blue; 
}

to the current stylesheet, and I have tried adding:

<SCRIPT type="text/javascript">

$('input').focus(function() {
    $(this).parent().parent().addClass('highlightedRow');
});

$('input').blur(function() {
    $(this).parent().parent().removeClass('highlightedRow');
});

</SCRIPT>

to JavaScriptFunctions, but I get the error message "$" is undefined

Could anyone suggest what I am doing wrong, or perhaps, a better method of achieving this. I also need a way of restricting this to the Catalogue pages.

Thanks for any help.
Lee

[NormanRouxel]

That's a jQuery function. Have you loaded jQuery?

[LHorton]

Thanks for the pointer Norman. I've just tried adding:

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>

to the JavaScriptFunctions but still no good.

[LHorton]

also tried adding:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

but this stops the page content from displaying.

Is jquery built in to Sellerdeck?

[NormanRouxel]

jQuery is not built-in to SellerDeck.

also tried adding:

You need </script> at the end of that line.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

[LHorton]

oops.

Thanks Norman. I've added it - no error message now, but the rows are not highlighting.

[NormanRouxel]

The code you've added to Standard JavaScript Header functions will run as soon as it is loaded by the browser. I.e. while still parsing the HEAD area and long before there are any INPUT tags on the page.

Read a jQuery tutorial on how to use:-

$(document.ready)

E.g (untested).

<script type="text/javascript">
$(document).ready(function() {
	$('input').focus(function() {
	    $(this).parent().parent().addClass('highlightedRow');
	});

	$('input').blur(function() {
	    $(this).parent().parent().removeClass('highlightedRow');
	});
});
</script>

From now on it would be worth uploading and pointing us to a relevant page.

[LHorton]

Thanks again Norman - works a treat.

I am reconstructing my V11 site in V12, so have nothing uploaded at the moment, unfortunately; I will uploaded as soon as possible though.

I need to limit this effect to products using the "Tabular Product List" Layout only - but I'm thinking that maybe this can't be done.

[NormanRouxel]

And replacing all:

$('input')

with:

$("input[name^='Q_']")

Will only activate the code on Quantity fields.

[NormanRouxel]

To make it work only on Tabular Product List, edit said layout / Click here to edit list layout settings / Overall Design / End Of List. Append your entire JavaScript there (remove it from elsewhere) and it will now only run on pages using said layout.

[LHorton]

Brilliant! Thanks.

I've also added two more ".parent()"s so that the css is added to the table row of the "Tabular Product List" Layout instead of the " Product list with Horizontal Dividers". I get a single block of color this way, rather that seeing the padding/borders with no background color.

It's now working exactly as I want it. Thanks for your help.

the final code is:

<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22">
	<script type="text/javascript">
$(document).ready(function() {
	$("input[name^='Q_']").focus(function() {
	    $(this).parent().parent().parent().parent().addClass('highlightedRow');
	});

	$("input[name^='Q_']").blur(function() {
	    $(this).parent().parent().parent().parent().removeClass('highlightedRow');
	});
});
</script>
</actinic:block>

[NormanRouxel]

Happy to help.

Woot! The above was my 10,000th post.

[peblaco]

Congrats Norman.

[NormanRouxel]

Thanks Louise. Onwards to 20,000!

[Duncan Rounding]

Wow, well done Norman! 10000 very useful bits of information is a great achievement.