I want to view all the items in my database and i managed to retrieve all except for the image.
This is my code:
htmlString += '<div class="col-md-4"> ImageShouldGoHere </div>';
htmlString += '<div class="col-md-8">';
htmlString += '<div class="col-md-12 listing-title"> ' + data[i].title + ' </div>';
htmlString += '<div class="col-md-12 category-text"> ' + data[i].category + ' </div>';
The URL of the image is located in data[i].previewImage how can i view the URL as an image in the place of ImageShouldGoHere?
putting the image url as a src of img tag would do the job.
htmlString += '<div class="col-md-4"><img src="' + data[i].previewImage + '" /></div>';
Related
The instafeed api stopped working on my site. The error I am getting is:
A cookie associated with a cross-site resource at https://instagram.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
Chrome changed something and I am trying to understand. Any help would be appreciated.
The site where I wrote this is here. http://galnova.com
var accessToken = '271323200.1677ed0.0a4c06efd9474022b9c3eb47bccf5657'; // use your own token 713486902779818|vM5scnvKTkbBmLbsSgBTPVi3Gqs
$.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) {
$.each(insta.data,function (photos,src) {
if ( photos === 6 ) { return false; }
var date = new Date(parseInt(this.created_time) * 1000);
// template
$(
'<div class="col-sm-6 col-md-3 col-lg-2 grip_wrap flx gonzo">' +
'<div class="grip_hang_topp"></div>' +
'<div class="col grip flex_el flx_ex">' +
'<a title="' + this.caption.text + '" class="fancybox zero lass" data-fancybox="gallery1" data-caption="' + this.caption.text + '" href="' + this.images.standard_resolution.url + '">' +
'<img src="' + this.images.standard_resolution.url + '" />' +
'</a>' +
'<div class="col coat2 truncate">' + this.caption.text + '</div>' +
'<div class="row nill">' +
'<span class="col-6 heart-wrap floated">' + '<i class="fa fa-heart">'+ '</i>' + this.likes.count +' <div class="summ">likes</div>'+'</span>' +
'<span class="col-6 comment-wrap floated">' + '<i class="second fa fa-comment">'+ '</i>' + this.comments.count +' <div class="summ">comments</div>'+'</span>' +
'</div>' +
'<div class="row nill">' +
'<span class="col-sm-12 check-wrap floated">' + '<i class="second fa fa-check">'+ '</i>' + 'Posted ' + (date.getMonth()+1) + '/' + date.getDate() + '/' + date.getFullYear().toString().substring(2) +'</span>' +
'</div>' +
'<div><button class="col-12 btn btn-outline-tertiary">UltraGallery <span class="fab fa-instagram"><\/span></button></div>' +
'</div>' +
'<div class="grip_hang_bott"></div>' +
'</div>'
).appendTo('#instafeed');
});
$(".grip").hover(function(e){
"use strict";
e.preventDefault();
if ($(window).width() > 991) {
return false;
}
});
});
Instagram Api has changed, read more about it here
bootbox.confirm({
title: "請輸入綁定手機號碼",
message:
'<div class="col-xs-12">'
+ '<form class="form-horizontal">'
+ '<div class="form-group">'
+ '<label class="col-xs-12" style="text-align: left">帳號(您的手機號碼):</label>'
+ '<div class="col-xs-5">'
+ '<select class="form-control" id="countryCode-bootbox" name="countryCode-bootbox">'
+ '<option value="+93">Afghanistan +93</option>'
+ '<option value="+355">Albania +355</option>'
+ '<option value="+213">Algeria +213</option>'
+ '<option value="+1684">American Samoa +1684</option>'
+ '<option value="+263">Zimbabwe +263</option>'
+ '</select>'
+ '</div>'
+ '<div class="col-xs-7">'
+ '<input type="text" class="form-control" id="cellphone-bootbox" name="cellphone-bootbox">'
+ '</div>'
+ '</div>'
+ '</form>'
+ '</div>',
callback:
function(result) {
if(result == false) {
return;
}
register3rdPartyUser(flag, $('#countryCode-bootbox').val(), $('#cellphone-bootbox').val());
}
});
As you can see, there are two horizontal lines inside the overall box which I believe are the boundaries of the message content. The bottom line doesn't come after the message content when I'm using HTML for my string. How can I fix this issue? Is it a bug?
I am developing an app with the help of ionic 3
in the application i am generating dynamic html from .ts file and appending in HTML . Now i want to bind and click event to html
After user done an click event i want to refresh the content present in the dynamically generated html
please help to solve this
enter code here
my .ts file
with the below code i am generating html and appending to html
outputHtml = '<div id="rpl_crt"><div class="sys_ot"><h6 class="itm_nme">My Cart</h6>';
var innerHTML = '';
let amount = 0;
let savings = 0;
for (let dt in data) {
amount += data[cart].vv.value;
savings += data[cart].aa.value;
innerHTML += '<div class="cartlist">'
innerHTML += '<div class="row ">'
innerHTML += '<div col-3 class="itemimg">'
let img_url=data[cart].product.images ? ConfigurationPage.commonURL+data[dt].aa.images[1].url:'assets/img/place_holder.png'
innerHTML += '<img src="'+img_url+'" >'
innerHTML += '</div>'
innerHTML += '<div col-9>'
innerHTML += '<h6>' + data[dt].aa.name + '</h6>'
innerHTML += '</div>'
innerHTML += '</div>'
innerHTML +='<div class="btn_qnty row">'
innerHTML += '<div col-5>'
innerHTML += '<div class="row">'
innerHTML += '<div col-3 click="abc(dt)"><span class="circle">-</span></div>'
innerHTML += '<div text-center col-6 >'+data[dt].q+'</div>'
innerHTML += '<div col-3 (click)="xyz(dt)"><span class="circle " >+</span></div>'///I want an click event here to do some action
//
innerHTML += '</div>'
innerHTML += '</div>'
innerHTML += '<div col-7>'
innerHTML += '<div class="prd_dtl">'
innerHTML += '<div class="proctprice">'
if (data[dt].ss.value != 0) {
innerHTML += '<span class="orgin_prc">' + this.currency.transform((parseFloat(data[dt].tp.value) + parseFloat(data[dt].ss.value)), 'INR') + '</span>'
}
innerHTML += '<span class="dsc_prc">' + this.currency.transform(data[dt].tp.value, 'INR') + '</span>'
innerHTML += '</div>'
if (data[cart].savings.value != 0) {
innerHTML += '<p class="save_prc">' + this.currency.transform(data[dt].ss.value, 'INR') + '</p>'
}
innerHTML += '</div>'
innerHTML += '</div>'
// innerHTML += '<div class="quantity">' + data[dt].qt+ '</div>'
innerHTML += '</div>'
innerHTML += '</div>'
let abc={
code:data[dt].aa.code,
data:data[dt]
}
clickEventMethod.push(abc);
}
this.totalAmount = amount;
this.totalSaving = savings;
// outputHtml += '</ion-list>';
let footerHtml = '<div class="row cartfooter">'
footerHtml += '<div col-4><p>Total amount</p>' + this.currency.transform(this.totalAmount, 'INR') + '</div>'
footerHtml += '<div col-4><p>Total amount</p>' + this.currency.transform(this.totalSaving, 'INR') + '</div>'
footerHtml += '<div col-4><p>Say <strong>Checkout</strong> to checkout all items</p></div>'
console.log(clickEventMethod,'clickEventMethod')
outputHtml += innerHTML + footerHtml + '</div></div>';
this.appenData.nativeElement.insertAdjacentHTML('beforeend', outputHtml);//Appending the data at the end of the ion-content // break;
HTML
<ion-header [ngClass]="!isFromHome ? 'leftPaddingCssTitle':'cssTitle'">
<ion-navbar color="danger">
<ion-title>{{headerName}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div class="hint">
<p>To go back , say <b>Go Back</b></p>
<p>To Go cart , Say <b>Open Cart </b> or <b>Go to Cart</b></p>
</div>
<div class="main" #appenData id="main">
</div>
<ion-content>
I am trying making the following code working:
var td = $(elem).treegrid('getPanel').find('div.datagrid-header td[field="itemtype"]');
td[0].innerHTML = td[0].innerHTML +
'<table style="width:100%;margin-top:-8px;margin-left:2px"><tr>' +
'<td style="width:18px;text-align:center">' +
'<a href="" ng-click="getFilteredAssets(filterItemType)">' +
'<img border="0" src="all_filter.png">' +
'</a>' +
'</td>' +
'</td>' +
'<td style="width:18px">' +
'<img src="assets_filter.png"/>' +
'</td>' +
'<td style="width:18px">' +
'<img src="projects_filter.gif"/>' +
'</td></tr></table>';
I am getting images into the place, but clicking on the image with ng-click specified doesn't do anything. Any idea how to make it work?
Thanks
Modified code
var element = $compile(angular.element
('<table style="width:100%;margin-top:-8px;margin-left:2px"><tr>' +
'<td style="width:18px;text-align:center">' +
'<a href="" ng-click="getFilteredAssets(filterItemType)">' +
'<img border="0" src="all_filter.png">' +
'</a>' +
'</td>' +
'</td>' +
'<td style="width:18px">' +
'<img src="assets_filter.png"/>' +
'</td>' +
'<td style="width:18px">' +
'<img src="projects_filter.gif"/>' +
'</td></tr></table>')
)(scope);
td[0].innerHTML = td[0].innerHTML + element;
Angular has no way of knowing you've added some HTML to your DOM. You should use a compile service. It will sweep HTML searching for ng-* directives and so on and apply it to current scope.
var element = $compile(angular.element('your html with ng-* directives''))(scope);
Then you can insert that element to your DOM.
I am using autodividers in listview in JQM and populating new "pages" which works fine when all the list is displayed but when user filters the list, the corresponding page does not display. I'm sure I'm missing something obvious so would appreciate any help.
js
$(document).ready (function() {
$.getJSON("eur_countries_array.json", function (data) {
var countries = [];
for (var obj in data){
countries.push({
title: data[obj].title,
flag: data[obj].flag,
population: data[obj].population,
avg_annual_growth: data[obj].avg_annual_growth,
date: data[obj].date
});
}
// call sort function
countries.sort(compare);
// read through array
var listHTML = "";
for (var i=0; i < countries.length; i++) {
// for each country add flag and title to list
listHTML += '<li><img class="ui-li-icon ui-corner-none alt="'+ countries[i].flag + 's flag" src="flags/16/' + countries[i].flag +'.png" >' + countries[i].title + '</li>';
// Append new "pages" after "home" page for each country
var pHTML = '<div data-role="page" id="' + countries[i].flag + '">';
pHTML += '<div data-role="header"><h1>' + countries[i].title + '</h1><a data-rel="back">Back</a></div>';
pHTML += '<div role="main" class="ui-content" class="country_details">';
pHTML += '<div class="center"><img class="flag_display" alt="'+ countries[i].flag + 's flag" src="flags/64/' + countries[i].flag +'.png" ></div></div>';
pHTML += '<div><p class="center">Population of ' + countries[i].title + ' is ' + countries[i].population + '</p></div>';
pHTML += '<div><p class="center">Average annual growth: ' + countries[i].avg_annual_growth + '</p></div>';
pHTML += '<div><p class="center">Statistics correct as of: ' + countries[i].date + '</p></div>';
pHTML += '</div>';
console.log(pHTML);
$("body").append(pHTML);
}
// Display countries list
// call the refresh method to update the visual styling after adding new elements
$("#countryList").empty().append(listHTML).listview("refresh");
});
});
html
<div data-role="page" id="home">
<div data-role="header">
<h2>European Countries</h2>
</div>
<div role="main">
<ul id="countryList" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
<li></li>
</ul>
</div>
<div data-role="footer">
</div>
</div><!-- page -->