questions

Jquery hide() working on selct input but not on div (WP)

Rate this post

I have written a script to hide/show a select input depending on choices on radio input. The script is working fine but next I changed my mind and decided to hide all the div included the select input (which was before showing/hiding well)… And it’s not working.. I tried to put back the select input instead of the did and it worked again… I’m pretty sure there’s no error in my code as I consol.log the values and made differents tests.So I’m starting to think that it is due to something ion wordpress but I can’t find out what.

Here is the php code :

 

<script>
            jQuery(document).ready(function($){
                    for (var i=0; i<vendorIds.length; i++) {
                        var vendorId = vendorIds[i];
                        var ism = 'input[name^="shipping_method['+vendorId+']"]', ismc = ism+':checked',
                        b = '#livraison['+vendorId+']',
                        livraison = 'Livraison:1';
                        
                        // When shipping method is changed (Live event)
                        $( 'form.checkout' ).on( 'change', ism, function(e) {
                            var name = e.currentTarget.name;
                            var dataValue = $('input[name ="'+name+'"]').attr('data-index');
                            var b = '#livraison['+dataValue+']';
                            var ismc = 'input[name^="shipping_method['+dataValue+']"]:checked';
                            var livraison = 'Livraison:1';
                            if( $(ismc).val() == livraison )
                            {
                                $(b).show();
                                console.log(b);
                                console.log(name);
                            }
                            else
                            {
                                $(b).hide();
                            }
                        });
                        
                        
                        // Initializing at start after checkout init (Based on the chosen shipping method)
                        setTimeout(function(){
                            $( "input.shipping_method:radio" ).each(function() {
                                var name = $(this).attr("name");
                                var dataValue = $('input[name ="'+name+'"]').attr('data-index');
                                var b = '#livraison['+dataValue+']';
                                var ismc = 'input[name^="shipping_method['+dataValue+']"]:checked';
                                var livraison = 'Livraison:1';
                                if($(this).is(':checked'))
                                {
                                    if( $(this).val() == 'Livraison:1' ) // Choosen "retrait sur place" (Hidding "Take away")
                                    {
                                        $(b).show();
                                        console.log(b);
                                    } else
                                    {
                                        $(b).hide();
                                        console.log(dataValue);
                                    }
                                }
                            });
                        }, 100);
                    }
            });
</script>
      echo'<div class="livraison unset-display" id="livraison['.$vendor_id.']">';
            echo '<h3 class="unset-display" id="livraison-title['.$vendor_id.']">Livraison</h3>';
            echo '<label class="unset-display">'.$field_label.' : </label>';
            echo '<select class="unset-display" id="'.$field_id.'" name="'.$field_id.'">';
            foreach($time_slots as $time_slot){ 
                if ( $time_slot == "Choisissez votre horaire de livraison" ) {
                    echo '<option value="">' .$time_slot. '</option>';
                } else{
                    echo '<option value="' .$time_slot.'">' .$time_slot. '</option>';
                }
            }
            echo '</select>';
            echo'</div>';

The script is working when the “b” value is set to ” b = ‘#wcfmd_delvery_time_’+dataValue; ” but not when it’s set to var ” b = ‘#livraison[‘+dataValue+’]’; ”

Couls domeone help me it’s driving me crazy.

Thanks in advance.

 

✔️Solution:

Just remove [] from ID attribute of the DIV. That confuses jQuery and your code doesn’t work. It should be like this:

  echo '<div class="livraison unset-display" id="livraison_'.$vendor_id.'">';

and then, in JS code

 var b = '#livraison_'+dataValue;

Leave a Reply

Your email address will not be published.

Back to top button