1

I've never really had an issue with JS in the past, but for some reason I can't seem to get some quite simple working!

In a nutshell, I have some radio buttons, and they're contained in DD tags a few levels back. I'm trying to style the DD tags depending on whether the radio button is selected or not.

Here is my HTML:

<dl class="sp-methods">
<dd>
<ul>
  <li>
    <input name="shipping_method" type="radio" value="freeshipping_freeshipping" id="s_method_freeshipping_freeshipping" checked="checked" class="radio">
    <label for="s_method_freeshipping_freeshipping"></label>
    <p class="shipping_method">Walk-In</p>
    <span class="price">£0.00</span>
  </li>
</ul>
</dd>
</dl>

The JS i'm trying to use is:

$('input').change(function () {
 if ($('dd ul li').find(':checked')) {
  $(this).parent().parent().addClass('selected');
 }
});

But when looking at the Inspector, the class doesn't seem to be adding at all. There are no errors regarding this bit of JS so i'm assumig it's being called okay.

It can be viewed at www.asg.co.uk/gadgetclinic (it's in the Checkout area with the two buttons saying Walk-in and Post area)

1 Answer 1

1

Your method actually works, but there are a few problems:

  • There isn't more than one ship method, so you can't fire the change event.
  • While your method is concise, it's not setting default state. That's why your selector isn't added on load.
  • Also in your method, on every radio button change, the browser has to re-query the DOM

I would rewrite it as such:

//cache the input selector
var $input = $('input');

//set default state
$(function () {
    //filtering cached selector is intentional - won't requery DOM
    $input.filter(':checked').closest('ul').addClass('selected');
});

//observe changes to the input element
$input.on('change', function () {
    $input.closest('ul').removeClass('selected');
    $(this).closest('ul').addClass('selected');
});

See my Fiddle in action:

http://jsfiddle.net/philwinkle/8VWfz/3/

5
  • Hmm still doesn't seem to work, when inspecting I'm seeing 'Uncaught TypeError: Cannot call method 'on' of null. If it helps, I've added a simple <script> to call the js file with just your code in the head.phtml file just under neath the call for getCssJsHtml. Is that right? It seems to load the file alright... Do I need to load any library before it? Oct 21, 2013 at 9:09
  • Just as an update, I've installed a Jquery extensions (Mygento) and its set to load etc. library is being called before this file, but the error has now changed to Object [object Object] has no method 'on'. Any ideas? Oct 21, 2013 at 10:22
  • Hello? Why is this not working? Oct 21, 2013 at 13:06
  • You are on the right track; jQuery needs to be installed and this code needs to be after jQuery. You need to add jQuery.noConflict() to your jQuery file. See this post for more details on that: magento.stackexchange.com/a/7217/336
    – philwinkle
    Oct 21, 2013 at 13:17
  • Hi, thanks for your help. I've added the steps in that link, and renamed $ to $j. No errors appear, and the file loads fine. (I've got an according working from jQueryUI, that works fine). But the class still isn't being added. Could you take a look at it again please? Oct 22, 2013 at 7:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.