1

Tried other threads with similar problems to no avail I'm kinda of stuck.

In the cartpage I want to hide the div with class .woocommerce-shipping-destination This should be shown, if any radio button other than the following is selected:

<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_local_pickup5" value="local_pickup:5" class="shipping_method" checked="checked">
<label for="shipping_method_0_local_pickup5">Hämta själv</label>
</li>

The problem I am facing is that now, the pickup is selected by default, which it shouldn't and the div is hidden. However, If i start chosing other radiobuttons, the div is shown and never hidden again. What am I doing wrong?

<?php
add_action( 'wp_head', function () { ?>
<script>


jQuery( document ).ready(function( $ ) {

    $('input[type="radio"]').click(function () {
        if ($(this).attr("value") == "local_pickup:5") {
            $(".woocommerce-shipping-destination").hide('slow');
        }
        if ($(this).attr("value") == "msunifaun_web-ta:6") {
            $(".woocommerce-shipping-destination").show('slow');
        }
    });

    $('input[type="radio"]').trigger('click'); // trigger the event
});
</script>
<?php } );

Has it something todo with the fact that the on-click the buttons are ajax-updated?

Erika Johansson
  • 187
  • 12
  • 1
    Could you create a working example of the problem? Your code seems to work: https://jsfiddle.net/jw5moqvc/1/ the only issue is that you trigger a click on *every* radio when the page loads, even the one which isn't checked by default. This may cause the initial problem. – Rory McCrossan Mar 20 '20 at 14:58
  • Also note that you should use the `change` event when working with radio buttons, although this won't cause the issue you describe, it's just good practice – Rory McCrossan Mar 20 '20 at 15:00
  • @RoryMcCrossan You are completely right! It IS working! Hmm, maybe it has todo with the fact that the cart-page where the radio buttons is updated through ajax (thus i can't make a working example). Maybe I should change it to hide on button click X radio button, else show? – Erika Johansson Mar 20 '20 at 15:05
  • 1
    Ah, if the radios are created dynamically using AJAX then you may need to use a delegated event handler: `$(document).on('change', 'input[type="radio"]', function() {...` – Rory McCrossan Mar 20 '20 at 15:07
  • @RoryMcCrossan Thank you, I think that is above my knowledge. Tried now to read the https://api.jquery.com/change/ but didn't become wiser. Could you give a example? – Erika Johansson Mar 20 '20 at 15:18
  • Sure, try this: https://stackoverflow.com/q/203198/519413 – Rory McCrossan Mar 20 '20 at 15:19
  • @RoryMcCrossan Made me dizzy haha. I tried the following, maybe I just don't understand the on.change function: `$(document).ready(function() { $('input:radio[id=shipping_method_0_local_pickup5]').change(function() { if (this.value == 'local_pickup:5') { alert("This will be hidden"); } else if (this.value == 'somethingelse') { alert("This will be shown"); } }); });` – Erika Johansson Mar 20 '20 at 15:39
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/210034/discussion-between-erika-johansson-and-rory-mccrossan). – Erika Johansson Mar 20 '20 at 22:09

0 Answers0