Trying to add a link in a Bootstrap popover (to go to a "Help" page). Seen all sorts of complicated solutions of getting a link inside a popover but someone suggested a simple onclick window.open. Seemed an interesting solution BUT I am in double/single quote hell.
I am using phpStorm which does a pretty good job highlighting errors. What I am trying is:
<i class="explain fa fa-question-circle text-primary"
data-toggle="popover" data-trigger="focus" tabindex="0" title="Popover title"
data-content="And here's some amazing content. It's very engaging.<a href='#'
onclick='window.open("http://www.google.com/");' title='test add link'>
link to content</a> Right?"></i>
Here is the original I copied:
link
My problem is that when I switch single to double I get an error at the initial " of ("http://www.google.com/"); and have an unclosed tag.
What am I not understanding re this call please.
Try using " within the HTML attribute:
<i class="explain fa fa-question-circle text-primary"
data-toggle="popover" data-trigger="focus" tabindex="0" title="Popover title"
data-content="And here's some amazing content. It's very engaging.<a href='#'
onclick="window.open('http://www.google.com/');" title='test add link'>
link to content</a> Right?"></i>
Compare here: How to properly escape quotes inside html attributes?
You need to include data-html="true" along with your other data-*
Here is the jsFiddle
Related
I have several dynamically created links which rendered as buttons and the buttons texts are replaced with icons. I need to toggle one of the link button icons when clicked. The method that I am using is not working out. See code below: I do not want to use JQuery at this time unless it’s within a function.
<a class="button" onclick="command('removeFormat');" title="Remove Format"><i class="fas fa-eraser"></i></a>
<a class="button" onclick="command('fullScreen');" title="Full Screen"><i class="fas fa-expand"></i></a>
<a class="button" onclick="doToggleView();" title="Source"><i class="fa fa-code"></i></a>
<a class="button" onclick="submitForm();" title="Save"><i class="far fa-save"></i></a>
//JS
function command(cmd){
if(cmd == 'fullScreen'){
$(".fa-expand").toggleClass('fa-expand fa-compress');
}else{
$(".fa-compress").toggleClass('fa-compress fa-expand');
}
}
I also try using the following codes:
$("i").toggleClass('fa-compress fa-expand');
$("a .button").find("i").toggleClass('fa-expand fa-compress');
This is the fix to resolve the issue.
function command(cmd){
$('i.fas').toggleClass('fa-expand fa-compress');
}
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 4 years ago.
I have 2 links:
<span id="a-start-container">
<a id="a-start" href="#">
<i class="fa fa-fw fa-play inner-circle-color"></i>
</a>
</span>
<span id="a-stop-container">
<a id="a-stop" href="#">
<i class="fa fa-fw fa-play inner-circle-color"></i>
</a>
</span>
When I click on the first one (a-start) I'm disabling it by removing the <a> element and at the same time I enable the second one (a-stop) by adding the <a> element:
$(document).ready(function() {
$("#a-start").click(function(e){
$("#a-stop-container").html("<a id='a-stop' href=''><i class='fa fa-fw fa-stop inner-circle-color'></a>");
$("#a-start-container").html("<i class='fa fa-fw fa-play inner-circle-color'>");
})
});
When I click on the second one (a-stop) I'm disabling it by removing the <a> element and at the same time I enable the first one (a-start) by adding the <a> element:
$(document).ready(function() {
$("#a-stop").click(function(e){
$("#a-start-container").html("<a id='a-start' href=''><i class='fa fa-fw fa-play inner-circle-color'></a>");
$("#a-stop-container").html("<i class='fa fa-fw fa-stop inner-circle-color-off'>");
})
});
The problem is that it works only for the first click. For example I click on the first one (a-start), then it changes a-start and enables a-stop. But then, when I click on a-stop, JavaScript does not react anymore. The same situation the other way round. Both work fine until the <a> element gets changed - then I have to reload the page to get it run again.
There is no information in the console.
What am I doing wrong?
you should consider changing it to on instead of click based on the pattern that you are using. Usage of on can be found her: http://api.jquery.com/on/
What you are doing is replacing entire DOM content on which handler/listener is registered and thus it dont get re-registered on DOM change which is happening after first click event.
However what seemed like you only wanted to toggle class-name and text of the link which should have been handled via http://api.jquery.com/toggleClass/ which would be more appropriate.
I've a situation where a user need to copy (click copy-to-clipboard icon) a link, however I've multiple dynamic links on a single page.
I've found the solution on the following post but I don't know a way to pass clicked icon ID to function as parameter and get the link copied to clipboard.
Click button copy to clipboard using jQuery
<i class="fa fa-link pull-right" id"copyToClipboard1"></i>
<i class="fa fa-link pull-right" id"copyToClipboard2"></i>
<i class="fa fa-link pull-right" id"copyToClipboard3"></i>
I went through the following post here in order to pass element ids to the function but no use as I just started crawling on jQuery path.
jQuery passing element ID into jquery statement?
Thanks in advance.
I don't have enough rep point therefore posting a new question [duplicate].
I am working with a plugin that provides IDX data for listings on a WordPress website. The plugin uses jQuery to query a database for information that it displays on the page. The plugin is not very customizable past simple styling and I would like to insert a link to save to favorites
The link for saving to favorites can be found by viewing this page:
http://angelandpatty.com/homes-for-sale-details/8635-La-Entrada-Avenue-Whittier-CA-90605/PW14217291/306/
All the property details pages have the "save to favorites" button at the top of the page. This is what I found with the inspector:
<a data-toggle="modal" data-target="#ihfsaveListing" class="btn btn-primary btn-detail-leadcapture save-listing-btn"> <span class="hidden-xs"> <i class="glyphicon glyphicon-heart fs-12"></i> Save To Favorites </span> <span class="visible-xs fs-12"> Save To<br>Favorites </span> </a>
I am assuming the data-target is what is causing the button to take action.
What I would like to do is find a way to insert this same button, perhaps with a different icon like a thumbs up or a star, into the property stubs.
The property stubs are viewable on pages like this:
http://angelandpatty.com/homes-for-sale-in-friendly-hills/
I would like to find a way to insert this possibly after #ihf-main-container .col-xs-9
If there is any way to do this with Javascript or with jQuery I sure would like to know.
Thank you for all of your assistance. I tried searching for some situation like this but was unlucky
Are you looking for the following answer?
var button = $('<a data-toggle="modal" data-target="#ihfsaveListing" class="btn btn-primary btn-detail-leadcapture save-listing-btn"> <span class="hidden-xs"> <i class="glyphicon glyphicon-heart fs-12"></i> Save To Favorites </span> <span class="visible-xs fs-12"> Save To<br>Favorites </span> </a>');
$('#ihf-main-container .col-xs-9:first').after(button);
See: http://api.jquery.com/after/
.after(content [, content ] )
Description: Insert content, specified by the parameter, after each element in the set of matched elements.
You may need to initialize the button as required.
I'm using jQuery 2.1.4
I have a popup working on a html element that is rended using MVC5 Razor view helper:
<a href="javascript:void(0);" class="btn" rel="popover" data-placement="left" data-original-title="#benefit.Name" data-html="true" data-content='#Html.Raw(benefit.ShortDescription)'>
#benefit.Name<br />
I've put single quotes around the html in data-content, which means it renders on the page fine.
However, I am using DataTables and am trying to export all the data and strip the html tags out of it.
This is what the view renders:
<a href="javascript:void(0);" class="btn" rel="popover" data-placement="left" data-original-title="Benefits for Practitioners" data-html="true" data-content="Credit Paraplanning is designed to assist the Practitioners clients utilise appropriate finance options: <br />
<ul>
<li><span style="font-size: 13px;">Maximising the range of services the Practitioner is seen to provide access to, </span></li>
<li><span style="font-size: 13px;">Saving time in research and preparing applications</span></li>
</ul>">
Benefits for Practitioners<br>
</a>
So it renders in double-quotes even though I specified single.
Now, when I try to get the html to strip the html tags out I get a jquery error:
"Syntax error, unrecognized expression: Credit Paraplanning is designed to assist the Practitioners clients utilise appropriate finance options: <br ></a>↵<ul>↵<li><span style="font-size: 13px;">Maximising the range of services the Practitioner is seen to provide access to, </span></li>↵<li><span style="font-size: 13px;">Saving time in research and preparing applications</span></li>↵</ul>"
Here is the code:
var datacontent = $(value).data("content");
if (datacontent === null) {
return '';
}
if ($(datacontent).text()) {// Throws error here.
// Get the string without html
}
I can understand that this $(datacontent) then causes the error. But how can I get around that so it works?
How can I get the html tags stripped out?
The way I solved this was by loading the content from a hidden div instead of setting it in the data-content property of the anchor.
<a href="javascript:void(0);" class="btn" rel="popover" data-placement="left" data-original-title="#benefit.Name" data-html="true">
#benefit.Name<br />
</a>
<div class="content" style="display:none;">
#Html.Raw(benefit.ShortDescription)
</div>
Then in the javascript:
$('[rel="popover"]').popover({
html: true,
content: function () {
return $($(this).next('.content')).html();
}
});