I am trying to run an alert when clicking at a <a> tag.
$('#login-button1').click(function() {
alert(1234);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a ui-sref="tabsController.inCio" id="login-button1" class="button button-stable button-block LoginButton1" href="#/tabsController/home">Login</a>
Nothing happens when I click the button. I ve tried many other ways to run the alert but none of them seems to have affected the tag.
Console log does not display any error message.
It seems that your project is AngularJS.
If you use AngularJS, you can use ng-click directive.
In HTML:
<a ui-sref="tabsController.inCio" ng-click="alertMethod()" class="button button-stable button-block LoginButton1">Login</a>
In Controller:
$scope.alertMethod = function () {
alert(1234);
}
It is supposed to work, everything looks alright, make sure you have jQuery imported correctly. like:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
or whatever version of jQuery you are wishing to use, code works fine with above version as seen in this Fiddle
Related
this might be very basic but I am still trying to figure it out because I cannot seem to get it correct.
The button
<a class="fusion-button button-flat button-square button-xlarge button-default button-40" target="_blank"><span class="fusion-button-text fusion-button-text-left">KÖP DITT CAMPINGKORT HÄR!</span></a>
And I need to add this
Köp Camping Key Europe
Some things needs changing such in the next code but you get the idea, how can I make button work, so when they press it it open module? When I use the second code without button and only link, it works fine, module shows up.
Please help :)
Try this
<button type="button" class="fusion-button-text fusion-button-text-left"
onclick="CampingKeyEurope(' blank', 'sv')">Button Text</button>
Building off the comment by Sterling Archer, you should attach event listeners outside of your HTML, so if you are using JQuery, in your $(document).ready() function you would add your onclick event there to your button like so:
$('.fusion-button-text.fusion-button-text-left').on('click', function() {});
Try using an event listener:
<a id="btn" class="fusion-button button-flat button-square button-xlarge button-default button-40" target="_blank">
<span class="fusion-button-text fusion-button-text-left">KÖP DITT CAMPINGKORT HÄR!</span>
</a>
document.getElementById('btn').onclick = function () {
CampingKeyEurope(' blank', 'sv');
};
I suggest looking through here, Its very useful: https://www.w3schools.com/jsref/event_onclick.asp
I am using one of the bootstrap snippet for login dropdown box in the login box there is a link for Join Us I wanted that when i click on Join Us, the content within the box should get replaced by another box that contains login credentials
I modified the following code
New here ? <b>Join Us</b>
with the code below
New here ? <b>Join Us</b>
and created another content that had id signup-dp like this
<ul id="signup-dp" class="dropdown-menu">
// signup data Inside this part
</ul>
Now when i click on the Join Us link the url of the page gets changed i.e #signup in the end of the url, but the content does not get displayed,
can anyone please tell how to do so
Please check jquery included or not.
Use return false like below
<b>Join Us</b>
#signup-dp{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b>Join Us</b>
<div id="login-dp">login-dp</div>
<div id="signup-dp">signup-dp</div>
Its very simple and you code is working for me only.
<a href="#" onClick="$('#login-dp').hide(); $('#signup-dp').show()">
<b>Join Us</b>
</a>
<a href="#" onClick="$('#login-dp').show(); $('#signup-dp').hide()">
<b>Login</b>
</a>
<ul id="signup-dp" class="dropdown-menu">
// signup data Inside this part
</ul>
<ul id="login-dp" class="dropdown-menu">
// login data Inside this part
</ul>
Please follow this link . JSfiddle
Onclick jQuery is not working, So user Javascript code
New here ? <a href="#" onclick='document.getElementById("login-dp").style.display = "none";document.getElementById("signup-dp").style.display = "visible";'><b>Join Us</b></a>
Put the new hidden element somewhere before your existing element.
unless you write your jQuery code in $(document).ready(); in a separate file, or internal.
Your code is correct. But please check have you included jquery file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
This jquery should be included before the jquery code you have written.
Put following jquery code to make signup div initially hidden.
<script type="text/javascript">
$(document).ready(function(){
$("#signup-dp").hide();
});
</script>
First of all, for make good programming habit you have to bind click event instead of write javascript code inside of tag onClick attribute.
<b>Join Us</b>
In your javascript code (try to write code in other js file instead of inline code in HTML page.)
$(document).ready(function(){
$("#btn_join_us").click(function(e){
e.preventDefault();
$('#login-dp').hide();
$('#signup-dp').show();
return false;
});
});
This kind of code make some secure event binding. otherwise anyone can make change your code from inspect element and execute this.
I am using this component in my example, but when I click on my icon, my popover is not displayed.
When I click on an icon it should display the popover but currently, it is not display anything.
Here is my code (and this is the CodePen):
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>hhh</div>
</script>
First, from my own experience I recommend using angular-bootstrap for things in that scope.
Second, if you really want it to work, make sure the bootstrap scripts are correctly loaded. Then try to listen to the click event with ng-click on the button and trigger the popover on it.
Here is the code to achieve what you want.
Here is the plunkr : https://plnkr.co/edit/fBPJ8LfOFGlgcCHvRWSM?p=preview
Regards,
scope.popover = function() {
$("[data-toggle=popover]").popover({
html: true,
content: $('.popper-content').html(),
placement: attrs.popoverPlacement
});
};
Here is the html:
<button type="button" popover-placement="bottom" class="popper btn-link" popover ng-click="popover()" data-toggle="popover">
4 Peoples
</button>
Regards,
I have a django template as follows ..
...
<div class="row">
<div class="col-lg-12">
<button type="submit" class="btn btn-primary" id="related"}>KIRK</button>
</div>
</div>
...
And a script in the same template
<script>
$(document).ready( function() {
$("#related").click( function(event) {
alert("You clicked the button using JQuery!");
});
});
</script>
On button click I want to show an alert, however, this does not seem to work for me ? I cannot figure out what I am doing wrong ? Is it the way the script is defined or am not using the right selector ?
Change your html to look like this:
<div class="row">
<div class="col-lg-12">
<button type="submit" class="btn btn-primary" id="related">KIRK</button>
</div>
</div>
(remove the } )
Use whatever debugger/javascript console you prefer (I use Firebug, but you can do it with the Firefox and Chrome built-in consoles as well, I don't know about IE developer tools, which suck):
Verify that you load jQuery (and not just some javascript file of your own named jquery.js)
Verify that jQuery is loaded, and that you have one and only one node in the DOM with the id related by typing $('#related')`.
Verify that your .click line is executed after jQuery is loaded.
Try using a version of Firefox that isn't years old. I'm using 38.0, and you're using 10.0? That was released in 2013.
Bootstrap Tooltip not working in chrome, but working fine in firefox.
<script type='text/javascript'>
jQuery(document).ready(function () {
if ($("[rel=tooltip]").length) {
jQuery("[rel=tooltip]").tooltip({
placement: 'right',
trigger: "hover"
});
}
});
</script>
And also the placement is not working correctly in firefox, even after defining as right, its showing only on top.
You need to update your jQuery to at least 1.7 because it looks like bootstrap 2.2.1 is using .on().
Look at your browser console, it is throwing an error
Uncaught TypeError: Object [object Object] has no method 'on'
Quite an old question but I've been coming across this issue today where none of these answers applied to my problem.
My problem was, that I've been using a tooltip on a disabled button, which is not possible according to the documentation of Bootstrap:
https://getbootstrap.com/docs/4.3/components/tooltips/#disabled-elements
To handle that case, a wrapper element must be used, where the tooltip is applied to. For instance:
<span data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
Also important is to use the style="pointer-events: none;" attribute on the disabled button. Otherwise it won't be working in Chrome neither. (Firefox seems to deal with it without the wrapper too.)