I am adding attributes to element and it has styling to it. So I was able to add the html tags inside of ``. It is working sometimes and sometimes not.
When it is working:
$('.card-text')
.text((size_avg).replace(/G/,'B'))
.attr({
'data-html': "true",
'data-original-title': `<strong><u>Size: </u></strong> Number of Subscribers, <strong>`+ addCommas(Math.round(size_avg)) + `</strong>`
});
The result for this is:
Size: Number of Subscribers, 11.5
This works fine
But when I do this:
$('.card-text')
.text(Math.round(act_sub).replace(/G/,'B'))
.attr({
'data-html': "true",
'data-original-title': `<strong>yoyoyo</strong>`
});
The result for this:
<strong>yoyoyo</strong>
Why is my code not working at the second time?
This is silly, but it is working for the second one when I add data-html="true" at the HTML part of the code instead of adding it to the JS.
HTML Code:
<p class="card-text lg-metric-val" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true">-</p>
And make the JS code:
$('.card-text')
.text(Math.round(act_sub).replace(/G/,'B'))
.attr({'data-original-title': `<strong>yoyoyo</strong>`
});
Its dumb but it is working. I don't know why it was working passing it as a jQuery attribute in one part of the code and not the other.
Thank you everyone!
Related
My website contains bootstrap popovers with HTML code. Such a popover looks like this (instead of the popup HTML, I've put in a placeholder for readability):
<mark data-content="Fancy HTML here" data-html="true" data-toggle="popover">
This mark has a popover
</mark>
Inserting real HTML in the data-content brings up the problem of escaping quotes properly. I found this question, which looks like an exact duplicate:
How do I encode html for Bootstrap popover and tooltip content
The accepted answer recommends to escape quotes to "
This doesn't work, the escaped quotes are not parsed properly. I've set up an example in this fiddle: https://jsfiddle.net/z4t2sud3/3/
Another option is to use single quotes ' for strings inside the popup. This option is also in the fiddle and it works properly.
But what if I want to nest deeper? For example, the HTML that I insert into the data-content could contain popovers, too. While this seems like a very bad design idea, it would be nice to make it work.
Here is a fiddle for the double-nested popover: https://jsfiddle.net/cwz3sayj/3/
Hoping the snippet below looks like what you wanted, you can pass an option while creating a popover instance where you set the content that will be showed when the instance is clicked. Since the first level isn't present in the DOM when you first run the script, you have to activate the second popover after the first one has been clicked. Using template literals, you can use either apostrophe or quotation mark in the html code you're writing.
$('#firstPopover')
.popover({
html: true,
content: `<button id="secondPopover" class="btn">
Goto second level
</button>`
})
.on('shown.bs.popover', function() {
$('#secondPopover').popover({
html: true,
content: `This is the last level`
});
});
<br />
<button id="firstPopover" data-html="true" class="btn">
Goto first level
</button>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
The only problem is see right now is when the first layer is closed before the second one.
when I use data-toggle="tooltip" with the tag <h>, it works normally:
<h3 data-toggle="tooltip" data-placement="right"
title="example"> example </h3>
but when I try to use with <a>/<td>/<span>, this does not work normally, it just shows the normal tool-tip, without any style.
I'm starting with JavaScript and CSS, so I'm a bit stuck.
What can I do to solve this?
(I'm aware there are similar questions to this but they haven't solved my problem)
Thanks in advance.
It works for me: https://jsfiddle.net/fgcb27aa/
Check if you have tooltips enabled in your current page.
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
As far as I know, I'm following the correct usage form on: http://api.jquery.com/multiple-attribute-selector/, but for whatever reason I'm not seeing, my code is not working. Each attribute works fine independently of one another (i.e.
$(".tonight_stat_peopleThumbs li[srcid="+srcid+"]") works and $(".tonight_stat_peopleThumbs li[style*=inline-block]") works) but they do not work together.
Here is my function in the JavaScript:
hidePatrons = function(srcid) {
$(".tonight_stat_peopleThumbs li[srcid="+srcid+"][style*=inline-block]").each(function(){
$(this).css({"display" : "none"});
});
}
Here is a piece from the HTML:
<ul activepage="1" class="tonight_stat_peopleThumbs" style="width:171px">
<li id="myid" class="myclass" ptype="people" ptime="11101101" style="display:inline-block;">
<a href="http://domain.com/users/#.php">
<img src="https://graph.facebook.com/#/picture" />
</a>
</li>
</ul>
NOTE: The '#' are inserted for privacy, assume they are fbid numbers.
Note that while CSS allows attribute selectors without quotes, there are quotes in every jQuery example. My experience has been that jQuery does not select reliably without quotes.
/* Good for CSS, bad for jQuery */
[foo=bar]
/* Good for both */
[foo="bar"]
Try
$('.tonight_stat_peopleThumbs li[srcid="' + srcid + '"][style*="inline-block"]')
mind the quoting!
try changing li[srcid="+srcid+"] to li[id="+srcid+"] I don't see a "srcid" attribute so I assume you are looking to search on the "id" attribute
can you please try like this way? the following is working fine for me for your HTML code.
hidePatrons = function(srcid) {
$("#tonight_stat_peopleThumbs li[ptype=people][style*=inline-block]").each(function(){
$(this).css({"display" : "none"});
});
}
note: # is for id, and . is for class. I changed . to # and srcid="+srcid+" to ptype=people from your code.
Here is the code I have:
$('#link').attr("href",link)
$('#link').text(text)
How do I change the title of a link using jQuery? I'm correctly changing the url, but I can't edit the text, what am I doing wrong?
<a id="link" href="" target="_blank">text</a>
$('#link').attr("href",data[1].url)
$('#link').attr("title",data[1].title)
title
I'm tring to simply change 2 things:
url
title (as show above)
I'm able to change the link, but the title won't change. I'm selecting the wrong trhing. Therefor is there a way to list all attr available to me? Or are you able to help me change the text title above?
Either answer is acceptable.
<div id="highlight" class="topicHighlight hero1">
<h3 id="h3">hero_1_large_text</h3>
<p id="p"></p>
<span id="coverTextSpan">hero_1_small_text</span>
<a id="link" href="url" target="_blank">text</a>
</div>
use html function:
$('#link').html(text);
or , if you are talking about the title attribute:
$('#link').attr('title','some title');
I think you need to use the HTML() method to change the content of the anchor tag.
Here is the link to the documentation.
you can try this javascript only.
document.getElementById('link').innerHTML = "new title";
i think this will surly helpful to you..
Thanks.
If all these answers don't work for you then you should check:
What element are you selecting and see if it's the correct one
What variable are you assigning to the title(data[1].title)
I recommend using firebug in firefox or using the dev console in google chrome, anduse the console.log() function to log things so that you don't have to alert() them all the time.
I'm learning Javascript right now. Can anybody tell me why the second code block traces a empty path for -launch(this)- but using the first code block it gives me the right path?
"<form action='"+launchwebsite+"/subsite/' method='post' target='_blank' onsubmit='launch(this)'>"
and this not:
"<a onclick='launch(this)' title='launch' class='iblack' /></a></div>"
Best
Uli
The this refers to the the element it is attached to. In the first snippet it is the <form>- and in the second the <a>-element. Also the <a> lacks a href-attribute.
I'm not shure but if the code you put is exactly what you are testing you are missing a ;
<a onclick='launch(this)' title='launch' class='iblack' /></a></div> <-- You're Version
<a onclick='launch(this);' title='launch' class='iblack' /></a></div>
Else I never really did an onclick on a html control I usually do href="" to call another page php per exemple and in that page to the treatment I want.
Another point I`ve looked at is to catch this command in javascript you would need you to call and "blank" page as of
<a href="#" onClick='launch(this);' title='launch' class='iblack' /></a></div>
This last code acutally worked for me! Keep me in touch, wanna see if this works out for you!!
Patrick