Javascript returning variable outside of intended markup - javascript

Ok, simple thing I'm overlooking here. The following javascript is returning the title variable outside the anchor tag rather than inside of it (as the code looks to be written to me).
I know I'm missing something obvious, like a method to return the variable as a string or something similar but I'm not sure what's going on.
Help?
EDIT: My mistake, it's "view site" which is being returned outside the <a> tag
// Convert logo img alt tags into div.caption 's
$(".imgs_wrap img").each(function(i, ele) {
var title = $(ele).attr('title');
var description = $(ele).attr('alt');
$(this).parent().prepend('<div class="caption popup"><p> ' +description + ' <a target="_blank" class="view_site" href="http://'+title+'" />View Site</a></div></p>');
});

You're mistakenly using the self-closing tag syntax when rendering the <a>:
bad line:
$(this).parent().prepend('<div class="caption popup"><p> ' +description + ' <a target="_blank" class="view_site" href="http://'+title+'" />View Site</a></div></p>');
change to:
$(this).parent().prepend('<div class="caption popup"><p> ' +description + ' <a target="_blank" class="view_site" href="http://'+title+'" >View Site</a></div></p>');

Related

Open image in new window in mako template

How can I open an image (with an url which is a mako variable) in a new window inside a mako template? I would like the simplest thing possible. This is what I'm trying to use:
<script>
function openImage(image_url) {
window.open('_blank').document.write('<img src="' + image_url + '">');
}
</script>
<img src="${image_overview_url}" onclick="openImage(${image_to_open_url});">
However, no new window opens with the code above... Any other options how to achieve this?
You might try putting quotes around your image url in your onclick attribute. I have replaced openImage(${image_to_open_url}) with openImage('${image_to_open_url}'). I don't think it can bare as you have it.
<script>
function openImage(image_url) {
window.open('_blank').document.write('<img src="' + image_url + '">');
}
</script>
<img src="${image_overview_url}" onclick="openImage('${image_to_open_url}');">
If you put the reference to the picture in the link and a target="_blank" it should work.
<img src="${image_overview_url}">

JavaScript "<SCRIPT>" in Image src attribute

So I have the following JavaScript function.
var LogoUrl = function() {
document.write('views/img/common/site-logo.svg');
}
And I want to have this function used in a html img src attribute.
Here is a example though this syntax wouldn't work, it should give you an idea of what I am looking for.
<img class="site-logo" src="<script> LogoUrl() </script>" alt="Site Logo">
And hoping this would export the following in the browser
<img class="site-logo" src="views/img/common/site-logo.svg" alt="Site Logo">
What is the best approach to doing this?
You can do this with the following instead:
<script>
document.write('<img class="site-logo" src="' + 'views/img/common/site-logo.svg' + '" alt="Site Logo">');
</script>
Since the script tag is indeed a tag, you can't put it inside the attributes of another tag.
A much better approach however would be the following:
Prepare a span element for the element to appear in, and give it a specific id. This would be your HTML:
This is my image: <span id="myImg"></span>.
and this will be your jQuery code:
$(function() {
$('<img>').class('site-logo')
.attr('src', 'views/img/common/site-logo.svg')
.attr('alt', 'Site Logo')
.appendTo('#myImg');
});
Alternatively, instead of preparing a span, you could prepare the image without defining a src attribute, with the following HTML:
This is my image: <img id="myImg" class="site-logo" alt="Site Logo">.
and the following jQuery code:
$(function() {
$('#myImg').attr('src', 'views/img/common/site-logo.svg');
});
You can use jquery $(document).ready() to set the image src.
$(document).ready(function (){
$('img.site-logo').attr('src', 'views/img/common/site-logo.svg');
});
You could do this - but this makes it obstructive.
<script>document.write("<img class=\"site-logo\" src=\"views/img/common/site-logo.svg\" alt=\"Site Logo\">")</script>
It is also not very organised because it ties everything so much with the markup that you might as well just have it as markup.
You're better off doing it properly by changing the src property
var logo = document.getElementsByClassName('site-logo')[0];
logo.src = 'http://www.develop.com/Images/v3/tech-symbols/angularjs_logo.png';
demo here http://jsfiddle.net/andyw_/XxTuA/268/
If this is all you need to do - I don't think it justifies the use of a selector library or front-end framework.

print javascript variable in HTML between quotes

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")
});

Enter param in inline javascript function

How can I add a param to the removeSound function in this JavaScript code?
I cannot get it to work.
var param = "111";
coder = '<a href="javascript:;" onClick="javascript: removeSound(' + param + ');" >Delete</a>'
Update
I do not know why code = was removed! This is needed to explain the problem context.
I just want to add a proper double quoting escape method to the answers as none showed a correct way to escape double quotes inside of an onClick attribute.
In HTML it is not sufficient to use only a backslash when escaping a JavaScript double quote. You need the proper HTML entity which is "
This is a live example:
Delete
However for readability I would recommend using Antony Scott's way by using single quotes.
Delete
To add the param as a variable from whatever script your HTML is generated in you should do this:
code = '<a href="javascript:;" onClick="javascript: removeSound("' + the_param + '");" >Delete</a>';
The other possible way should be:
code = '<a href="javascript:;" onClick="javascript: removeSound(\'' + the_param + '\');" >Delete</a>';
You need to use different quotes. Try something like this ...
<a href="javascript:;" onClick="javascript: removeSound('PARAM HERE');" >Delete</a>
try this
code = 'Delete';
try this
<a href="#" onClick="removeSound('121212')" >Delete</a>

Why am I losing my characters from my html string when trying to add html dynamically using javascript

I have a page that I am trying to dynamically add some links to. The links are getting added to the page fine, but the '[' and ']' at either end of the line are getting dropped. The code from my .js file is:
var html = "[ <a href='#'>Change</a> | <a href='#'>Remove </a> ]";
$(html).appendTo("#id123");
The result I want is:
[ <a href='#'>Change</a> | <a href='#'>Remove</a> ]
The result I'm getting is:
<a href='#'>Change</a> | <a href='#'>Remove</a>
If I wrap the line in a <span> tag like so:
var html = "<span>[ <a href='#'>Change</a> | <a href='#'>Remove </a> ]</span>";
$(html).appendTo("#id123");
it renders as expected. I set a breakpoint on the code and checked the html var right before the .appendTo and it contains the '[' and ']'.
Anyone know why this is happening? Are '[' and ']' special character that need escaped and I'm just forgetting that fact?
When you wrap your html variable inside of "$()", it creates a jQuery object out of it. That object removes anything that's outside of a markup tag (like <a> or <span>). You can take out the"[" and put "TESTING THIS" in it's place and you'll see it still won't show up.
So that's why you're losing it in your output.
No, those are just not valid XHTML. If you put the '[' and ']' in their own spans, like so:
"<span>[ </span><a href='#'>Change</a> | <a href='#'>Remove </a></span> ]</span>"
You would also get your expected text. jQuery will parse and create valid HTML, and the brackets aren't contained in an element.
I'm not sure why this happens. It seems like something internal to the appendTo() I tried it with append() and it worked out fine. So you could write $("#id123").append(html)

Categories