Develop Reference

Why is my `` working sometimes and not others?

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!

file_get_contents not working in a dynamic js call

So, I have been given an admin built in php and I was asked to implement an already done admin built in aspx into the new one(changing the css and so), the thing is that i want to dynamically "insert" into the main admin structure which is made in php only the part that's gonna be run in aspx, I made a reserach and found out that the way to do it was using file_get_contents and yeah it works, the thing is that i want that to show after I click on a link so I put the f_g_c into a js function to do so, the thing is that it doesnt work, it doesnt insert anything, it does it outside a function, but inside it just won't
<li class="active">
<a id="solicitud" href="" >
<i class="fa fa-file-text-o"></i>
<span>Solicitudes</span>
<span class="label label-primary label-circle pull-right">2</span>
</a>
var li = document.getElementById('solicitud');
li.onclick = aparecer();
function aparecer() {
<?php
$hola= "./solicitudAAA.aspx";
?>
var lo = document.getElementById('container');
lo.innerHTML ="<?php echo file_get_contents($hola); ?>";
return false;
}
above there are the section of code or well the link i want to click so it shows the aspx and the second section of code is the actual script, i don't know what I'm doing wrong and why inside the scriptit won't work, thanks for your answers!

The problem with your code has something to do with your link's href. A blank href in your anchor tag will refresh the page causing the onclick in your script to not work. How about adding the following:
<a href="javascript: void(0)" id="solicitud" onclick="aparecer();">
<i class="fa fa-file-text-o"></i>
<span>Solicitudes</span>
<span class="label label-primary label-circle pull-right">2</span>
</a>
To make things easier, add the function to the onclick attribute of the anchor tag to call the function rather than coding it inside the script.
Since onclick attribute(that contains the calling of function) is added to the anchor tag, you can remove this in the script:
var li = document.getElementById('solicitud');
li.onclick = aparecer();
I hope this helps!

javascript click a button using a script

I would like to click a button using javascript without physically clicking on the bottom.
Below is what I have tried:
<li id="#attendBtn"><a style="background:#FF6400;" href="#attend"><i class="fa fa-check"></i> Attend</a></li>
echo "<script>
document.getElementById('attendBtn').click();
</script>";
but it does not seem to work. any help would be appreciated

Remove the # in <li id="#attendBtn">.
document.getElementById('attendBtn').click();
<li id="attendBtn" onclick="console.log(1);"><a style="background:#FF6400;" href="#attend"><i class="fa fa-check"></i> Attend</a></li>
In javascript, if you use getElementById, you only need to pass the id name. Other frameworks such as jQuery use the # as an alias to id

document.getElementById('attendBtn').onclick();

If I understand your question correctly, you want to trigger the click event without actually having to click on the button?
You should look into using jQuery for that then.
Then you can do this:
$('#attendBtn').click(function() {
console.log('button was clicked');
});
And trigger it with this:
$('#attendBtn').trigger('click');
Also, I'm guessing the rest of the html is not posted, as an 'li' should be in a 'ul'?

Writing html tag instead of "text" in javascript file

I am using the bxslider carousel that generates a slider, as part of the settings I have:
...
nextText:"Next",
prevText:"Prev",
...
So the next button in the slider has the text "Next" (and same thing for the previous button). But instead of the text, I want to add a span with an image. How can I change that so it displays something like <span class="glyphicon glyphicon-search"></span> instead of "Next" or "Prev" text?
Thanks in advance
The website link

I have solved the problem by means of this link. I am sorry for this weak question. I have added like that;
nextText: '<span class="glyphicon glyphicon-search"></span>'

If you want to add the tag to an existing HTML tag, such as a div with id myDiv:
getElementById('myDiv').innerHTML = '<span class="glyphicon glyphicon-search"></span>';
or
getElementById('myDiv').appendChild('<span class="glyphicon glyphicon-search"></span>');

HTML markup inside jquery

I want to add a icon next to some link text that makes an accordion expand and collapse. The text already changes from 'See more' to 'See less'. see the working demo - http://bootply.com/106271
So adding:
<span class="glyphicon glyphicon-chevron-up"></span>
stops the text change work.
Here is the broken version trying to add the icon: http://bootply.com/106270
$(document).ready(function(){
$("#morebtn").click(function(){
$(this).html($(this).html() == "See more <span class="glyphicon glyphicon-chevron-up"></span>" ? "See less" : "See more <span class="glyphicon glyphicon-chevron-up"></span>");
});
});

You have mismatching quotes:
"See more <span class="glyphicon glyphicon-chevron-up" ... "
^ ^ ^ ^
To fix this, either use single quotes or escape the double quotes:
'See more <span class=" ... " ... '
"See more <span class=\" ... \" ... "
Working Bootply Demo.

Use .indexOf() to check the availability of a particular word. And also keep in mind that dont use " inside of a string which is being constructed by " instead use '
Try,
$(document).ready(function(){
$("#morebtn").click(function(){
$(this).html($(this).html().indexOf("See more") > -1 ? "See less" : "See more <span class='glyphicon glyphicon-chevron-up'></span>");
});
});

Overriding the whole web site html content with
$(this).hmtl("");
Isn´t a good idea.
Instead of using that, you doing it like this:
$(document).ready(function()
{
$("#morebtn").click(function()
{
$("#morebtn").val($("#morebtn").val().indexOf("See more") === 1 ?
$("#morebtn").val("See less")
: $("#morebtn").val('See more <span class="glyphicon glyphicon-chevron-up"></span>'));
}
);
}
);
It is also worth to mention, that this line could not work:
"See more <span class="glyphicon glyphicon-chevron-up"
Your JavaScript console should show up a syntax error for this. Because you can´t use implicit the same quotes withou escaping the inner ones. You have to escape your inner double quotes like this:
class=\"glyphicon glyphicon-chevron-up\"
OR: I highly recommend you to use the alternative method with single and double quotes (the order doesn´t matter), because it´s easier readable for human beings. It could be single or double first):
'See more <span class="glyphicon glyphicon-chevron-up"></span>'
// or:
"See more <span class='glyphicon glyphicon-chevron-up'></span>"
Hopefully this has helped you.