I have a button made using href like so:
<div id='swipebuttons'>
<a href="" class="btn btn-default btn-success" id='swiperightbtn'>Swipe right (yes)</a>
<a href="" class="btn btn-default btn-danger" id='swipeleftbtn'>Swipe left (no)</a>
<div>
And jquery backend like so:
$('#swiperightbtn').on("click",function() {
document.write('yes');
});
I am using document.write just to test that it is actually working. However, when I load this nothing happens, along with no reports in the log/developer console.
Try this,
$(function(){
$('#swiperightbtn, #swipeleftbtn').on("click",function(e) {
e.preventDefault();
alert('yes');
});
});
HTML:
<div id='swipebuttons'>
<a href="" class="btn btn-default btn-success" id='swiperightbtn'>Swipe right (yes)</a>
<a href="" class="btn btn-default btn-danger" id='swipeleftbtn'>Swipe left (no)</a>
<div>
Demo: http://jsfiddle.net/37am9/1/
Or you can use the selector $('#swipebuttons a')
Try this
$(document).ready(function(event){
$('#swiperightbtn').on("click",function() {
document.write('yes');
return false;
event.preventDefault();
});
});
Gotta keep the anchor from thinking it has another job to do.
$('#swiperightbtn').on("click",function() {
document.write('yes');
return false;
});
Example working
If you don't event.preventDefault(); or return false; the link will try to continue to the empty href="".
Related
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();
}
}
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
<a id="f_post_button" href="javascript:toggle_hide('f_post_button','f_postbox','post');">
<button class="btn btn-hg btn-primary">Make a Post</button>
</a>
This is working fine for me in safari and chrome, but in IE and Firefox it just opens a blank page. Is there any alternative way to do it?
If it is a button you don't need to use href you can use onclick
Try this:
<button class="btn btn-hg btn-primary" onclick="toggle_hide('f_post_button','f_postbox','post')">Make a Post</button>
http://www.w3schools.com/js/tryit.asp?filename=tryjs_function3
add void method to resolve this
<a id="f_post_button" href="javascript:void(toggle_hide('f_post_button','f_postbox','post'));">
<button class="btn btn-hg btn-primary">Make a Post</button>
What is saying Quentin is something like this :
<button id="my-button" class="btn btn-hg btn-primary">Make a Post</button>
var myButton = document.getElementById("my-button");
myButton.click = function (f_post_button,f_postbox,post){
//do your stuff for toggle here
}
I have injected a button like this:
$(panelBody).append('<input type="button" id="pink" class="btn btn-success btn-sm" value="SWIFT" /> ');
but can't get a Bootstrap 3.0 Popover to render next to it when I click. Tried this inside $document.ready():
$(document).on('popover', '#pink', function(e){
e.preventDefault();
//console.log('clonk');
});
but nothing. Any ideas?
You can now use the selector option when creating dynamic popovers:
$(panelBody).append('<input type="button" id="pink" class="btn btn-success btn-sm" value="SWIFT" rel="popover" title="A Title" data-content="This is the content of the popover" />');
$('body').popover({
selector: '[rel=popover]'
});
$(document).on('show.bs.popover', function(e) {
console.log('clonk');
});
Fiddle here