No Comments

jQuery unresponsive script

How to add Details field for Custom option in magento admin?
Error while calling the phtml file in static block

Every time I load my shop in Firefox, I get an Unresponsive script error.

I know it is because I have a lot of products on my home page and the page takes a long time to load, so Firefox marks the script unresponsive.

Unresponsive script

Although it says here the the unresponsive script is ajax.googleapis.com/…/jquery.min.js, by looking at the console I think that actually the problem is in skin/frontend/theme/theme/js/app.js :

.each@https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js:2:2859
alignProductGridActions/https://shop.konstrukcionsbiro.mk/skin/frontend/rwd/default/js/app.js:1092:21
.each@https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js:2:2859
alignProductGridActions/<@https://shop.konstrukcionsbiro.mk/skin/frontend/rwd/default/js/app.js:1090:17
.each@https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js:2:2859
n.prototype.each@https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js:2:843
alignProductGridActions@https://shop.konstrukcionsbiro.mk/skin/frontend/rwd/default/js/app.js:1069:13
@https://shop.konstrukcionsbiro.mk/skin/frontend/rwd/default/js/app.js:1126:9
n.Callbacks/i@https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js:2:27146
n.Callbacks/j.fireWith@https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js:2:27914

The code this points to is:

if ($j('.products-grid').length) {

    var alignProductGridActions = function () {
        // Loop through each product grid on the page
        $j('.products-grid').each(function(){
            var gridRows = []; // This will store an array per row
            var tempRow = [];
            productGridElements = $j(this).children('li');
            productGridElements.each(function (index) {
                // The JS ought to be agnostic of the specific CSS breakpoints, so we are dynamically checking to find
                // each row by grouping all cells (eg, li elements) up until we find an element that is cleared.
                // We are ignoring the first cell since it will always be cleared.
                if ($j(this).css('clear') != 'none' && index != 0) {
                    gridRows.push(tempRow); // Add the previous set of rows to the main array
                    tempRow = []; // Reset the array since we're on a new row
                }
                tempRow.push(this);

                // The last row will not contain any cells that clear that row, so we check to see if this is the last cell
                // in the grid, and if so, we add its row to the array
                if (productGridElements.length == index + 1) {
                    gridRows.push(tempRow);
                }
            });

            $j.each(gridRows, function () {
                var tallestProductInfo = 0;
                $j.each(this, function () {
                    // Since this function is called every time the page is resized, we need to remove the min-height
                    // and bottom-padding so each cell can return to its natural size before being measured.
                    $j(this).find('.product-info').css({
                        'min-height': '',
                        'padding-bottom': ''
                    });

                    // We are checking the height of .product-info (rather than the entire li), because the images
                    // will not be loaded when this JS is run.
                    var productInfoHeight = $j(this).find('.product-info').height();
                    // Space above .actions element
                    var actionSpacing = 10;
                    // The height of the absolutely positioned .actions element
                    var actionHeight = $j(this).find('.product-info .actions').height();

                    // Add height of two elements. This is necessary since .actions is absolutely positioned and won't
                    // be included in the height of .product-info
                    var totalHeight = productInfoHeight + actionSpacing + actionHeight;
                    if (totalHeight > tallestProductInfo) {
                        tallestProductInfo = totalHeight;
                    }

                    // Set the bottom-padding to accommodate the height of the .actions element. Note: if .actions
                    // elements are of varying heights, they will not be aligned.
                    $j(this).find('.product-info').css('padding-bottom', actionHeight + 'px');
                });
                // Set the height of all .product-info elements in a row to the tallest height
                $j.each(this, function () {
                    $j(this).find('.product-info').css('min-height', tallestProductInfo);
                });
            });
        });
    }
    alignProductGridActions();

    // Since the height of each cell and the number of columns per page may change when the page is resized, we are
    // going to run the alignment function each time the page is resized.
    $j(window).on('delayed-resize', function (e, resizeEvent) {
        alignProductGridActions();
    });
}

So this is a loop that goes through the entire grid (I think), and considering there are 400+ products on the home page…well you know the math…

ANY ideas how to fix this? Breaking the loop with timers?…asynchronous loops?

Thanks in advance.

Related Posts

  • Magento 2: JS slider Swiper fails to load properly (0)
    I'm trying to use this jquery slider in my home page: http://idangero.us/swiper The problem is the next/prev buttons (arrows) dont work, I clic on them but nothing happens. They are supposed to display the next/previous slider. When inspecting element in Firefox, under Console tab […]
  • Adding jQuery doesn't seem to do anything (1)
    To add the jquery, plus my own file (main.js), I pasted this piece of code in my local.xml: <block type="core/text" name="google.cdn.jquery"> <action method="setText"> <text><![CDATA[<script […]
  • jquery not defined error in magento 2 (1)
    I am trying to bring banner scroll in magento2. I am using owl carousel for this purpose. Everything have done and implemented and is showing in firefox without any errors. But when checked in chrome, i found jquery not defined error. After some diggings, i found we need to use call […]
  • Magento2 add js files via requirejs (2)
    Been trying to figure out how to add some custom JS files with requirejs. I've been successful in adding them via default_head_blocks.xml, however... in doing so... they get loaded before the jquery script that magento2 uses... so I am wondering how I can use the requirejs to add a […]
  • Custom jQuery dont work (1)
    I've added some jQuery code to my magento shop, to be able to make tabs ind my short desciption on my products. But it dont work. My jQuery code $(document).ready(function(){ $(".contentMenuContent").css("display", "none"); $(".contentMenuContent:first").show(); […]
  • Magento 2 Join Product Name To Custom Grid DI Not working (1)
    I have an adminhtml custom grid that has a product_id that I need to join the product name to using this product id. I need to use dependency injection to load the attribute manager and store manager so I can do this. Here is the code in my Collection. I have marked ** will not load […]
  • Get page URL from current page, different store-view (2)
    I'm using different store-views to create different language versions of a shop. Now I'm trying to add links to the other pages. However, I can not find a way to get the actual URL from the other store, if the url of that page / product / category is changed for that store (in this […]
  • Grid Image Not Showing properly (1)
    I have used below code for Grid Products Image in shopping cart tab, Its showing same image in all products, Please help , Kindly check attached snap-shot for more detail. $this->addColumn('Image', array( 'header'=> Mage::helper('catalog')->__('Image'), […]
  • Custom Product Rating not working in home page (0)
    I have a custom product collection module. When I am on the module's frontname page. I can show all the products with the rating properly. But when I called this module via Home Page cms, I can see all the products but the rating is missing. What can be the problem? I checked console […]
  • How to make a simple ajax call in Magento 2.1.0 (1)
    I have added a simple button in one of my phtml file. <input type='button' name='emq_zip_btn' class='emq_zip_btn' value='Go'> I have added one custom js file ("emq.js") from a custom module (Ved_Mymodule) : require([ "jquery", "jquery/ui" ], […]
How to add Details field for Custom option in magento admin?
Error while calling the phtml file in static block

Be the first to post a comment.

Add a comment