I've got a variable and I want to display the value of it in a specific place of my HTML.
Much like +variable+ within javascript.
My setup is as followed:
The HTML:
short version:
addthis:url="http://example.com/script.php?code="
the HTML full version:
<div class="addthis_toolbox addthis_default_style "
addthis:url="http://example.com/script.php?code="
addthis:title="An Example Title"
addthis:description="An Example Description">
Share
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
I would like to "print" the value of my variable after the = so it would result in:
addthis:url="http://example.com/script.php?code=myVar"
I had found document.write but this won't work since I will have to place the script tags between quotes.
Hope someone can help me out!
String concatenation
addthis:url="http://example.com/script.php?code=" + myVar;
Try to use a placeholder and replace it with jquery:
https://stackoverflow.com/a/7480394/1380486
You wont be able to do it the way you want (with document.write). Even if you solve the quote problem, you will still have to have script tags inside of your div tags like this:
HTML
<div addthis:url=<script>document.write("http://example.com/script.php?code=myVar")<script>>
This simply will not work.
With jQuery you could select that element and add the attribute when the dom is ready.
JavaScript
$(document).ready(function(){
$(".addthis_toolbox").attr("addthis:url","http://example.com/script.php?code=myVar")
});
Related
I'm struggling to find workaround with GAS.
This very simple, work perfectly fine in this snippet or in any html tool.
<a href="#" onclick=dummyFunc(foo)>OK</a>
<a href="#" onclick=dummyFunc("param")>not OK</a>
But google app script dont reconize the seconde line like valid html. If you put it in HtmlService.createHtmlOutput() or any other function that create html from the HtmlService it will raise Exception: Malformed HTML content.
EDIT
The only way I find to make it work is using:
<script>var param="param";</script>
<a href="#" onclick=dummyFunc(param)>OK</a>
Thank for you help. Have a great day.
Indeed, your html is not valid.
Here's the right way :
OK
I am using the following js to replace text in a class called .relatedactivities with another text. In the example below the text is Related Activities.
<script>
$(document).ready(function(){
$(".relatedactivities").text('Related Activities');
})
</script>
How can I replace the text "Related Activities" with the HTML code below instead?
<h1 class="GreenLrg" align="center">Related Activities</h1>
<div align="center"> <a href="/activities/kauai/ziplineadventures/koloa-zipline.htm">
<div class="CatBox"><img src="/Portals/0/1koloa-zipline-tour-2.jpg" height="174" width="231"><span>Koloa Zipline Tour</span></div>
</a> <a href="/activities/kauai/ziplineadventures/zip-n-dip-expedition.htm">
<div class="CatBox"><img src="/Portals/0/2zip-n-dip-2.jpg" height="174" width="231"><span>Zip N' Dip Expedition</span></div>
</a> <a href="/activities/kauai/ziplineadventures/kipu-falls-safari.htm">
<div class="CatBox"><img src="/Portals/0/3kipu-zipline-safari-2.jpg" height="174" width="231"><span>Kipu Zipline Safari</span></div>
<p></p>
</a></div><a href="/activities/kauai/ziplineadventures/kipu-falls-safari.htm">
I do not suggest you hard code HTML in your JavaScript, as it will become extremely difficult to maintain in the long run.
In a perfect world, you can call a backend service via AJAX which would return HTML, or you could use a framework or library like AngularJS or React.JS.
Now, to answer you question, simply change .text() for .html('<html here/>').
You'll need to use .html() instead of .text():
$(".relatedactivities").html('<h1 class="GreenLrg" align="center">Related Activities</h1>...');
Use: html() like
$(".relatedactivities").html('your code html');
This method uses the browser's innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters.
For more about that, check http://api.jquery.com/html/
Can I concatenate two strings in HTML?
I want to achieve the following functionality-
go to the 1st DIV tag.
It could have been done using document.write() in javascript but I want to know if there is any concatenation functionality in HTML itself.
No, there isn't.
HTML is markup, it is not turing complete.
One (primitive) way to achieve this with JavaScript would be
<a href="#"
onclick="window.location.hash='#'+document.getElementsByTagName('div')[0].id; return false;">
go to the 1st DIV tag.
</a>
But since those links are useless when JS is not available, they should probably only be generated by JS in the first place.
No, there isn't. HTML is markup.
You should use dynamic HTML and JavaScript to achieve this.
you can do this by using this.href in java script
<a href="#" onload="this.href=this.href+document.getElementsByTagName('div')[0].id;" >
ex
<a href="targetWithInDoc.html" onload="this.href=this.href+'#block1';" >block 1</a>
This can't be done in the way you're attempting, but if JavaScript is running on the client anyway then you can still achieve the functionality you're looking for. You just need to separate the tag from the script:
Go to the first DIV tag
<script type="text/javascript">
document.getElementById('someID').href = '#' + document.getElementsByTagName('div')[0].id;
</script>
I know it wont help u now but I'm posting this for others who will come to this question by searching
we can achieve it this way :
<a href='<%#String.Concat("string1", "string2")%>'></a>
I'm awful with javascript and I'm having a problem with this one.
I'm using this code
<script>
function changeNavigation(id){
document.getElementById('members')
.innerHTML=document.getElementById(id).innerHTML
}
</script>
and HTML
`<span onClick="changeNavigation('members')" >MEMBERS</span>
<span onClick="changeNavigation('help')" >HELP</span>`
<div id="members>...</div>
<div id="help" style="display: none;>...</div>
But I can't get <span onClick="changeNavigation('members')" >MEMBERS</span> to actually go to an element "members" without duplicating everything inside of it in another id.
Is there a way to do this?
This can be done using only standard javascript, but personally I'd recommend going ahead and getting used to using jQuery. Here's an example jsfiddle using jQuery: http://jsfiddle.net/JnvCR/2/
Don't forget to include jQuery in your website:
<script src="http://code.jquery.com/jquery.js"></script>
You need to correct your syntax errors. Use onclick instead of onClick (pedantic). Make sure you close your attributes properly, you are missing a few closing " marks.
updated html
<span onclick="changeNavigation('members')" >MEMBERS</span>
<span onclick="changeNavigation('help')" >HELP</span>`
<div id="members">...</div>
<div id="help" style="display: none;">...</div>
There is also an error with your logic as you are simply replacing the contents of div#members with itself.
Updated JS without syntax errors, but still with dodgy logic
function changeNavigation(id){
document.getElementById('members').innerHTML=document.getElementById(id).innerHTML;
}
Demo fiddle
http://jsfiddle.net/ADGCV/
As far as your actual question goes, can you explain what you would like to happen a bit better??
Here's a possible solution http://jsfiddle.net/ADGCV/1/
This question already has answers here:
change html text from link with jquery
(7 answers)
Closed 7 years ago.
I have the following html structure:
<div class="event tiny">
Something
</div>
And I want to replace the text of this link with "Anything" …
When doing this …
$('.event a').replaceWith("Anything");
… the text is replaced but also the link is gone.
When doing this …
$('.event a').text().replaceWith("Anything");
… nothing happens.
Like this, if the new text is all the same.
$('.event a').text("Anything");
jQuery loops over the a elements, and replaces its content with the "Anything" text.
These suggestions, for setting the inner text & URL link within a a href didn't work for me (using JQuery v1.8.3)
Here's what did work though:
HTML
<a id="hrefAnalysisName" ></a>
JavaScript
$("a#hrefAnalysisName").attr("href", "/SomePage/ShowAnalysisDetails.aspx");
$("a#hrefAnalysisName").text("Show analysis");
Hope this helps!
You could also change the link by href if it's related to the URL.
$('a[href="/whatever"]').text("Anything");
You are able to get this result the next ways result will be the same:
HTML
<div class="event tiny">
<a class="html" href="/whatever">Something</a></br>
<a class="text" href="/whatever">Something</a></br>
<a class="replaceWith" href="/whatever">Something</a>
</div>
JS
$('.event a.html').html('Anything-html')
$('.event a.text').text('Anything-text')
$('.event a.replaceWith').replaceWith('<a class="replaceWith" href="/whatever">Anything-replaceWith</a>')