0

Referring to my question here: Magento 2 Add custom tab to product details page conditionally

As suggested in the answer, I am trying to hide the custom tab if response is "No Data to display!".

Here is my code:

jQuery(document).ready(function(e){
                        var me = $(this);
                        if ( me.data('requestRunning') ) {
                            return;
                        }
                        me.data('requestRunning', true);
                        //$(document).on('click', '#tab-label-nutrition', function() {
                                    var customurl = "<?php echo $this->getUrl('nutrition/nutrition/index') ?>";
                                    var currentSku1 = '<?php echo $currentSku; ?>';
                                    if(currentSku1 && $(".nutritionFactsContent").children().length == 0){
                                            $.ajax({
                                                    url: customurl,
                                                    type: 'POST',                       
                                                    dataType: 'html',
                                                    showLoader: true,
                                                    data: {
                                                            sku: currentSku1,                    
                                                    },
                                                    complete: function(responseData) {
                            if (responseData.responseText == 'No Data to display!') {
                                jQuery('#tab-label-nutrition').hide();
                            } else {
                                alert('hi');
                                jQuery('#tab-label-nutrition').css('display', 'inline-block');
                            }
                            $('.nutritionFactsContent').append(responseData.responseText);
                            console.log('ajax completed');
                            me.data('requestRunning', false);
                        },
                        error: function (xhr, status, errorThrown) {
                            console.log('Error happens. Try again.');
                        }
                    });
                }
                //});//click event
            });

This works well on desktop. However does not work on mobile devices. The alert in the else part is executed though just the css is not applied.

Any help would be appreciated!

  • Please try with another CSS property, to just confirm – Keyur Shah Aug 29 '17 at 11:14
  • Yes I mean try to apply another css(like background color or color) in mobile device to just confirm like jQuery('#tab-label-nutrition').css('background-color', 'red'); , if its works for you not – Keyur Shah Aug 29 '17 at 11:19
  • I figured out something. I have 2 different divs for desktop and mobile view. (desktop-details and mobile-details respectively) The css is applied for the first occurrence of #tab-label-nutrition i.e div under desktop-details – Sejal Shah Aug 29 '17 at 11:26
  • okay, then just find the proper element for the mobile and apply your css – Keyur Shah Aug 29 '17 at 11:27
  • That did the trick. Added jQuery('.mobile-detail #tab-label-nutrition').css('display', 'inline-block'); However I don't understand why this did not work jQuery('#tab-label-nutrition').css('display', 'inline-block'); – Sejal Shah Aug 29 '17 at 11:41
0

As per the comments above , In mobile view Id can be change of the element so try to add another css property into element and check, it will help you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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