ReferenceError: display is not defined

Question

I got this 'ReferenceError: display is not defined' where my script link are as below.

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>

I replace them with latest version 1.11.1 and tried with

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

But still there is Reference Error. What should i change my display function(Script):

function display(view) {
  if (view == 'list') {
    $('.product-grid').attr('class', 'product-list');
    $('.product-list > div').each(function(index, element) {
        html = '<div class="left">';
        var image = $(element).find('.image').html();   
        if (image != null) { 
            html += '<div class="image">' + image + '</div>';
        }
        html += '<div class="mask hide-phone">';
        html += '  <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
        html += '  <div class="compare">' + $(element).find('.compare').html() + '</div>';
        html += '</div>';           
        html += '  <div class="name">' + $(element).find('.name').html() + '</div>';
        html += '  <div class="description">' + $(element).find('.description').html() + '</div>';
        var rating = $(element).find('.rating').html();         
        if (rating != null) {
            html += '<div class="rating">' + rating + '</div>';
        }
        var price = $(element).find('.price').html();       
        if (price != null) {
            html += '<div class="price">' + price  + '</div>';
        }
        html += '  <div class="cart">' + $(element).find('.cart').html() + '</div>';
        html += '  <div class="cart-phone show-phone hide-desktop hide-tablet">' + $(element).find('.cart-phone').html() + '</div>';            
        html += '</div>';
        $(element).html(html);
    });     
    $('.display').html(' <div id="list_b"></div>  <a id="grid_a" title="<?php echo $text_grid; ?>" onclick="display(\'grid\');"></a>');
    $.totalStorage('display', 'list'); 
    } else {
    $('.product-list').attr('class', 'product-grid');
    $('.product-grid > div').each(function(index, element) {
        html = '';
        var image = $(element).find('.image').html();
    if (image != null) {
            html += '<div class="image">' + image + '</div>';
        }
        html += '<div class="mask hide-phone">';
        html += '  <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
        html += '  <div class="compare">' + $(element).find('.compare').html() + '</div>';
        html += '</div>';
        html += '<div class="name">' + $(element).find('.name').html() + '</div>';
        html += '<div class="description">' + $(element).find('.description').html() + '</div>';
    var rating = $(element).find('.rating').html();
        if (rating != null) {
            html += '<div class="rating">' + rating + '</div>';
        }
        var price = $(element).find('.price').html();
        if (price != null) {
            html += '<div class="price">' + price  + '</div>';
        }
        html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
        html += '  <div class="cart-phone show-phone hide-desktop hide-tablet">' + $(element).find('.cart-phone').html() + '</div>';
        $(element).html(html);
    });                     
    $('.display').html(' <a id="list_a" title="<?php echo $text_list; ?>" onclick="display(\'list\');"><?php echo $text_list; ?></a> <div id="grid_b"></div>');
$.totalStorage('display', 'grid');
  }
 }
view = $.totalStorage('display');    
if (view) {    
    display(view);    
} else {    
    display('list');    
}

@Jai Nothing is there.. You can check on http://www.eklavya.in/pitara/index.php?route=product/search&search=bhopal — Piyush, Dec 16 '14 at 09:53
Read this answer http://stackoverflow.com/questions/7065120/calling-a-javascript-function-recursively#answer-7065175 about function recursively. You are trying to call function which doesn't exist yet. Btw you have infinite loop — bemol, Dec 16 '14 at 09:54
Dumping just this in a fiddle and mocking `$.totalStorage` doesn't error at all. You need to post more of your code, and probably create a [jsfiddle](http://jsfiddle.net/#) which shows the error occurring. — Rhumborl, Dec 16 '14 at 10:02

score 2 · Accepted Answer · answered Dec 16 '14 at 10:00

you can see that your conactenation is creating issues:
_{copied from the source of your link}

            html += '  
                     <div class="cart" >
                    ' + $(element).find('.cart').html() + '</div>';

at this line your div is having a newline character. may be this is caused by something else but you can do this:

    html += '  <div class="cart">' + $(element).find('.cart').html() + '</div>';
    html += '  <div class="cart-phone show-phone hide-desktop hide-tablet">' + $(element).find('.cart-phone').html() + '</div>';            
    html += '</div>';

here you can see html+=' <div>' this line is having a space before the div so you can remove it.

    html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
    html += '<div class="cart-phone show-phone hide-desktop hide-tablet">' + $(element).find('.cart-phone').html() + '</div>';            
    html += '</div>';

ReferenceError: display is not defined

1 Answers1