I have 4 images that all have hyperlinks associated with them. I'm trying to pull the image link and the hyperlink from a Google Spreadsheet to be displayed in the web app.
The hyperlinks are pulling over just fine but I get an error when I try to pull the link for the image. I've hunted online and all solutions don't seem to work for me. How can I pull a link from the Google Spreadsheet and set it as the source for the image?
This is the error I receive: Cannot set property 'src' of null
Here's a chunk of my code:
<div align="center">
<div class="contener_slideshow">
<div class="contener_slide">
<div class="slid_1"><img id="oneS" src=""></div>
<div class="slid_2"><img id="twoS" src=""></div>
<div class="slid_3"><img id="threeS" src=""></div>
<div class="slid_4"><img id="fourS" src=""></div>
</div>
</div>
</div>
<script>
function onSuccess(data){
var oneS = document.getElementById('link1');
oneS.innerHTML = data[1][2];
try{
document.getElementById("oneS").src = data[1][1];
}catch(error){
alert(error);
}
}
google.script.run.withSuccessHandler(onSuccess)
.getData();
The innerHTML in data[1][2] must be wrong. Use a console.log() statement to find out what the value of data[1][2] is:
<script>
function onSuccess(data){
console.log('data: ' + data);
console.log('data[1][2]: ' + data[1][2]);
var oneS = document.getElementById('link1');
oneS.innerHTML = data[1][2];
Open the browser's console, run the code and see what has printed to the log.
This Line:
oneS.innerHTML = data[1][2];
Deletes all the original HTML out of the <a> tag with the id link1, and replaces it with whatever data[1][2] returns. So if data[1][2] is empty, then there is no <img> tag anymore with the oneS id. So, when you try to get it, it's null. Therefore the error msg:
Cannot set property 'src' of null
I'm assuming that data[1][2] is just the link, not the link inside of the HTML. What you are assigning for HTML can't just be URL address. What you are assigning needs to be:
<img id="oneS" src="the URL Here">
Hard coded it would look like this:
oneS.innerHTML = <img id="oneS" src="the URL Here">;
If what you are getting out of the spreadsheet is just the URL, you can use a text formula to create the HTML
var htmlToInject = "<img id='oneS' src='" + data[1][1] + "'>";
document.getElementById("oneS").src = htmlToInject;
Related
I have the following HTML template:
<div class="thisDiv" data-dojo-attach-point="thisDivAttachPoint">
<img src="images/someImage.png" class="someImage"
data-dojo-attach-event="onClick:_doSomething"/>
</div>
Now, in my accompanying js, I am evaluating some text which I want to place in this div before the image.
var stringToPlace = "This is the text for thisDiv";
this.thisDivAttachPoint.innerHTML = stringToPlace;
However, doing this results in:
<div class="thisDiv" data-dojo-attach-point="thisDivAttachPoint">
This is the text for thisDiv
</div>
That is, the image is getting lost.
What do I do so that the result is such that the text is "prepended" before the image. That is:
<div class="thisDiv" data-dojo-attach-point="thisDivAttachPoint">
This is the text for thisDiv
<img src="images/someImage.png" class="someImage"
data-dojo-attach-event="onClick:_doSomething"/>
</div>
I also tried:
domConstruct.place(stringToPlace, this.thisDivAttachPoint, "first");
But this gives error as:
parameter 1 is not of type 'Node'
I also tried:
this.thisDivAttachPoint.innerHTML = stringToPlace + this.thisDivAttachPoint.innerHTML;
After doing this, visually it is as expected i.e. text and then the image. However, the onClick:_doSomething on the image is not getting invoked. What am I missing? Inspecting the element shows that onClick:_doSomething is there. But click doesn't do anything. No errors.
This worked.
domConstruct.place(domConstruct.toDom(stringToPlace), this.thisDivAttachPoint, "first");
This results exactly in what I want. Issue was, we need to convert the String to node before using in place.
Dom-Construct Documentation
My Snippet tool allows users to save/copy code snippets in order to share them. I use html2canvas in order to display the snippet that the user has created in the console and allow them to save it.
But I have found many problems in their display on browsers other than Firefox, as you can see here (it's blurry and the letter spacing is abnormal).
Here's how I save the snippet once the user presses "Save":
// Call html2canvas with the console element
html2canvas(document.getElementsByClassName('console'), {
onrendered: function(canvas) {
var url = canvas.toDataURL()
// Set the element's URL in an img tag
var img = '<img src="' + url + '" style="border:0;"></img>'
// Open a window and display the image in it
var x = window.open();
x.document.open();
x.document.write(img);
x.document.close();
}
});
My best solution at the moment is to have the snippet saved locally and directly to the user, how may I have a specific HTML element downloaded using Javascript?
EDIT:
This is the HTML element that I wish to save, it contains the console design and a codemirror component that represents the text editor in which users type:
<div class="console">
<div class="console-header">
<div class="console-buttons">
<div class="console-button button-1"></div>
<div class="console-button button-2"></div>
<div class="console-button button-3"></div>
</div>
</div>
<div class="console-content">
<codemirror [(ngModel)]="content" [config]="config"></codemirror>
</div>
</div>
I have a <h3> tag that is inside a <div>, I'd like to be able to retrieve the text inside the <h3> tag, only problem is that the name of the <div> is used in other elements across the page. I know xpath is one way of doing this but I've been advised to try use a different method. Any suggestions?
This is the html
<div class="box-header">
<h3>User's Balance: EUR 45,173.80</h3>
</div>
This is my page object file:
checkReceivablesDue (receivablesDue) {
browser.sleep(8000);
var checkBalance = element.all(by.css('box-header> h3'));
checkBalance.getText().then(function (balance){
console.log(balance);
});
}
When I run the above, I get [] printed in the console, I've tried a few variations but can't get it to work.
Thanks
I'm trying to get a simple piece of text displayed as a link. When it is rendered it looks correct eg: http://www.google.com, but the link redirects to my project with the link appended on the end:
http://localhost:8050/brents-test-community/ru61pmlc7vry/groupplaymanager-display/h16wwislnsl/www.google.com, instead of just http://www.google.com.
This what i used:
var urlHtml = groupPlay.Url.link(groupPlay.Url);
var url = document.getElementById('GroupPlayInput_Url');
url.innerHTML = urlHtml;
The value of groupPlay.Url is a simply "www.google.com".
And this is the div:
<div style="padding-top: 5px;" id="#Html.IdFor(view => view.GroupPlayInput.Url)">
#if (Model.GroupPlayInput.Url.IsNotNullOrEmpty())
{
#Model.GroupPlayInput.Url
}
</div>
You can add http:// beside your url. This will indicate to the browser that the url is an absolute url (not a relative url).
Example : https://jsfiddle.net/nevgc71g/
for some reason both methods results are TextNode. It means that browser doesnot parse content of appended string.
for example
var code = "<div><p>Some</p> words are <span>here</span></div>"
$("#news_details").append(code);
on the page I do have content
"<div><p>Some</p> news are <span>here</span></div>"
this
$("#news_details").contents()
shows that string with html source is attached(for some reason unknown to me) as single textnode
but if will type in firebug
var text = $('#news_detaisl').text()
$('#news_details').contents().remove()
$('#news_details').append(text)
and after that, it is parsed and shows in a right way.
user the html()
var code = "<div><p>Some</p> words are <span>here</span></div>"
$("#news_details").html(code);
Since you haven't asked a question directly I can only assume what you want. Try this and tell me if it helps and if it was what you wanted:
var code = "<div><p>Some</p> words are <span>here</span></div>"
$("#news_details").append($(code));
Oh and $().append and $().html do NOT behave in the same way. $().append adds the input as a new child while $().html either returns the innerHTML of an element or sets it. Depending on whether you set a parameter.
only this code works fine, but such a weird behavior
var content = news.newsDetails(here async ajax request which load html snippet with content); //content is a string with html snippet from server
$("#news_content").append(content);
var value = $(".news_title").text();
$(".news_title").contents().remove();
$(".news_title").append(value);
$(".news_details").css('display','block')
and html snippet
<div class="news_details">
<img class="pointer" src="/static/img/close6.png" alt="close" width='16' height='16'>
<div class="news_head gradient">
<span>{{ item.pub_date|date:"d M Y" }}</span>{{ item.title }}
</div>
<div class="clear"></div>
<div class="news_title">{{ item.full_text }}</div>