Probably a rudimentary for some, but this is driving me crazy! I am not sure what I did wrong - I cannot/not allowed(?) to append a href - it is simply didn't get processed at all.
$('#lastViewed').append('<a href="/Path/To?_q="' + string + '>');
$('#lastViewed').append(.....some other stuffs.....);
$('#lastViewed').append('</a>');
I am trying to wrap the "other stuffs" with a
Thanks!
Edit
The complete line:
$('#lastViewed').append('<div id="id_' + x + '<a href="/PVProduct/ProductDetail?_productID=' + JSON.parse(localStorage.getItem("pid_" + x)).productID);
This is incorrect. You don't append() opening and closing tags like that. Instead, append() the whole tag. Or even better, create the a element and append() it:
$a = $('<a>').attr('href', yourHref).html(yourText);
$('#lastViewed').append($a);
you can use it
var link=document.createElement("a");
link.id="idName";
link.setAttribute("href", "your link");
document.appendChild(link);
Related
I am performing some DOM manipulation once my page loads and I was hoping to add some html right before an a specific div on the page. Not sure what I'm doing wrong here, I'm sure there's a simple way to accomplish this...
var finalStringHtml = '<div id="chartLinks">' + tableString + '</div>';
$(finalStringHtml.html().insertBefore("#chart_div")); //fails
$(toString(finalStringHtml).html().insertBefore("#chart_div")); //fails
You don't need the .html() call. (full docs: http://api.jquery.com/insertbefore/)
Try:
$(finalStringHtml).insertBefore("#chart_div");
If you want to, you can do the full code on one line and not create the variable:
$('<div id="chartLinks">' + tableString + '</div>').insertBefore("#chart_div");
Updated:
I'd like to append a self made "tweet this" button after blockquotes with jQuery. I figured out the following three steps are necesarry (some are already resolved thanks to the stackoverflow community):
[resolved] appending anything to the blockquote
[resolved] appending a working twitter share link to the blockquote
making sure it works with multiple blockquotes
The code I'm using at the moment is:
<script type="text/javascript">
var completeurl = window.location.protocol + "//" + window.location.host + window.location.pathname + window.location.search;
completeurl = encodeURIComponent(completeurl);
var twshare = "https://twitter.com/share?url=" + completeurl;
var bq = $( "blockquote" ).text()
$("blockquote").append("<a href='" + twshare + "&text=" + bq + "'>Click to tweet</a>");
</script>
So the current state is: I'm stuck at #3, making it work with multiple blockquotes per page. Ideally it wouldn't be necesarry to manually assign IDs or something similar. So fully automated one #tweet this" button per blockquote. Is that possible?
Thanks!
Without seeing adequate markup, it is difficult to point where the problem is.
However, it works just fine.
See this fiddle: http://jsfiddle.net/JvT7h/2/
$("blockquote").append("<a href='http://twitter.com'>Click to tweet</a>");
Aside: append doesn't add an element after, but as a child inside.
Update:
As per your comments you need to customize the anchor link to be appended to multiple blockquotes depending upon the text of each blockquote.
See this updated demo fiddle: http://jsfiddle.net/abhitalks/JvT7h/3/
JQuery:
$("blockquote").each(function(){
var $link = $("<a />"),
linkText = "Click to tweet",
url = twshare + "&text=" + $(this).text();
$link.attr("href", url);
$link.text(linkText);
$(this).append($link);
});
You need to iterate over all blockquotes and then use $(this) to append the customized anchor.
I have a simple stupid question. I want to add a URL which is clickable in JavaScript to my HTML
var a = document.createElement('a');
a.setAttribute('href', 'http://example.at');
$("#upcomingEvents").append('Please check our website. ' + a);
The URL appears, but it is not clickable, how can I change that?
Thanks!
You have to put some text inside the link so there is something to click:
a.innerText='click me!';
And then you can't concatenate a string to a DOM element.
$("#upcomingEvents").append('Please check our website.');
$("#upcomingEvents").append(a);
Demo
Try it like this:
$("#upcomingEvents").append('Please check our website. ');
$("#upcomingEvents").append(a);
The + operator causes the DOMNode to be cast to a string, you don't want that.
I'm working with a plugin that is only Javascript. I need to have it dynamically create a DIV element with an advertisement in it.
I can't figure out why this doesn't work:
$(this).append('<div class="overlay-background">Advertisement
<script type="text-javascript">
GA_googleFillSlot("blog_landing_right_rectangle_300x250");
</script>'
It results in the element created with "Hello World" but it does not execute the GA-googleFillSlot function.
appending HTML into the DOM does not cause the browser to evaluate any script tags in said appended HTML.
If you really wanted to, you could evaluate the javascript by using eval():
eval($(this).find("script").text());
I know this is an old question but I've had a similar problem today.
The solution was using createContextualFragment.
My code looks something like this:
var tagString = '<script async type="text/javascript" src="path_to_script"></script>';
var range = document.createRange();
range.selectNode(document.getElementsByTagName("BODY")[0]);
var documentFragment = range.createContextualFragment(tagString);
document.body.appendChild(documentFragment);
This code works in my browser.
$('body').append('<script>alert("test");<' + '/' + 'script>');
so it might be that $(this) is what is actually causing your problem.
Can you replace it with 'body' and see if it works like that?
One workaround in your case could be to append a fake image with an onload event:
<img src="blank.gif" onload="GA_googleFillSlot('blog_landing_right_rectangle_300x250')" />
since your are in javascript, you can append and then execute the code:
$(this).append('<div class="overlay-background">Advertisement</div>');
GA_googleFillSlot("blog_landing_right_rectangle_300x250");
Please try:
s = '<' + 'script type="text-javascript">' +
'GA_googleFillSlot("blog_landing_right_rectangle_300x250");' +
'<' + '/' + 'script>';
$(this).append(s);
UPD: alas, this won't work, please use wless1's solution instead
I would like to split some content from an "a" html tag. I was starting over with jquery. My code is like this but it is not working:
$("a.uribb").each(function() {
var id = $(this).attr("href").replace("http://dereferer.org/?", "");
$(this).append(+id+);
});
And the HTML tag is this:
<a href="http://dereferer.org/?http://example.com/" target="_blank" class="uribb">
http://example.com/
</a>
I wanted to split out the http://dereferer.org/? part and leave the other there. How could I do this?
Try to use .text() instead of .append() if you want to replace the content. Also, there is no need for the + before and after the id.
You could try this instead:
var id = $(this).attr("href").replace("http://dereferer.org/?", "");
$(this).text(id);
Update
Reading through the question again, I'm not sure if you want to replace the content of the a-tag or the the value of the href. In case of the latter, try this:
var id = $(this).attr("href").replace("http://dereferer.org/?", "");
$(this).attr("href", id);
Notice
Since jQuery 1.6, it is preferred to use .prop() instead of .attr().
How about that?
$("a.uribb").attr("href", function(i, val) {
return val.substring(val.indexOf("?") + 1);
});
DEMO: http://jsfiddle.net/zQdL4/
It's interesting but for your markup the following code should also work :)
$("a.uribb").attr("href", function() {
return $.trim(this.innerHTML);
});
Right, so what you want is this.
<a href="http://example.com/">...
Try this.
$("a.uribb").each(function() {
var indirect_url = $(this).prop("href");
var direct_url = indirect_url.replace("http://dereferer.org/?", "")
$(this).prop('href', direct_url);
});
You could of course do this in fewer lines, but this way it's clear what's going on. Specifically, replace() does not modify the string it operates on.