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)

Teja Bhagavan Kollepara
  • 3,816
  • 5
  • 32
  • 69
Lee Collings
  • 85
  • 3
  • 11

1 Answers1

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/

philwinkle
  • 35,751
  • 5
  • 91
  • 145
  • 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 – Lee Collings Oct 21 '13 at 09: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? – Lee Collings Oct 21 '13 at 10:22
  • Hello? Why is this not working? – Lee Collings Oct 21 '13 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: http://magento.stackexchange.com/a/7217/336 – philwinkle Oct 21 '13 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? – Lee Collings Oct 22 '13 at 07:49