added herf element not click-able - javascript

I am trying to add a download element to the page. I click it using Greasemonkey.
The new div has been added to the page but the download window is not opening.
var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body') [0].appendChild(iDiv);
iDiv.innerHTML = '<button class=button> <a href=' + link + ' target=_blank> </button>';
document.getElementsByClassName('button') [0].click();

<a href=http://somesite.com target=_blank> is invalid. You're missing quotes around the URL.
Also, as #Springfield pointed out, you're not closing your <a> tag.
Solution :
iDiv.innerHTML = '<button class="button"> Link</button>';
which renders :
iDiv.innerHTML = '<button class="button"> Link</button>';

Don't wanna be rude, but first questions first: Where does your anchor-tag end?
You open an a-tag, but its content as well as the end tag are both missing.

Related

Prevent page reload when blank link is clicked?

I have a web page to download files using a button.But for some cases the files does not exit and download links are blank...So whenever the user clicks the link page just reloads.It would have been great if i could somehow disable the page reload and display an alert that says file not yet available..
This is the download link button code.row["slink"] gives the download link and may become empty sometime.
'<button type="button" class="btn btn-info " data-row-id="' + row.id + '">Download</buttn> ';
Check if row['slink'] is present, else replace href with javascript:alert(...)(This won't do page reload for blank href, and show an alert):
var href = row["slink"].trim().length > 0 ? row["slink"] : "javascript:alert('File Not Yet Available')"
'<button type="button" class="btn btn-info " data-row-id="' + row.id + '">Download</buttn> ';
Simple Solution
You can set target to blank:
<a ... ... target="_blank" > ... </a>
This will open it in a new tab instead of refreshing.
More Sophisticated Approach:
You can also use a conditional to build your anchor tag.
if (row["slink"] == "")
{
var atag = '<button type="button" class="btn btn-info " data-row-id="' + row.id + '">Download</button> ';
}
This will give an alert if there is no file.

Missing closing tag from first item inserted into HTML page with jQuery

The first item in my list group has it's '< /a>' removed upon insertion into the page and my question is why and how do I fix this? If I console the html generated before and after the insertion the missing tag is there.
Here is the generator code:
function ObjMatched(item1, item2) {
this.item1 = item1;
this.item2 = item2;
}
var obj_list = '<div class="list-group>';
for (var i = 0; i < Obj.length;i++) {
if (Obj[i].item1 == selection) {
ObjMatched.item1 = Obj[i].item1;
ObjMatched.item2 = Obj[i].item2;
obj_list += '<a href="#" class="list-group-item" data-item1="' + ObjMatched.item1 + '" data-item2="' + ObjMatched.item2 + '" >' + ObjMatched.item1 + ', ' + ObjMatched.item2 + '</a>';
}
}
obj_list += '</div>';
$("#obj_block").append(obj_list);
Here is the HTML output:
<div id="obj_block">
<div class="list_group">
<a href="#" class="list-group-item" data-item1="mary" data-item2="smith">mary, smith
tom, jones
dirty, harry
</div>
</div>
As a consequence the first item does not appear as part of the list within the web browser and is not clickable. I have tried replacing append() with html() to no avail.
I have tested this in Chrome, Safari and Firefox all with the same result.
What am I doing wrong?
You're not closing the quotes on your first div:
var obj_list = '<div class="list-group>';
Change it to:
var obj_list = '<div class="list-group">';
And it will work. It's happening because the first apostrophe is closing this div and making the anchor tag invalid.

How to get html into a bootstrap 2.3.2 popover, dynamically

I have a button where I would like to create a bootstrap popover containing html dynamically when I hover over it. So far I have:
$(".btn.btn-navbar").hover(function() {
html = '<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>';
$link = $('<a href="myreference.html" class="p1" data-html="true" data-bind="popover"'
+ ' data-content="' + html + '">');
console.log('$link', $link);
$(this).html($link);
// Trigger the popover to open
$link = $(this).find('a');
$link.popover("show");
}, function() {
console.log('$hi there ');
});
jsfiddle
I'm having trouble getting the html into the popover properly.
Can someone give me a hand with this.
Not sure if you need to create a link dynamically with popover or you need to create popover with html inside only. I have a jsFiddle showing how to create popover dynamically with custom html inside.
function createHoverPopover(htmlContent, jqueryElement, direction) {
jqueryElement.popover({
html: true,
placement: direction,
trigger: "hover",
content: htmlContent,
selector: true
}); }
Your actual problem here is ' data-content="' + html + '">'
You should do the concatenating your self to see what is happening.
The result of it would be:
<a href="myreference.html" class="p1" data-html="true" data-bind="popover" data-content="<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>">
The problem is at this part:
data-content="<ul class="nav"><li>
The data-content attribute will only contain <ul class=, additionally your <a> tag will end here data-content="<ul class="nav">
To correctly add the html to the data-content you should do it this way:
html = '<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>';
$link = $('<a href="myreference.html" class="p1" data-html="true" data-bind="popover">');
$link.data('content', html);
Your problem is the string concatenation, I would create the html element like
html = '<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>';
$link = $('<a />', {
href: 'myreference.html',
"data-html": 'true',
"data-bind": 'popover',
"data-content": html
});
Demo: Fiddle

adding class to this href .. not working?

We have uplaod function on our site. And uploaded file, displays link which on click user can see file they have uploaded in new window.
We also use divbox http://jquery.phpbasic.com/divbox
My code is this:
$("#uploader" + queueId).html("
<div class='cancel'>
<input class='button_cancel' name='removeFile' fileName='"
+fileObj.name.replace("'", "%27")+"' type='button'>
</div>
<a class='lightbox' href='" + self.attr("path")
+ fileObj.name.replace("'", "%27") + "'><span class='fileName'>"
+fileObj.name+"</span></a>");
For some reason when we click on the link, it still opens in new window and doesnt initiate the lightbox.
In my page i see this ( all normal )
<a class="lightbox" href="uploads/nutshell.png">
<span class="fileName">nutshell.png</span>
</a>
Which should fire the lightbox.. Anything scream out at you in the js code I posted above ? I am wondering if its self.attr("path")
Here is what we have::::::
in the js for divbox we have
$('.lightbox').divbox({caption: false});
in the js for the uploader we have.
$("#uploader" + queueId).html("<div class='cancel'><input class='button_cancel' name='removeFile' fileName='"+fileObj.name.replace("'", "%27")+"' type='button'></div><a class='lightbox' href='" + self.attr("path") + fileObj.name.replace("'", "%27") + "'><span class='fileName'>"+fileObj.name+"</span></a>");
Presumably you're doing something like this:
$('a.lightbox').divbox({ ... })
before you add the <a> in question with:
$("#uploader" + queueId).html("...");
$('a.lightbox') only applies to elements that exist on the page when $('a.lightbox') is called, it won't bind DivBox to elements that are added to the page later. You'll have to bind DivBox to the new <a> that you added with something like this:
$("#uploader" + queueId).html("...");
$('#uploader' + queueId).find('a.lightbox').divbox({ /* and whatever options you need */ });
Rough demo of the technique: http://jsfiddle.net/ambiguous/EswfB/
To build off of mu is too short's answer, you could implement like so:
$("#uploader" + queueId).html("
<div class='cancel'>
<input class='button_cancel' name='removeFile' fileName='"+fileObj.name.replace("'", "%27")+"' type='button'>
</div>
<a class='lightbox' href='" + self.attr("path")
+ fileObj.name.replace("'", "%27") + "'><span class='fileName'>"
+fileObj.name+"</span></a>")
.find('a.lightbox')
.divbox({ /* and whatever options you need */ });
And simply chain the commands into one.

Make a hyper link on Html link with Jquery

I have Html contents like
<span>
http://j.mp/eUcRNK
</span>
I want to hyperlink on above html text like this
<span>
<a href="http://j.mp/eUcRNK" class="link" target="_blank">
http://j.mp/eUcRNK
</a>
</span>
How I can do that..
$('span').html(function(i,txt){
return $('<a>').text(txt).attr({'target':'_blank', 'href': txt }).addClass('link');
});
demo
based on the comments below, I guess this solves it.
$('span').html(function(i,txt){
return replaceURLWithHTMLLinks(txt);
});
function replaceURLWithHTMLLinks(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
return text.replace(exp,"<a class='link' href='$1' target='_blank' >$1</a>");
}
updated fiddle
for jquery 1.3.2, just change the jQuery codes a bit.
var span = $('span');
span.html(replaceURLWithHTMLLinks(span.html()));
another updated fiddle
Try
$("span").each(function(){
var text = $(this).text();
$(this).contents().wrap("<a class='link' href='" + text + "' target='_blank' />")
});

Categories