(Bootstrap 3.1.1) popover on show reset my addClass? - javascript

<button id="search-district" type="button" class="btn btn-sm btn-success" data-toggle="popover" data-placement="bottom" title="<a href='#' class='pull-right popover-close' onclick='$("#search-district").popover("hide");'>×</a>" data-html="true" data-content="
<a id='id_district_100' href='#' onclick='ChangeDistrictSelection("100");'>District123</a>
"><span class="glyphicon glyphicon-plus"></span> Dsitricts <span id="district_bracket" style="display:none;">[<span id="count_districts_">0</span>]</span></button>
and JavaScript function
function ChangeDistrictSelection(id)
{
$('#id_district_'+id).addClass("selected");
}
When I'm clicked to District123, my JavaScript add Class "active"... But, after that when action popover on show, popover reset my class :(

What ever your selected css is you have to mark it with !important in order to override existing one.
Example
.selected {
background-color:gray !important;
}

Your question is not clear much. Please explain it we can help you so.
And also please not this also.
You are passing '100' to the function using onclick and then you are trying to get the element by id. But is already is equal to the id.
WHY??
You are doing wrong here. See your codes.
<a id='id_district_100' href='#' onclick='ChangeDistrictSelection("100");'>District123</a>
and you function also have a look
function ChangeDistrictSelection(id) {
//id will be 100 as your code.
//again you are trying to get the element by id. see your html <a id="id_district_100">
//It's already equal to $('#id_district_'+100) - why do you passing that 100 and trying to get element by id??
$('#id_district_'+id).addClass("selected");
}
If you want to add the class to that element you can use this.
function ChangeDistrictSelection(id){
//alert(id);
$(id).addClass('selected');
}
In html pass like that
<a id='id_district_100' href="#" onclick='ChangeDistrictSelection(id)'>District123</a>

ok... v2
html:
<button id="search-district" type="button" class="btn btn-sm btn-success" data-toggle="popover" data-placement="bottom" title="<a href='#' class='pull-right popover-close' onclick='$("#search-district").popover("hide");'>×</a>‌​" data-html="true" data-content=" <a id='id_district_100' href='#' onclick='ChangeDistrictSelectionCss("100");'>District123</a> ... ">
js:
function ChangeDistrictSelectionCSS(id){
$('#id_district_'+id).css("color","red");
}
It's work, but when clicked button (id="search-district") again, css color is not red

Related

Selecting anchors within div by div id

New to JS, just dipping in to solve a problem (I bet everyone says that!). I need to write a script to select an anchor and insert an <img>.
There are several <a>'s within a div that has an id of _nwa_social_logins. I need to add an img tag to one of those. I'm not sure of the best way of doing this.
It's a captive portal page served up by a product we use, and the bit I'm interested in looks like this:
<div id="_nwa_social_logins">
<a class="btn btn-facebook" href="<url>/guest/social-media.php?oauth_init=1&oauth=facebook" title="">
<i class="icon-facebook"></i> Facebook
</a>
<a class="btn btn-linkedin" href="https://<url>/guest/social-media.php?oauth_init=1&oauth=linkedin" title="">
<i class="icon-linkedin"></i> LinkedIn
</a>
<a class="btn btn-google" href="https://<url>/guest/social-media.php?oauth_init=1&oauth=google" title="">
<i class="icon-google"></i> Google
</a>
<a class="btn btn-twitter" href="https://<url>/guest/social-media.php?oauth_init=1&oauth=twitter" title="">
<i class="icon-twitter"></i> Twitter
</a>
<a class="btn btn-github" href="https://<url>/guest/social-media.php?oauth_init=1&oauth=azure" title=""><img src="images/icon-microsoft.png" align="middle">Microsoft Azure AD
</a>
<a class="btn btn-github" href="https://<url>/guest/social-media.php?oauth_init=1&oauth=amazon" title="">Amazon</a>
</div>
So far I have
let items = document.querySelector('#_nwa_social_logins a');
To be honest I don't know how to even check if that has selected anything.
I need to select the Amazon anchor and set an <img> for the button. If the selection above gives me a list of <a>s (objects?) can I loop through them and look for one that has an href value that ends with 'amazon'?
Thank you
You can do this:
<script>
window.addEventListener('load', () => {
let links = document.querySelectorAll('#_nwa_social_logins a');
links.forEach((link, index) => {
if (link.getAttribute("href").toLowerCase().lastIndexOf('amazon') >= 0)
link.innerHTML = '<img src="someimage">';
});
});
</script>

Rewrite inline javascript to external function - this reference

I'm trying to rewrite some javascript code from an inline button onclick call to an regular javascript function.
I used the this reference in my code to remove a table column, which worked perfectly fine. Since I need to use the line of code on a few places I want it to be in a regular javascript function.
What I had:
<button type="button" tabindex="-1" class="btn btn-secondary btn-tblrmv" onclick="if(!$(this).closest('tr').hasClass('notDeletable')){ $(this).closest('tr').remove(); }">
<i class="mdi mdi-minus"></i>
</button>
as for the javasript function itself:
function removeTableRow(){
if(!$(this).closest('tr').hasClass('notDeletable')){
$(this).closest('tr').remove();
}
}
Could someone please explain, why this isn't working as intended?
This do not work because this is not referring to the current element. Try with:
HTML:
<button type="button" tabindex="-1" class="btn btn-secondary btn-tblrmv" onclick="removeTableRow(this)">
<i class="mdi mdi-minus"></i>
</button>
JS:
function removeTableRow (row) {
if (!$(row).closest('tr').hasClass('notDeletable')) {
$(row).closest('tr').remove();
}
}

How can I get title attribute of clicked button?

I'm working on small angular project, and there are 3 buttons on my form, I would like to receive their title when they are clicked. They are clicked normally one by one, what I've tried so far:
Here is my html:
<div class="extra-btns">
<button type="button" title="Title 1" (click)="getMyTitleOne($event)" class="btn xbutton-square" style="font-size: 16px;"><i class="fas fa-newspaper fa-fw"></i></button>
<button type="button" title="Title 2" (click)="getMyTitleTwo($event)" class="btn xbutton-square"><i class="fas fa-fw"></i></button>
</div>
My typescript code:
getMyTitleOne($event) {
console.log($event.target.title);
}
getMyTitleTwo($event) {
console.log($event.target.title);
}
But in my console sometimes I get values and sometimes I don't, very weird, but most of the time values are undefined:
Thanks guys
Cheers
use template variables :
<button #button1 (click)="log(button1.title)" title="Hello, world !">Click me !</button>
Stackblitz

grab value of div using class

Inside div i set a value now i want to grab this value using class. But code bellow not returns the value. Whats wrong i am doing here? how can i solve that?
<div title="Find on Amazon" value="352197909440" class="btn btn-default btnAmazon" style="padding-top:5px !important" data-toggle="modal" data-target="#FindOnAmazonModal">
<i class="fa fa-bullseye"></i>
</div>
$(".btnAmazon").on("click", function () {
var d = $(".btnAmazon").val();
alert(d);
});
Inside div i set a value now i want to grab this value using class
Looks like you are are looking for value attribute of div
val() is for input elements, replace it with attr( "value" )
var d = $(".btnAmazon").attr( "value" );
You're trying to read the div's "value" attribute.
console.log($('div').val()) // This won't work; DIVs don't have a value
console.log($('div').attr('value')) // but this one has an attribute named value
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="Find on Amazon" value="352197909440" class="btn btn-default btnAmazon" style="padding-top:5px !important" data-toggle="modal" data-target="#FindOnAmazonModal">
<i class="fa fa-bullseye"></i>
</div>
Note that, strictly speaking, value is not a valid attribute -- ever since the XHTML era, nonstandard attributes are supposed to have a data- or x- prefix -- but it will work just fine in all browsers. If code validation is a concern, the "correct" way to handle this would be:
// either of these will work, interchangeably:
console.log($("div").data("value"))
console.log($("div").attr("data-value"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="Find on Amazon" data-value="352197909440" class="btn btn-default btnAmazon" style="padding-top:5px !important" data-toggle="modal" data-target="#FindOnAmazonModal">
<i class="fa fa-bullseye"></i>
</div>
I could see that you want to read the value attribute, which cannot be used for <div> tag. Please use either data-value:
data-value="396495"
And get it using:
.data("value");
This is the right method. Using .attr("value") might work in some browsers and not sure if it works seamlessly everywhere. But that's what you need.
I think "value" as a attribute is not allowed on div elements.
Try it like this:
jQuery(document).ready(function($){
$(".btnAmazon").on("click", function () {
var d = $(this).attr("data-value");
alert(d);
});
});
.btn{
background: green;
padding: 20px;
text-align:center;
display:inline-block;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="Find on Amazon" data-value="352197909440" class="btn btn-default
btnAmazon" data-toggle="modal" data-
target="#FindOnAmazonModal">
<i class="fa fa-bullseye"></i>
Button
</div>
In order to retrieve to attribute named value (the 352197909440 in your example) you will need to use
var d = $(".btnAmazon").attr('value');
.html() will show you the html within your Div. i.e.
<i class="fa fa-bullseye"></i>
A div can't have a value attribute, it is invalid markup.
You, however, can use custom data-* attributes (as you already use in your code).
So first of change your HTML
<div title="Find on Amazon" data-value="352197909440" class="btn btn-default btnAmazon" style="padding-top:5px !important" data-toggle="modal" data-target="#FindOnAmazonModal">
<i class="fa fa-bullseye"></i>
</div>
Then you can use $('.btnAmazon').data('value') to get its value...
Working example:
$(".btnAmazon").on("click", function () {
var d = $(".btnAmazon").data('value');
alert(d);
});
/* for the demo */
div {
width: 50px;
height: 50px;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="Find on Amazon" data-value="352197909440" class="btn btn-default btnAmazon" style="padding-top:5px !important" data-toggle="modal" data-target="#FindOnAmazonModal">
<i class="fa fa-bullseye"></i>
</div>

How to change button in twitter bootstrap using jquery

I have a button:
<button
class="btn btn-animated btn-default ban-user-btn"
id="btn-ban-username" // the username is generated by twig
data-nick="username" // the username is generated by twig
data-toggle="modal"
data-target="#statusModal"
>
Ban user
<i class="fa fa-ban"></i>
</button>
I need to change the button class from "btn-default ban-user-btn" to "btn-success unlock-user-btn".
When I do following in my javascript:
var button = $('#btn-ban-username);
button.addClass("btn-default");
button.addClass("ban-user-btn");
button.removeClass("btn-success");
button.removeClass("unlock-user-btn");
button.attr('id', 'btn-unlock-'+nick);
button.html("Unlock user <i class='fa fa-check'></i>");
I get the following:
<button
class="btn btn-animated btn-default ban-user-btn"
id="btn-unlock-username"
data-nick="username"
data-toggle="modal"
data-target="#statusModal"
>
Unlock user
<i class="fa fa-check"></i>
</button>
As you can see, the ID changes and the button content changes. The classes however do not.
Some ideas?
Cheers
You're adding classes that the button has and removing classes that the button doesn't have.
Try this:
$("#btn-ban-username")
.addClass("btn-success unlock-user-btn")
.removeClass("btn-default ban-user-btn");
In your JavaScript code you have to reverse the order of your addClass and removeClass. addclass function is used to add class to your html control and removeclass for removing class from an html contol.
You have to do this
var button = $('#btn-ban-username');
button.removeClass("btn-default");
button.removeClass("ban-user-btn");
button.addClass("btn-success");
button.addClass("unlock-user-btn");
button.attr('id', 'btn-unlock-dev');
button.html("Unlock user <i class='fa fa-check'></i>");

Categories