How can I get title attribute of clicked button? - javascript

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

Related

button offcanvas only show

I use bootstrap 5. I try open offcanvas, and dont hide when I click button again.
<button data-bs-toggle="offcanvas" role="button">Add to Cart</button>
when I click button agian offcanvas close i dont have.
<div class="offcanvas offcanvas-end w-5 #ViewData["Pokaz"]" tabindex="-1" id="offcanvas" data-bs-scroll="true" data-bs-keyboard="false" data-bs-backdrop="false">
<div class="offcanvas-header">
<h6 class="offcanvas-title d-none d-sm-block" id="offcanvas">Your Order</h6>
<button type="button" class="btn-close btn btn-success text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
How to setting button by click a button again dont hide offcanvas.
only show when is closed.
Help me guy.
You can realize this using JavaScript and when pressing the button always showing the offcanvas:
<button role="button" onclick="new bootstrap.Offcanvas(document.getElementById('offcanvas')).show();">Add to Cart</button>
Read more about this here.
Of course, you can also write a separate function and call it (or add some checks before, whether it is open):
<button role="button" onclick="showOffcanvas()">Add to Cart</button>
function showOffcanvas() {
var myOffcanvas = document.getElementById('offcanvas');
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
bsOffcanvas.show();
}
Good luck!

Bootstrap change button value

I'm having trouble changing a button value in bootstrap. I can change it using jQuery, but i'm changing it from a modal dialog. I looked elsewhere on SO but I couldn't find anything that seemed to match my specific issue?
Steps:
Click button. Change button text on main html form. Upon clicking the
button it changes the text, closes the modal, and then immediately
the text changes back to what it was originally. It should just change the text and stay that way, obviously.
$("#validate-rv-button").click(function () {
$("#review-history-validate").val("Review History");
});
HTML
<input id="review-history-validate" type="button" class="rvButtons btn btn-outline-warning btn-sm" data-toggle="modal" data-target="#review-history" value="Validate" />
Any help would be much appreciated.
Another way to do it with <button></button>
<button id="review-history-validate" type="button" class="rvButtons btn btn-outline-warning btn-sm" data-toggle="modal" data-target="#review-history" />Validate</button>
in jquery:
$("#validate-rv-button").click(function () {
$("#review-history-validate").text("Review History");
});
I believe you got the naming wrong.
This works:
$("#review-history-validate").click(function () {
document.getElementById("review-history-validate").value = "My value";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="review-history-validate" type="button" class="rvButtons btn btn-outline-warning btn-sm" data-toggle="modal" data-target="#review-history" value="elo" />
Or jQuery only as your question:
$("#review-history-validate").click(function () {
$("#review-history-validate").val("My value");
});

truncate javascript multiple lines not working

I am using truncate.js (https://github.com/jeffchan/truncate.js) to put ellipsis into a text when it overflows. It is not working when I am following the demo right I think. Here is my code:
CSHTML File:
<div id="yammerDiv">
<div id="yammerHeader">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Yammer_logo.png" alt="Yammer" height="20px;" width="50%">
</div>
<div id="yammerMessages" data-truncate-lines="3" data-toggle="modal" data-target="#myModal" style="margin-top: 25px;">
<img id="loading-gif" src="http://i559.photobucket.com/albums/ss36/madszckey01/speakker/buffering.gif">
<span id="message"></span>
<p id="sender"></p>
</div>
<div id="yammerButtons" style="display:none">
<button id="previous" type="button" class="btn btn-default btn-xs" aria-label="Left Align" onclick="onPrevious()">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</button>
<input type="checkbox" id="myCheck" onclick="autoscroll()" data-toggle='tooltip' data-placement='bottom' data-original-title="Auto-Scroll" class='checkbox'>
<button id="next" type="button" class="btn btn-default btn-xs" aria-label="Right Align" onclick="onNext()">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</button>
</div>
JavaScript inside the CSHTML file:
$('#yammerMessages').truncate({
lines: 3,
lineHeight: 1.5
});
I want to truncate the text in the yammerMessages div and its not working as the text just continues through the height limit of the width.
EDIT:
I have got the truncate method working but my content inside the span element 'message' reloads text often and how do I keep truncating it every time it changes?
$('#yammerMessages').truncate({
lines: 7,
lineHeight: 14
});
This truncates the text inside the div once, but when the content changes in 'message', it won't let me truncate again.
SOLVED:
Look for my answer below.
Since this library would not solve my problem, I just ended up using dotdotdot jquery library which solved my issue.
To truncate for the div, I used the dotdotdot method:
$("#text-wrapper").dotdotdot({ wrap: 'letter' });
Then when the text changes inside the div, I use the trigger method which then deletes the truncation of the element it was called on:
$("#text-wrapper").trigger("destroy");
Then I simply truncate again the new text loaded inside the div:
$("#text-wrapper").dotdotdot({ wrap: 'letter' });

Changes in html template do not reflect

I am trying to add some buttons to the GeoNetwork 3 MapViewer. Unfortunately I'm new to AngularJS, which GN3 is written in. So what I've done is editing the html-template that the 'gnMainViewer' directive is using.
ViewerDirectve.js:
module.directive('gnMainViewer', [
'gnMap',
function(gnMap) {
return {
restrict: 'A',
replace: true,
scope: true,
templateUrl: '../../catalog/components/viewer/' +
'partials/mainviewer.html',
[...]
}]);
In this template I can find the buttons that are shown in the MapView.
mainviewer.html:
<div class="wrapper" data-ng-controller="gnViewerController">
<div data-gn-alert-manager=""></div>
<div id="map" ngeo-map="map" class="map"></div>
<div gn-gfi="" map="map"></div>
<div gn-localisation-input map="map"></div>
<!--Top right buttons - Tools-->
<div class="tools tools-right" gi-btn-group gnv-close-panel data-ng-controller="toolsController">
<button class="btn btn-default" ng-model="activeTools.addLayers" type="submit"
rel="#addLayers" gi-btn gnv-tools-btn>
<span class="fa fa-plus"></span>
<span role="tooltip" data-translate="">addLayers</span>
</button>
<button class="btn btn-default" ng-model="activeTools.layers" type="submit"
rel="#layers" gi-btn gnv-tools-btn>
<span class="fa fa-tasks"></span>
<span role="tooltip" data-translate="">Layers</span>
</button>
[...]
</div>
</div>
So I've added a button let's say:
<button class="btn btn-default" ng-model="" type="submit"
rel="#" gi-btn gnv-tools-btn>
<span class="fa fa-beer"></span>
<span role="tooltip">NewButton</span>
</button>
to the template.
Then I've saved my changed and refreshed the MapView-Page on my server. But a new button will not be displayed. Also, changing the comment "Top right buttons" to something else will not make any changes to the displayed MapView-Page.
Even restarting the server won't change anything.
Could somebody explain me why AngularJS reacts like this? Any Ideas?
Turned out I had to run the page in debug mode e.g. http://localhost:8080/geonetwork/srv/ger/catalog.search?debug#/map
to force to load all AngularJS files seperately and without cache.

(Bootstrap 3.1.1) popover on show reset my addClass?

<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

Categories