Bootstrap open Modal AND Hyperlink - javascript

I am looking for a way to open a modal as well as the underlying hyperlink.
So if my code looks like this:
<a class="btn pull-right" target="_blank" href="http://www.example.com" data-toggle="modal" data-target="#modal_div" data-remote="false">something</a>
I want to open the Modal as well as the link to "www.example.com"...
Does anybody have an idea of how to accomplish this?
Thanks for your advice!

You should define the .click handler for your link, remove data- attributes and toggle .modal() with javascript.
I think that bootstrap handler for clicking on anchors with data- attributes for modals and other plugins uses preventDefault(), that is why you just can't use href="http://www.example.com".
FIDDLE DEMO

Related

On click , Click another Button not working. The target button is a data-target type button

Hello Folks both my buttons work when used individually, but when I use button A to click button B using Java script it does not work. I know button A works becuase the alert I added to the script pops up. But it won't invoke button B. I have tried it using classes and ID. Help Appriciated.
//Button A
<a class="send-btn"> <?php echo $buttontext?> </a>
//Button B
<a id="open-modal" class="openmodal-btn" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#modal">
// I have tried adding these in the js Script during testing.
$("#openmodal-btn").click();
$('.openmodal-btn').click();
<script>
$(document).ready(function(){
$('.send-btn').click(function(event){
$('.openmodal-btn').trigger('click');
});
});
</script>
Removing this link below which stood above all my Scripts at the bottom of the page resolved this issue as I had the same link duplicated in the page header.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
And thanks to Swati for helping with troubleshooting!

How to add javascript to button?

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

Popover not showing in button inside table row

I have a table being built via the map function of JavaScript (ReactJS).
On the last column, I should be having buttons that are meant to open a popover that will (eventually) hold some information. This cell is being done like this:
<td>
<div>
<button className="btn btn-primary"
tabIndex="0"
role="button"
data-toggle="popover"
data-trigger="focus"
title="Details"
data-content="Testing, Testing">
<b>IN PIT</b>
</button>
</div>
</td>
So far, the said button appears, but no popover whatsoever. I'm not using npm or anything of the sorts since I'm not a front-end-designer myself, and that doesn't seem trivial to setup. I just want something "good enough" for testing purposes.
What am I missing?
Looking at your https://pastebin.com/KuRHjWxr. Popovers won't work, you have to implement them other way.
You initiate
$('[data-toggle="popover"]').popover();
$('[data-toggle="tooltip"]').tooltip(); when there are no buttons in DOM.
Call .popover() and .tooltip() after your buttons are successfully rendered to the DOM.
The names of your attributes imply that you are expecting bootstrap (an external library) to be loaded and attach to the element to provide functionality, is bootstrap included in a script tag on the page? Those attributes don't do anything themselves, they are just tags to attach actions to. Add a bootstrap cdn tag inside the bottom of the body tag to address.

AngularJS - How to make a button inside an anchor tag?

I've made the next html code -
<a class="list-group-item">
<p class="list-group-item-text"></p>
<p class="btn btn-info" href="javascript:;" ng-click="onclick(alert('Hello world!'));">Hi world</p>
</a>
How can I make the with the 'btn' class be clickable? (meaning see the hello word alert)
Thanks for any kind of help
From your sample it looks like you're trying to use an anchor element to have a list of text and following buttons? Why not just put the ng-click on the Anchor element and apply the bootstrap class of btn to that?
I do believe the issue you have with your sample is that the anchor is catching the click event as opposed to the nest element, as they're not meant to be used as containers.

BootStrap Nav Button Link not Working?

The green "Blog" button on the top points to the right location, but when clicked, there is no response. It seems it's not a z-index issue. It seems to be a conflict with the jQuery nav, but the solution here is very unclear.
Here is the JS: http://pastebin.com/JuJwKdSZ
and JS #2: http://pastebin.com/VDpViTqP
Here is the HTML: http://pastebin.com/BYuehZnU
I think I may have found the answer. It is to do with the plugin you are using: OnePageNav
This handles all clicks on links on the page. There is a filter ability on that plugin though, when you initialize the instance of one page, you can include a filter of a class name and add that class name to your external link like so:
html
<a id="blog" class="btn button navbar-btn white external" href="/blog"><i class="fa fa-pencil"></i> Blog</a>
Change this in the first js file (line 44)
filter: '',
to this
filter: 'external',

Categories

Resources