I am unable to set json value to scr attribute of embed tag from javascript file.
$.getJSON("url",function(data){
jsonMovies = data.Movies;
$.each(data.Movies, function(index,value){
numofMovs[i]= index;
if (numofMovs[i] == 'Movie6')
{
var parent = $('embed#video1').parent();
$('embed#video1').remove();
parent.append('<embed type="video/mp4" width="200px" height="200px" id = "video1"
src=value.Video />');
}
}
}
Please let me know the correct syntax for including the json value in src attribute (src=value.Video).
Thanks,
Surabhi
You need to concatenate the value into the string:
parent.append('<embed type="video/mp4"
width="200px"
height="200px"
id="video1"
src=' + value.Video + '/>');
^^^^^^^^^^^^^^^^^^^
There's a considerable difference between:
x = 'hello';
alert(x); // shows hello
alert('x'); // shows x
Related
i have a html text like that i get from database, but it have a hover that show the image name, so i want to remove the title
from this
<img title="AAAAAAA" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="" width="212" height="212">
to this
<img title="" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="" width="212" height="212">
i have tried
var text = '<img title="AAAAAAA" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="" width="212" height="212">'
text.replace(/(<img .*title=")(.+)(")/, '$1$3')
but it also remove my src
"<img title="">"
any help guys ?
You could use JS function removeAttribute():
document.getElementById("someId").removeAttribute("title");
console.log(document.getElementById("someId"));
<img title="AAAAAAA" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="" width="212" height="212" id="someId">
EDIT: How to remove with regex
var text = '<img title="AAAAAAA" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="" width="212" height="212">';
console.log(text.replace(/ title=".[^"]*"/, ''))
How to remove only title´s value:
var text = '<img title="AAAAAAA" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="" width="212" height="212">';
console.log(text.replace(/title=".[^"]*"/, 'title=""'))
If you are only getting the element as a string and not as a DOM element, then you can try using \"[\s\S]+(?= ) to select the portion of string that goes from the first " to the first space (returning you "AAAAAAA").
You can then replace the text as per your code in the question.
It can be very hard, if not impossible, to reliably parse HTML using the likes of regex, indexOf, etc. The whole issue can be totally avoided by using the built-in DOMParser object, as follows:
const html = '<img title="AAAAAAA" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="" width="212" height="212">';
const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");
const img = doc.body.children[0];
img.title = "";
console.log(img.outerHTML)
You could also use img.removeAttribute("title"); if you want to get totally rid of the title attribute.
Simpler and cleaner way.
var xmlString = '<img title="AAAAAAA" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="" width="212" height="212">'
var x = new DOMParser().parseFromString(xmlString, "text/xml").documentElement
x.removeAttribute("title")
console.log(x)
I have a url with the following html part
<div class="shop cf">
<a class="shop-logo js-shop-logo" href="/m/3870/GMobile">
<noscript>
<img alt="GMobile" class="js-lazy" data-src="//a.scdn.gr/ds/shops/logos/3870/mid_20160920155600_71ff515d.jpeg" src="//a.scdn.gr/ds/shops/logos/3870/mid_20160920155600_71ff515d.jpeg" />
</noscript>
<img alt="GMobile" class="js-lazy" data-src="//a.scdn.gr/ds/shops/logos/3870/mid_20160920155600_71ff515d.jpeg" src="//c.scdn.gr/assets/transparent-325472601571f31e1bf00674c368d335.gif" />
</a>
</div>
I want to get the first img alt inside the div class shop cf and I do
Set seller = Doc.querySelectorAll("img")
wks.Cells(i, "D").Value = seller.getAttribute("alt").Content(0)
I get nothing what I forget to include?!?
Can I get it from
<noscript>
tag?
I tried the following as well
Set seller = Doc.getElementsByClassName("js-lazy")
wks.Cells(i, "D").Value = seller.getAttribute("alt")
Use element with attribute selector
CSS:
img[alt]
VBA:
ie.document.querySelector("img[alt]")
You may need to add
ie.document.querySelector("img[alt]").getAttribute("alt")
To include the class use
ie.document.querySelector("img.js-lazy[alt]")
If more than one element then use querySelectorAll and index into returned nodeList e.g.
Set list = ie.document.querySelectorAll("img.js-lazy[alt]")
list.item(0).getAttribute('alt')
list.item(1).getAttribute('alt')
have you try this way?
let lazy1 = document.querySelectorAll(".js-lazy")[0]
let lazyalt = lazy1.getAttribute("alt");
let shop = document.querySelector('.shop');
shop.classList.add(lazyalt);
console.log(lazyalt)
I am trying to bind the img url from api response. Here I have attached what I have tried so far.
Json data structure :
This is the structure of data I received from API
my-cart.component.ts
this.CartdataService.get_Product_Details(this.productCode).subscribe(
data => {
this.productDetails = data;
this.productImages = this.productDetails['0']['PROD_B']
console.log(this.productImages);
});
Receiving array of data in console
Here console I got the image url in an array.
HTML code
<img *ngFor="let images of productImages; let i = index" (mouseenter)="mouseEnter($event)" [src]="images['PRODUCT_THUMBNAIL']"
[alt]="'img' + i" class="img-thumbnail" [attr.ref]="images[i]['PRODUCT_IMAGE']">
This is how I am trying to bind the image url from the response but I did not get the image.
Can anyone guide me to solve this.
they way you are assigning images are wrong.
Try with
this.productImages = this.productDetails[0]['PROD_B'].
and also make a change of below
<div *ngFor="let images of productImages; let i = index" >
<img (mouseenter)="mouseEnter($event)"
[src]="images['PRODUCT_THUMBNAIL']"
[alt]="'img' + i" class="img-thumbnail"
[attr.ref]="images['PRODUCT_IMAGE']">
</div>
I think, you are missing a single quotation over the actual path..(binding the URL as a string but not an expression..) try this:
<img *ngFor="let images of productImages; let i = index" (mouseenter)="mouseEnter($event)" [src]="'images["PRODUCT_THUMBNAIL"]'"
[alt]="'img' + i" class="img-thumbnail" [attr.ref]="'images[i]["PRODUCT_IMAGE"]'">
This Meteor server code tries to extract the innerHTML from a html string using cheerio package but the error says that the elements has no method 'size'
What am I doing wrong and how to fix it? Thanks
here is the html;
<span class='errorMsg'>some text </span>
message: (html, typeMsg) => {
let $ = cheerio.load(html);
const selection = 'span.' + typeMsg;
const elements = $(selection);
return elements.size() > 0 ? elements.get(0).innerHTML.trim() : '';
}
After few trials and errors and trying to understand the docs, which cloud benefit from some more explanations.
Option 1
const element = $(selection).eq(0);
return element ? element.text().trim() : '';
Option 2
const element = $(selection).get([0]);
return element ? element.children[0].data.trim() : '';
I used option 1 in this case.
var cheerio = require('cheerio');
var $ = cheerio.load('<b>hello</b> world');
// innerHTML
$('body').html()
// <b>hello</b> world
// outerHTML
$.html($('body'))
// <body><b>hello</b> world</body>
// innerText
$('body').text()
// hello world
docs: https://api.jquery.com/html/#html1
My HTML looked like this:
<div class="col-xs-8">
<b>John Smith</b><br />
<i>Head of Widgets</i><br />
Google<br />
Maitland, FL<br />
123-456-7890<br />
<a
href="mailto:example#example.com"
>example#example.com</a
>
</div>
I wanted to extract the inner html of the div in the context of an "each" loop, so I used this code:
$(this).html()
Which returned
<b>John Smith</b><br />
<i>Head of Widgets</i><br />
Google<br />
Maitland, FL<br />
123-456-7890<br />
<a
href="mailto:example#example.com"
>example#example.com</a
>
I am having a rather weird issue with my TYPO3 6.1 installation.
It is outputting HTML5 tags as entites, so if I inserts an imageelement it will output the HTML like this
<p>
<div class="csc-textpic csc-textpic-center csc-textpic-above">
<div class="csc-textpic-imagewrap">
<div class="csc-textpic-center-outer">
<div class="csc-textpic-center-inner">
<figure class="csc-textpic-image csc-textpic-last"><img src="fileadmin/billeder/forandring.jpg" width="960" height="540" alt=""></figure>
</div>
</div>
</div>
</div>
</p>
Which gives me this in the FE:
<figure class="csc-textpic-image csc-textpic-last"></figure>
The image is displayed correctly in the figure tag as it is a normal img tag.
A HTML5 video will output the video tags as entites
<p> <video id="video_3" class="video-js vjs-default-skin" width="960" height="540" preload="auto" controls data-setup='{"techOrder":["youtube","html5","flash"]}'></p>
I am using some TS to remove unwanted HTML, but I don't think that is what causes it
tt_content {
stdWrap.prefixComment >
stdWrap.dataWrap >
stdWrap.innerWrap.cObject >
stdWrap.innerWrap2 >
}
lib {
parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
parseFunc_RTE.externalBlocks = h2,h3,h4
parseFunc_RTE.externalBlocks.h2.stripNL = 1
stdheader {
1.headerClass >
2.headerClass >
3.headerClass >
stdWrap {
dataWrap >
prefixComment >
}
10.stdWrap.wrap >
}
}
and my pageconfig is this:
##################################
# CONFIGURATION #
##################################
config {
doctype = html5
xmlprologue = none
disablePrefixComment = 1
disableImgBorderAttr = 1
inlineStyle2TempFile = 1
pageTitleFirst = 1
removeDefaultJS = 1
removeDefaultCss = 1
simulateStaticDocuments = 0
baseUrl = http://www.domain.com/
tx_realurl_enable = 1
}
Fixed!
Changed
<f:format.html>{content_image}</f:format.html>
to
<f:format.raw>{content_image}</f:format.raw>