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>';
Related
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 have created a JSON read function but I get error:
TypeError: a is undefined
Here is my code:
$(function() {
var json = $.getJSON("http://localhost/stratagic-json/project_json.php", function() {
console.log("success");
});
var mhtml = '';
$.each(json.slider, function(key, val) {
mhtml += '<li><div class="proj-details-wrap"> <img src="images/' + val.image + '" />';
mhtml += '<div class="proj-badge">' + val.status + '</div>';
mhtml += '<div class="proj-name">' + val.name + ' <span>' + val.location + '</span> </div>';
mhtml += '</div>';
mhtml += ' <div class="container proj-desc">' + val.description + '</div>';
mhtml += '</li>';
});
var $ul = $('<ul class="slides">').append($(mhtml)); // append DOM only one time.
$('.slider').append($ul);
})
The problem is that $.getJSON is an asynchronous method and you're treating it synchronously. json.slider is undefined because $.getJSON actually returns a promise, not the data. The data needs to be accessed via the callback or a promise. This should work:
$(function() {
$.getJSON("http://localhost/stratagic-json/project_json.php", function(json) {
var mhtml = '';
$.each(json.slider, function(key, val) {
mhtml += '<li><div class="proj-details-wrap"> <img src="images/' + val.image + '" />';
mhtml += '<div class="proj-badge">' + val.status + '</div>';
mhtml += '<div class="proj-name">' + val.name + ' <span>' + val.location + '</span> </div>';
mhtml += '</div>';
mhtml += ' <div class="container proj-desc">' + val.description + '</div>';
mhtml += '</li>';
});
var $ul = $('<ul class="slides">').append($(mhtml)); // append DOM only one time.
$('.slider').append($ul);
});
})
You could also do something like this:
$(function() {
var jqXhr = $.getJSON("http://localhost/stratagic-json/project_json.php");
jqXhr.done( function (data) {
// Do something
});
})
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'));
}
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>';
I'm familiar with PHP's DOM and know how to read special tags of an HTML page.
But now, I want to read a part of a line in a JS File, And I don't know how to do it.
my java script's text is here:
var gblock = '';
var gblocktitle;
if(gblocktitle == undefined)
{
gblocktitle = 'title';
}
gblock += '<div class="g-block">';
gblock += '<div class="g-block-title">';
gblock += gblocktitle;
gblock += '</div>';
gblock += '<div class="g-poem-block">';
gblock += '<div class="g-m1">part1</div>';
gblock += '<div class="g-m2">part2</div>';
gblock += '<br style="clear:both;" />';
gblock += '</div>';
gblock += '<div class="gfooter">';
gblock += '<div class="gpoet">AAAAAAAA</div>';
gblock += '<br style="clear:both;" />';
gblock += '</div>';
grblock += '</div>';
document.write(gblock);
And I want to read part1 and part2
please help me.
var gblock = '';
var gblocktitle;
if(gblocktitle == undefined)
{
gblocktitle = 'title';
}
gblock += '<div class="g-block">';
gblock += '<div class="g-block-title">';
gblock += gblocktitle;
gblock += '</div>';
gblock += '<div class="g-poem-block">';
gblock += '<div class="g-m1">part1</div>';
gblock += '<div class="g-m2">part2</div>';
gblock += '<br style="clear:both;" />';
gblock += '</div>';
gblock += '<div class="gfooter">';
gblock += '<div class="gpoet">AAAAAAAA</div>';
gblock += '<br style="clear:both;" />';
gblock += '</div>';
$(gblock).find('.g-m1').html();
alert($(gblock).find('.g-m1').html());
try this
U have to use JQuery library..