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();
}
}
Related
I'm trying to apply a function when a button is pressed, but sometimes the button is appended, so I tried to apply the function to his class. The problem is that I can only make the function work when I link it to the button ID, when I link the class nothing happens. This happens to the button that is appended and to the normal button as well.
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control" id="createCustomLayer" class="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>
If I change the .createCustomLayer for #createCustomLayer, all works fine.
You can't have multiple class="" move createCustomLayer into class="btn btn-light form-control", so it looks like class="btn btn-light form-control createCustomLayer"
Demo
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control createCustomLayer" id="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>
This is because you have more than one class attribute in the element. If you have multiple class attribute in the same element then except the first one all are simply ignored:
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control createCustomLayer" id="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>
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");
});
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
My problems is: I am trying to count all downloads. I do that by adding +1 to my database everytime the button is clicked and then I simply take the database value and display it. I've tried numerous ways but no matter what I do the downloads stay zero. I prefer raw javascript/html because I am not that advanced and I want to do it a way that I understand it.
I've also tried pasting the script in the body and the head but without effect.
<div style="padding: 10px">
<img src="http://localhost:3000/uploads/{{article.imgName}}" width="100%" style="margin-bottom: 15px">
<p>
{{#each article.tags }}
<a class="btn btn-default btn-xs"
href="/tag/{{this}}">{{this}}</a>
{{/each}}
</p>
<small class="author">
{{article.author.fullName}}
</small>
<footer>
<script type="text/javascript">
var article = require("mongoose/lib/model.js");
const downloadCount = function () {
article.downloads += 1;
article.save();
}
document.getElementById('download').onClick = downloadCount;
</script>
<p><br>Views: {{article.views}} </p>
<p>Downloads: {{article.downloads}}</p>
<div class="pull-right">
<a class="btn btn-default btn-sm" href="/">« Back</a>
<a id="download" class="btn btn-default btn-sm" href ="/uploads/{{article.imgName}}" download="{{article.imgName}}" onClick="downloadCount()">Download</a>
{{#if isUserAuthorized}}
<a class="btn btn-success btn-sm"
href="/article/edit/{{article.id}}">Edit</a>
<a class="btn btn-danger btn-sm"
href="/article/delete/{{article.id}}">Delete</a>
{{/if}}
</div>
</footer>
</div>
I don't know which js library you used.
but about handling the on click event in javascript is by using addEventListener function.
document.getElementById('download').addEventListener('click',downloadCount);
Can you specify more about what technologies you used.
My approach will be the following:
1) Wrap your function call with:
// pure JavaScript equivalent to jQuery's $.ready()
// doesn't work in older IEs
document.addEventListener('DOMContentLoaded', function(){
// your code goes here
}, false);
For further support take a look here: http://youmightnotneedjquery.com/#ready
2) Remove the inline handler and use addEventListener
const article = require("mongoose/lib/model.js");
const el = document.getElementById('download');
el.addEventListener('click', downloadCount);
function downloadCount(e) {
e.preventDefault();
article.downloads += 1;
article.save();
}
All together:
<a id="download" class="btn btn-default btn-sm" href ="/uploads/{{article.imgName}}" download="{{article.imgName}}">Download</a>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(){
const article = require("mongoose/lib/model.js");
const el = document.getElementById('download');
el.addEventListener('click', downloadCount);
function downloadCount(e) {
e.preventDefault();
article.downloads += 1;
article.save();
}
}, false);
</script>
is it posible to make a universal jquery for basically all buttons in my code with diferent ids? i cant seem to get this to work. what im trying to achieve is everytime a button is clicked the javascript will add a class for that specific button that was clicked.
HTML :
<button type="button" onClick="myFunction(this.id)" id="test1" class="btn btn-primary btn-xs pull-right">button 1</button>
<button type="button" onClick="myFunction(this.id)" id="test2" class="btn btn-primary btn-xs pull-right">button 2</button>
<button type="button" onClick="myFunction(this.id)" id="test2" class="btn btn-primary btn-xs pull-right">button 2</button>
JS :
function myFunction(this) {
$(this).addClass("animated flipInY");
setTimeout(function(){
$(this).removeClass("animated flipInY")
},1000);
}
You can use click event with button selector and it will work for all your button :
$('button').on('click', function(){
$(this).addClass('animated flipInY');
}
Hope this helps.
I think the problem you have is more related with calling the "removeClass" for all buttons...
For that you need to change
setTimeout(function(){
$(this).removeClass("animated flipInY")
},1000);
to
setTimeout(function(){
$('button').removeClass("animated flipInY")
},1000);
in your code (or better add it to Zakaria answer).
<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