Freezing bootstrap according while creating from AJAX - javascript

Actually in my website i populate bootstrap according dynamically when an according is opened, once it has been open the data is saved.
The issue is that when i open the according for first time it's freezing (as it have to append a lot of divs) and that trigger me a lot, so i would know how should i make it more performable or like which approach should i take to prevent that freezing.
The AJAX method is build as the following:
function getBody(body, key) {
$.ajax({
type: "POST",
url: "casse.aspx/getBody",
data: JSON.stringify({ key: key }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
data = r.d;
data = $.parseJSON(data);
$.each(data, function (i, item) {
var piva = item.piva;
var desmag = item.desmag;
var via = item.via;
var loc = item.loc;
var servb2b = item.servb2b;
var idtrabb2b = item.idtrabb2b;
var matricola = item.matricola;
var azzer = item.azzer;
var mac = item.mac;
var vp = item.vp;
var vb = item.vb;
var dr = item.dr;
var vu = item.vu;
var cpu = item.cpu;
var rt = item.giart;
var datart = item.avviort;
var card = "";
card += '<div class="row ml-2 mr-2">';
card += '<div class="col">';
card += '<div class="row"><span class="badge badge-primary">Cliente</span></div>';
card += '<div class="row"><small class="text-muted">P.Iva</small></div>';
card += '<div class="row"><p class="info">' + piva + '</p></div>';
card += '<div class="row"><small class="text-muted">Info Negozio</small></div>';
card += '<div class="row"><p class="info">' + desmag + '</p></div>';
card += '<div class="row"><small class="text-muted">Via</small></div>';
card += '<div class="row"><p class="info">' + via + '</p></div>';
card += '<div class="row"><small class="text-muted">Localita</small></div>';
card += '<div class="row"><p class="info">' + loc + '</p></div></div>';
card += '<div class="col">';
card += '<div class="row"><span class="badge badge-primary">Software</span></div>';
card += '<div class="row"><small class="text-muted">VisualPos</small></div>';
card += '<div class="row">' + vp + '</div>';
card += '<div class="row"><small class="text-muted">VisualB2B</small></div>';
card += '<div class="row">' + vb + '</div>';
card += '<div class="row"><small class="text-muted">Driver</small></div>';
card += '<div class="row">' + dr + '</div>';
card += '<div class="row"><small class="text-muted">VisualUpdate</small></div>';
card += '<div class="row"><p class="info">' + vu + '</p></div></div>';
card += '<div class="col">';
card += '<div class="row"><span class="badge badge-primary">Fiscale</span></div>';
card += '<div class="row"><small class="text-muted">Matricola</small></div>';
card += '<div class="row"><p class="info">' + matricola + '</p></div>';
card += '<div class="row"><small class="text-muted">Azzeramento Fiscale</small></div>';
card += '<div class="row"><p class="info">' + azzer + '</p></div>';
card += '<div class="row"><small class="text-muted">RT</small></div>';
card += '<div class="row"><p class="info">' + rt + '</p></div>';
card += '<div class="row"><small class="text-muted">Data Avvio RT</small></div>';
card += '<div class="row"><p class="info">' + datart + '</p></div></div>';
card += '<div class="col">';
card += '<div class="row"><span class="badge badge-primary">Fatturazione Elettronica</span></div>';
card += '<div class="row"><small class="text-muted">Servizio B2B</small></div>';
card += '<div class="row"><p class="info">' + servb2b + '</p></div>';
card += '<div class="row"><small class="text-muted">Trasmittente B2B</small></div>';
card += '<div class="row"><p class="info">' + idtrabb2b + '</p></div></div>';
card += '<div class="col">';
card += '<div class="row"><span class="badge badge-primary">Hardware</span></div>';
card += '<div class="row"><small class="text-muted">CPU</small></div>';
card += '<div class="row"><p class="info">' + cpu + '</p></div>';
card += '<div class="row"><small class="text-muted">MAC</small></div>';
card += '<div class="row"><p class="info">' + mac + '</p></div></div></div>';
$(body).find('.card-body').append(card);
});
},
error: function (error) {
OnFailure(error);
alert('Error');
}
});
}
And called when the according is triggered
$('.accordion').on('show.bs.collapse', function (e) {
var id = $(e.target).attr('id');
var item = '#' + $(e.target).attr('id');
if ($(item).find('.card-body').is(':empty')) {
getBody(item, id);
} else {
}
});


You are going to need to manually trigger the toggle after the data has finished loading, and after you have put your data into the DOM. That means you need to remove the data-target value from your Collapse and manually add the event listener/handler. I wish that there was a pre/post collapse aspect that you could hook to, but there isn't.
Consider the example below that doesn't have the lag you experience.
$("#test-button").click(e => {
$.ajax({
url: "https://jsonplaceholder.typicode.com/todos",
dataType: "json"
}).done(d => {
$("#collapseOne .card-body").text(JSON.stringify(d
, null, 4));
$("#collapseOne").collapse("toggle");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button id="test-button" class="btn btn-link" type="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body"></div>
</div>
</div>
</div>

Related

I am struggling with two issues. I'm trying to add an #id to an html bootstrap card array via javascript

I'm attempting to build an array of bootstrap cards with json data fields populated inside of the cards. A few of the nested json fields aren't rendering (object Object error). This is the url for the json file which i've stored locally (https://jsonplaceholder.typicode.com/users). Additionally I'm attempting to add a unique #id to the card div so that I can manipulate it further (button actions).
What am I doing wrong?
Please be kind as I'm not great with jquery/javascript. This is my first attempt at an HTML array. thanks in advance all.
Screenshot
$(document).ready(function () {
userhtml = '<div class="container">';
userhtml += '<h1>Users</h1>';
$.each(valData, function (index, v) {
if (index % 3 === 0) {
userhtml += '<div class="row d-flex justify-content-left py-2">';
}
userhtml += '<div class="col-md-4">';
userhtml += '<div class="card m-3" id="">';
userhtml += '<h2 class="card-header bg-secondary bg-gradient">' + v["name"] + '</h2>';
userhtml += '<div class="card-body">';
userhtml += '<h3 class="card-title">' + v["username"] + '</h3>';
userhtml += '<p class="card-text">' + v["address"] + '</p>';
userhtml += '<button class="btn btn-secondary btn-remove">Delete</button>';
userhtml += '</div>';
userhtml += '</div>';
userhtml += '</div>';
if (index % 3 === 2 || index == (valData.length - 1)) {
for (var i = 0; i < 9; i++) {
}
userhtml += '</div>';
}
});
userhtml += '</div>';
userhtml += '<footer class="footer mt-auto py-3 bg-primary">';
userhtml += '<div class="container">';
userhtml += '<h2 class="text-light">© 2022 Dan Stump</h2>';
userhtml += '</div>';
userhtml += '</footer>';
$('body').append(userhtml);
var i = 1;
$("#user").appendTo(function () {
$("<div.card />", { "class": "card", id: "user" + i })
.append($("<div />", { type: "text", id: "user" + i }))
.append($("<div />", { type: "text", id: "property" + i }))
.appendTo("card");
i++;
});
});

Ok, so the object Object bit is because you're trying to append v["address"] to the output html, but address in the data is an object. For the sake of clarity I just added the street below, but you could concatenate together whatever properties of address you want. As an aside, you're using square bracket notation like v["address"]["street"] where this is easier to write using dot syntax which would be v.address.street.
The problem of adding id's, well Im not quite sure what you were doing there but its easy enough to add the unique id from the source data as a property on the div - again demonstrated below (although you'll have to inspect the HTML to see it).
const valData = [{"id":1,"name":"Leanne Graham","username":"Bret","email":"Sincere#april.biz","address":{"street":"Kulas Light","suite":"Apt. 556","city":"Gwenborough","zipcode":"92998-3874","geo":{"lat":"-37.3159","lng":"81.1496"}},"phone":"1-770-736-8031 x56442","website":"hildegard.org","company":{"name":"Romaguera-Crona","catchPhrase":"Multi-layered client-server neural-net","bs":"harness real-time e-markets"}},{"id":2,"name":"Ervin Howell","username":"Antonette","email":"Shanna#melissa.tv","address":{"street":"Victor Plains","suite":"Suite 879","city":"Wisokyburgh","zipcode":"90566-7771","geo":{"lat":"-43.9509","lng":"-34.4618"}},"phone":"010-692-6593 x09125","website":"anastasia.net","company":{"name":"Deckow-Crist","catchPhrase":"Proactive didactic contingency","bs":"synergize scalable supply-chains"}},{"id":3,"name":"Clementine Bauch","username":"Samantha","email":"Nathan#yesenia.net","address":{"street":"Douglas Extension","suite":"Suite 847","city":"McKenziehaven","zipcode":"59590-4157","geo":{"lat":"-68.6102","lng":"-47.0653"}},"phone":"1-463-123-4447","website":"ramiro.info","company":{"name":"Romaguera-Jacobson","catchPhrase":"Face to face bifurcated interface","bs":"e-enable strategic applications"}},{"id":4,"name":"Patricia Lebsack","username":"Karianne","email":"Julianne.OConner#kory.org","address":{"street":"Hoeger Mall","suite":"Apt. 692","city":"South Elvis","zipcode":"53919-4257","geo":{"lat":"29.4572","lng":"-164.2990"}},"phone":"493-170-9623 x156","website":"kale.biz","company":{"name":"Robel-Corkery","catchPhrase":"Multi-tiered zero tolerance productivity","bs":"transition cutting-edge web services"}},{"id":5,"name":"Chelsey Dietrich","username":"Kamren","email":"Lucio_Hettinger#annie.ca","address":{"street":"Skiles Walks","suite":"Suite 351","city":"Roscoeview","zipcode":"33263","geo":{"lat":"-31.8129","lng":"62.5342"}},"phone":"(254)954-1289","website":"demarco.info","company":{"name":"Keebler LLC","catchPhrase":"User-centric fault-tolerant solution","bs":"revolutionize end-to-end systems"}},{"id":6,"name":"Mrs. Dennis Schulist","username":"Leopoldo_Corkery","email":"Karley_Dach#jasper.info","address":{"street":"Norberto Crossing","suite":"Apt. 950","city":"South Christy","zipcode":"23505-1337","geo":{"lat":"-71.4197","lng":"71.7478"}},"phone":"1-477-935-8478 x6430","website":"ola.org","company":{"name":"Considine-Lockman","catchPhrase":"Synchronised bottom-line interface","bs":"e-enable innovative applications"}},{"id":7,"name":"Kurtis Weissnat","username":"Elwyn.Skiles","email":"Telly.Hoeger#billy.biz","address":{"street":"Rex Trail","suite":"Suite 280","city":"Howemouth","zipcode":"58804-1099","geo":{"lat":"24.8918","lng":"21.8984"}},"phone":"210.067.6132","website":"elvis.io","company":{"name":"Johns Group","catchPhrase":"Configurable multimedia task-force","bs":"generate enterprise e-tailers"}},{"id":8,"name":"Nicholas Runolfsdottir V","username":"Maxime_Nienow","email":"Sherwood#rosamond.me","address":{"street":"Ellsworth Summit","suite":"Suite 729","city":"Aliyaview","zipcode":"45169","geo":{"lat":"-14.3990","lng":"-120.7677"}},"phone":"586.493.6943 x140","website":"jacynthe.com","company":{"name":"Abernathy Group","catchPhrase":"Implemented secondary concept","bs":"e-enable extensible e-tailers"}},{"id":9,"name":"Glenna Reichert","username":"Delphine","email":"Chaim_McDermott#dana.io","address":{"street":"Dayna Park","suite":"Suite 449","city":"Bartholomebury","zipcode":"76495-3109","geo":{"lat":"24.6463","lng":"-168.8889"}},"phone":"(775)976-6794 x41206","website":"conrad.com","company":{"name":"Yost and Sons","catchPhrase":"Switchable contextually-based project","bs":"aggregate real-time technologies"}},{"id":10,"name":"Clementina DuBuque","username":"Moriah.Stanton","email":"Rey.Padberg#karina.biz","address":{"street":"Kattie Turnpike","suite":"Suite 198","city":"Lebsackbury","zipcode":"31428-2261","geo":{"lat":"-38.2386","lng":"57.2232"}},"phone":"024-648-3804","website":"ambrose.net","company":{"name":"Hoeger LLC","catchPhrase":"Centralized empowering task-force","bs":"target end-to-end models"}}]
$(document).ready(function() {
userhtml = '<div class="container">';
userhtml += '<h1>Users</h1>';
$.each(valData, function(index, v) {
if (index % 3 === 0) {
userhtml += '<div class="row d-flex justify-content-left py-2">';
}
userhtml += '<div class="col-md-4">';
userhtml += '<div class="card m-3" id="' + v["id"] + '">';
userhtml += '<h2 class="card-header bg-secondary bg-gradient">' + v["name"] + '</h2>';
userhtml += '<div class="card-body">';
userhtml += '<h3 class="card-title">' + v["username"] + '</h3>';
userhtml += '<p class="card-text">' + v["address"]["street"] + '</p>';
userhtml += '<button class="btn btn-secondary btn-remove">Delete</button>';
userhtml += '</div>';
userhtml += '</div>';
userhtml += '</div>';
if (index % 3 === 2 || index == (valData.length - 1)) {
for (var i = 0; i < 9; i++) {}
userhtml += '</div>';
}
});
userhtml += '</div>';
userhtml += '<footer class="footer mt-auto py-3 bg-primary">';
userhtml += '<div class="container">';
userhtml += '<h2 class="text-light">© 2022 Dan Stump</h2>';
userhtml += '</div>';
userhtml += '</footer>';
$('#output').append(userhtml);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="output"></div>

How to make webpage show specific database item?

I'm trying to make the website link such that when I click on the thumbnail, it will bring me to another page. However, the details will be displayed based on the itemID I get in browser.html. How do I do that?
My result just ended me up with ALL of database results. I have also done the getdetails function so it works. MySQL variables are .item at the back of the variable declaration. My route for the SQL is /details/:itemID
function displaythumbs()
{
var table = document.getElementById("DetailsTable");
console.log("details_array is => ", details__array)
table.innerHTML = "";
totalDetails = details_array.length;
for (var count = 0; count < totalDetails-1; count++)
{
var itemID = details_array[count].itemID;
var thumb = details_array[count].thumb;
var cell = '<div class="container-fluid>' +
'<div class="rightside" >' +
'<div class="right-left" style="margin-left:1%;">' +
'<a id="details" href="details.html">'+
'<img class="thumbstyle img-thumb" src=' +thumb+ ' />'+
'</a>'+
'</div>'+
'</div>' +
'</div>';
table.insertAdjacentHTML('beforeend', cell);
}
}
in my details.js
function displaydetails()
{
var table = document.getElementById("detailsTable");
table.innerHTML = "";
totalDetail = details_array.length;
for (var count = 0; count < totalDetail; count++)
{
var itemID = details_array[count].itemID;
var Hyperlink = details_array[count].HyperLink;
var name = details_array[count].itemName;
var ratings = details_array[count].Ratings;
var picture = details_array[count].picture;
var picture2 = details_array[count].picture2;
var cell = '<div class="overall">' +
'<div class="leftside"' +
'<div class="centertop">' +
'<h1 id="name"><u>' + name + '</u></h1>'+
'<div class="starratings" style="margin-right: 10%; margin-left: 10%; font-size:25px;">'+
'<span class="fa fa-star checked"></span>'+
'<span class="fa fa-star checked"></span>'+
'<span class="fa fa-star checked"></span>'+
'<span class="fa fa-star checked"></span>'+
'<span class="fa fa-star checked" style="margin-right: 1%;"></span>'+ratings+
'</div>'+
'<div class="visitwebsitelink" id="hyperlink">'+
'<a href='+Hyperlink +' />'+'<h3 style="color: black;"><u><i>Visit Website</i></u></h3>'+
'</a>'+
'</div>'+
'</div>'+
'<div class="fontstuff">'+
'Recent Reviews'+
'</div>'+
'</div>' +
'<div class="rightside">'+
'<div class="itemimg>'+
'<img src='+ picture + ' />'+
'<img src='+ picture2 + ' />'+
'</div>'+
'</div>';
table.insertAdjacentHTML('beforeend', cell);
}
}

Add third category view in prestashop

Most theme in prestashop have only 2 option to diplay product, list and grid I want to add third options in default-bootstrap theme prestashop v1.6, so at first I edit product-sort.tpl and add:
<li id="listsm">
<a rel="nofollow" href="#" title="{l s='Listsm'}">
<i class="icon-list"></i>{l s='Listsm'}
</a>
</li>
Next I edit global.js file and change function bindGrid() and function display(view) to this:
function bindGrid()
{
var view = $.totalStorage('display');
if (!view && (typeof displayList != 'undefined') && displayList)
view = 'list';
if (view && view != 'grid')
display(view);
else if (view && view != 'listsm')
display(view);
else
$('.display').find('li#grid').addClass('selected');
$(document).on('click', '#grid', function(e){
e.preventDefault();
display('grid');
});
$(document).on('click', '#list', function(e){
e.preventDefault();
display('list');
});
$(document).on('click', '#listsm', function(e){
e.preventDefault();
display('listsm');
});
}
function display(view)
{
if (view == 'list')
{
$('ul.product_list').removeClass('grid').addClass('list row');
$('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-4').addClass('col-xs-12');
$('.product_list > li').each(function(index, element) {
html = '';
html = '<div class="product-container"><div class="row">';
html += '<div class="left-block col-xs-2 col-xs-3 col-md-2">' + $(element).find('.left-block').html() + '</div>';
html += '<div class="center-block col-xs-7 col-xs-9 col-md-7">';
html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
var rating = $(element).find('.comments_note').html(); // check : rating
if (rating != null) {
html += '<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="comments_note">'+ rating + '</div>';
}
html += '<p class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';
//var colorList = $(element).find('.color-list-container').html();
//if (colorList != null) {
//html += '<div class="color-list-container">'+ colorList +'</div>';
//}
var availability = $(element).find('.availability').html(); // check : catalog mode is enabled
if (availability != null) {
html += '<span class="availability">'+ availability +'</span>';
}
var price = $(element).find('.content_price').html(); // check : catalog mode is enabled
if (price != null) {
html += '<div class="content_price col-xs-5 col-md-12">'+ price + '</div>';
}
html += '</div>';
html += '<div class="right-block col-xs-3 col-xs-12 col-md-3"><div class="right-block-content row">';
//var price = $(element).find('.content_price').html(); // check : catalog mode is enabled
//if (price != null) {
// html += '<div class="content_price col-xs-5 col-md-12">'+ price + '</div>';
//}
html += '<div class="button-container col-xs-7 col-md-12">'+ $(element).find('.button-container').html() +'</div>';
html += '<div class="functional-buttons clearfix col-sm-12">' + $(element).find('.functional-buttons').html() + '</div>';
html += '</div>';
html += '</div></div>';
$(element).html(html);
});
$('.display').find('li#list').addClass('selected');
$('.display').find('li#listsm').removeAttr('class');
$('.display').find('li#grid').removeAttr('class');
$.totalStorage('display', 'list');
}
else if (view == 'listsm')
{
$('ul.product_list').removeClass('grid list').addClass('listsm row');
$('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-4').addClass('col-xs-12');
$('.product_list > li').each(function(index, element) {
html = '';
html = '<div class="product-container"><div class="row">';
html += '<div class="left-block col-xs-2 col-xs-3 col-md-2">' + $(element).find('.left-block').html() + '</div>';
html += '<div class="center-block col-xs-7 col-xs-9 col-md-7">';
html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
var rating = $(element).find('.comments_note').html(); // check : rating
if (rating != null) {
html += '<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="comments_note">'+ rating + '</div>';
}
html += '<p class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';
//var colorList = $(element).find('.color-list-container').html();
//if (colorList != null) {
//html += '<div class="color-list-container">'+ colorList +'</div>';
//}
var availability = $(element).find('.availability').html(); // check : catalog mode is enabled
if (availability != null) {
html += '<span class="availability">'+ availability +'</span>';
}
var price = $(element).find('.content_price').html(); // check : catalog mode is enabled
if (price != null) {
html += '<div class="content_price col-xs-5 col-md-12">'+ price + '</div>';
}
html += '</div>';
html += '<div class="right-block col-xs-3 col-xs-12 col-md-3"><div class="right-block-content row">';
//var price = $(element).find('.content_price').html(); // check : catalog mode is enabled
//if (price != null) {
// html += '<div class="content_price col-xs-5 col-md-12">'+ price + '</div>';
//}
html += '<div class="button-container col-xs-7 col-md-12">'+ $(element).find('.button-container').html() +'</div>';
html += '<div class="functional-buttons clearfix col-sm-12">' + $(element).find('.functional-buttons').html() + '</div>';
html += '</div>';
html += '</div></div>';
$(element).html(html);
});
$('.display').find('li#listsm').addClass('selected');
$('.display').find('li#list').removeAttr('class');
$('.display').find('li#grid').removeAttr('class');
$.totalStorage('display', 'listsm');
}
else
{
$('ul.product_list').removeClass('list listsm').addClass('grid row');
$('.product_list > li').removeClass('col-xs-12').addClass('col-xs-12 col-sm-6 col-md-4');
$('.product_list > li').each(function(index, element) {
html = '';
html += '<div class="product-container">';
html += '<div class="left-block">' + $(element).find('.left-block').html() + '</div>';
html += '<div class="right-block">';
html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
var rating = $(element).find('.comments_note').html(); // check : rating
if (rating != null) {
html += '<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="comments_note">'+ rating + '</div>';
}
html += '<p itemprop="description" class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';
var price = $(element).find('.content_price').html(); // check : catalog mode is enabled
if (price != null) {
html += '<div class="content_price">'+ price + '</div>';
}
html += '<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="button-container">'+ $(element).find('.button-container').html() +'</div>';
var colorList = $(element).find('.color-list-container').html();
if (colorList != null) {
html += '<div class="color-list-container">'+ colorList +'</div>';
}
var availability = $(element).find('.availability').html(); // check : catalog mode is enabled
if (availability != null) {
html += '<span class="availability">'+ availability +'</span>';
}
html += '</div>';
html += '<div class="functional-buttons clearfix">' + $(element).find('.functional-buttons').html() + '</div>';
html += '</div>';
$(element).html(html);
});
$('.display').find('li#grid').addClass('selected');
$('.display').find('li#list').removeAttr('class');
$('.display').find('li#listsm').removeAttr('class');
$.totalStorage('display', 'grid');
}
}
Now on category page is display third view option but on click is only adding # to page url and redirect me to top of page. What am I missing?

Variables in string Jquery structure

I'm receiving the error
missing ; before statement
This is in reference to
var westvars += ''+ (i+1) +'. '+
el.
Any idea what may be going wrong. I've tried removing the line/reconstructing the line ect. I just can't seem to figure out what part of the string is using an incorrect syntax.
var westvars = '<div class="clear">';
westvars += '<div class="col-xs-2 teamname"><span>'+ (i+1) +'. '+ el.city +' '+ el.name +'</span>';
westvars += '</div>';
westvars += '<div class="col-xs-2 winsloss"><span>'+ el.wins +'-' +el.losses +'</span>';
westvars += '</div>';
westvars += '<div class="col-xs-2 gamesback">' + el.gback +';
westvars += '</div>';
westvars += '</div>';

Should be changed this way:
var westvars = '<div class="clear">';
westvars += '<div class="col-xs-2 teamname"><span>'+(i+1)+'. '+ el.city +' '+ el.name +'</span>';
westvars += '</div>';
westvars += '<div class="col-xs-2 winsloss"><span>'+ el.wins +'-' +el.losses +'</span>';
westvars += '</div>';
westvars += '<div class="col-xs-2 gamesback">' + el.gback + ' ';
westvars += '</div>';
westvars += '</div>';

ReferenceError: display is not defined

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');
}

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>';

Categories