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>';
Related
My code is working properly on liveserver, but when I merge on github and open using github pages both conditionals "if" dont work at all. It's something that should be apllied on all pages.
This is how I load on HTML
<head>
<script src="./JS/header.js" defer></script>
</head>
<body>
<header id="header"></header>
This is the JS code:
function insertHeader(){
var codeBlock1 = '<div class="container">' +
'<img class="logo" src="./assets/logo.jpeg" alt="logo página">' +
'<div class="menu-section">' +
'<div class="container-menu">' +
'<input type="checkbox" id="checkbox-menu" />' +
'<label class="menu-button-container" for="checkbox-menu">' +
'<span></span>' +
'<span></span>' +
'<span></span>' +
'</label>' +
'<nav>' +
'<ul class="menu">' +
'</ul>' +
'</nav>' +
'</div>' +
'</div>' +
'</div>';
document.querySelector("#header").innerHTML += codeBlock1;
const urlAtual = window.location.pathname.substring(1);
if (urlAtual !== 'index.html'){
var codeBlockHome = '<li>' +
'Home' +
'</li>';
document.querySelector(".menu").innerHTML += codeBlockHome;
};
var codeBlockLocais =
'<li>' +
'Locais' +
'<ul class="submenu-locais">' +
'<li>Pontos Turísticos</li>' +
'</ul>' +
'</li>';
document.querySelector(".menu").innerHTML += codeBlockLocais;
if (urlAtual !== 'team.html'){
var codeBlockTeam = '<li>' +
'Equipe' +
'</li>';
document.querySelector(".menu").innerHTML += codeBlockTeam;
};
var codeBlockContato = '<li>' +
'Contato' +
'</li>';
document.querySelector(".menu").innerHTML += codeBlockContato;
for (i=0; i< estados.length; i++){
estadosNome[i] = estados[i].slice(0, -5);
estadosSigla[i] = estados[i].split(' ').pop();
var codeBlock2 = `<li>${estadosNome[i]}</li>`;
document.querySelector(".submenu-locais").innerHTML += codeBlock2;
}};
insertHeader();
Only "ifs" dont work, and I already solved this problem with CSS. But I'm still curious to why it worked on liveserver and not on github pages.
I have this error when selecting more than one values like this:
https://lh3.googleusercontent.com/-D1oucKVR7rA/W0_PM1Po-9I/AAAAAAAAAjU/pWAGZCFY8cg6nHK6ALTWwSvZ38QdmsiqQCL0BGAYYCw/h544/2018-07-18.png
https://lh3.googleusercontent.com/-jC8w5UQTKvg/W0_PNj03yJI/AAAAAAAAAjU/JBTRKBdb0_Eha5-yhVJa5F9F8B1PfY6lACL0BGAYYCw/h314/2018-07-18.png
It shows only the first one checkbox.
A piece of code:
for (i in json['shipping_method']) {
html += '<p><strong>' + json['shipping_method'][i]['title'] + '</strong></p>';
if (!json['shipping_method'][i]['error']) {
for (j in json['shipping_method'][i]['quote']) {
html += '<div class="radio">';
html += ' <label>';
if (json['shipping_method'][i]['quote'][j]['code'] == '<?php echo $shipping_method; ?>') {
html += '<input type="radio" name="shipping_method[]" value="' + json['shipping_method'][i]['quote'][j]['code'] + '" checked="checked" />';
} else {
html += '<input type="radio" name="shipping_method[]" value="' + json['shipping_method'][i]['quote'][j]['code'] + '" />';
}
html += json['shipping_method'][i]['quote'][j]['title'] + ' - ' + json['shipping_method'][i]['quote'][j]['text'] + '</label></div>';
}
} else {
html += '<div class="alert alert-danger">' + json['shipping_method'][i]['error'] + '</div>';
}
}
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?
I am using AJAX and Jquery to load a json object into my web page. It works great however 50-70% of the time it loads in the json data to my page twice, it appends the second set of data to my page, is there a good way to ensure that my data only loads once?
my initial thought was to make the json call synchronous instead of asynchronous but that doesn't sound right, is there a better way of doing it?
$('#myResource').click(function() {
$.getJSON("data/preachers.json", function(result) {
$.each(result, function(i, field) {
$("#preachers").append( function() {
var preacher = '<div class="box box1">';
preacher += '<div class="image">';
preacher += '<a href=' + '"' + (field.link) + '"' + ' target="_blank">';
preacher += '<img src= "img/resources/' + (field.image) + '" alt="' + (field.name) + '" class="resource_image">';
preacher += '</a>';
preacher += '</div>'; //class = image
preacher += '<div class="text">';
preacher += '<p><h2>' + (field.name) + '</h2>';
preacher += (field.details) + '</p>';
preacher += '</div>'; //class=text
preacher += '</div>'; //class=box
return preacher;
});
});
});
});
Try
$('#myResource').unbind('click').click(function(){
})...
try to disable a button after click
$('#myResource').click(function() {
$('#myResource').prop('disabled' , true); //<<<<<<<<<<<<<<<< here
$.getJSON("data/preachers.json", function(result) {
$.each(result, function(i, field) {
$("#preachers").append( function() {
var preacher = '<div class="box box1">';
preacher += '<div class="image">';
preacher += '<a href=' + '"' + (field.link) + '"' + ' target="_blank">';
preacher += '<img src= "img/resources/' + (field.image) + '" alt="' + (field.name) + '" class="resource_image">';
preacher += '</a>';
preacher += '</div>'; //class = image
preacher += '<div class="text">';
preacher += '<p><h2>' + (field.name) + '</h2>';
preacher += (field.details) + '</p>';
preacher += '</div>'; //class=text
preacher += '</div>'; //class=box
return preacher;
});
$('#myResource').prop('disabled' , false); //<<<<<<<<<<<<<<<<<<<<<<< here
});
});
});
with the help of some of the comments, the answer ended up being that i needed to unbind click at the beginning of the function, and leaving it unbound:
$('#myResource').click(function() {
$( "#myResource").unbind( "click" );
$.getJSON("data/preachers.json", function(result) {
$.each(result, function(i, field) {
console.log('load everything');
$("#preachers").append( function() {
var preacher = '<div class="box box1">';
preacher += '<div class="image">';
preacher += '<a href=' + '"' + (field.link) + '"' + ' target="_blank">';
preacher += '<img src= "img/resources/' + (field.image) + '" alt="' + (field.name) + '" class="resource_image">';
preacher += '</a>';
preacher += '</div>'; //class = image
preacher += '<div class="text">';
preacher += '<p><h2>' + (field.name) + '</h2>';
preacher += (field.details) + '</p>';
preacher += '</div>'; //class=text
preacher += '</div>'; //class=box
return preacher;
});
});
});
});
I am using the following code to present products that comes from an ajax response. My issue is that the table has many products with the same image. So I would like to find all the products with the same rec.Photo . Then I will present on one row the image and say that “we have variant of similar products click on the photo to see more… “
My issue is :
a)how I can find all the products with the same photo
b)how can I present on one row “see more similar products…” without destroy the loop
$.each(response, function (i, rec) {
if (i > 0) {
strproductlist += '<div class="gridItem listView">';
strproductlist += ' <div class="gridItemContent">';
strproductlist += '<div class="productPhoto">';
strproductlist += '<a title="' + rec.ProductName + '" href="ProductDetails.aspx?productid=' +
rec.ProductID + '">';
strproductlist += '<img alt="' + rec.ProductName + '" src="' + rec.Photo + '">';
strproductlist += '</a>';
strproductlist += '</div>';
strproductlist += '<div class="listViewProductDet">';
strproductlist += '<h2>';
strproductlist += '<a title="" href="ProductDetails.aspx?productid=' + rec.ProductID + '">' +
rec.ProductName + '</a>';
strproductlist += '</h2>';
strproductlist += '<p class="productCode">' + rec.ProductCode + '</p>';
strproductlist += '<ul class="fieldlist">';
strproductlist += '</div>';
strproductlist += '</div>';
strproductlist += '</div>';
}
//Edit
I am writing four sample records that presents 3 records with the same image
-------- ProductID=1 ProductName=product1 Photo=~/products/product1.jpg ProductCode=001
-------- ProductID=2 ProductName=product2 Photo=~/products/product1.jpg ProductCode=002
-------- ProductID=3 ProductName=product3 Photo=~/products/product1.jpg ProductCode=003
-------- ProductID=4 ProductName=product4 Photo=~/products/product2.jpg ProductCode=004
I hope below is what you are looking for. What I am doing is I am appending elements to body on each step so that I can identify whether the particular image with same url is present in body and if yes then don't render it and render what you need to like view more similar products. For time being I have just displayed an alert saying Image is present. You can write logic of displaying view similar products in that part!!
FIDDLE DEMO HERE
var data=[
{"ProductID":"1","ProductName":"product1", "Photo":"https://www.runtastic.com/shop/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/o/r/orbit_with_clip_en_1.png","ProductCode":"001"},
{"ProductID":"2","ProductName":"product2", "Photo":"https://truegamers.com.my/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/3/_/3_83_6.jpg","ProductCode":"002"},
{"ProductID":"3","ProductName":"product3", "Photo":"https://www.runtastic.com/shop/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/o/r/orbit_with_clip_en_1.png","ProductCode":"003"},
{"ProductID":"4","ProductName":"product4", "Photo":"https://truegamers.com.my/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/3/_/3_83_6.jpg","ProductCode":"004"}
];
$.each(data, function (i, rec) {
var strproductlist="";
var imgname=rec.Photo;
if($('.gridItem img[src="'+imgname+'"]').length)
{
alert('image present');
}
else
{
strproductlist += '<div class="gridItem listView">';
strproductlist += '<div class="gridItemContent">';
strproductlist += '<div class="productPhoto">';
strproductlist += '<a title="' + rec.ProductName + '" href="ProductDetails.aspx?productid=' +
rec.ProductID + '">';
strproductlist += '<img alt="' + rec.ProductName + '" src="' + rec.Photo + '">';
strproductlist += '</a>';
strproductlist += '</div>';
strproductlist += '<div class="listViewProductDet">';
strproductlist += '<h2>';
strproductlist += '<a title="" href="ProductDetails.aspx?productid=' + rec.ProductID + '">' +
rec.ProductName + '</a>';
strproductlist += '</h2>';
strproductlist += '<p class="productCode">' + rec.ProductCode + '</p>';
strproductlist += '<ul class="fieldlist">';
strproductlist += '</div>';
strproductlist += '</div>';
strproductlist += '</div>';
$('body').append(strproductlist)
}
});
img{
width:100px;
height:100px;
}
.gridItem{
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
UPDATE
DEMO
Inside your if instead of alert I've written console.log which shows the parent that contains that image
if($('.gridItem img[src="'+imgname+'"]').length)
{
console.log($('.gridItem img[src="'+imgname+'"]').closest('.gridItem'));
}