I am trying to integrate a bootstrap layout into my angular.js project.
I have added the bootstrap.js and bootstrap.css and the layout custom CSS and JS.
my project have jquery added to it.
The problem that I am facing is that a click handler is not being triggered.
this is my code:
$(document).ready(function () {
alert('ready');
$('[data-toggle="offcanvas"]').click(function () {
alert('click');
$('.row-offcanvas').toggleClass('active')
});
});
a popup with "ready" popups at each page refresh however when i click the button that has the attribute data-toggle="offcanvas" nothing pops up.
I have even tried to ad an id attribute to the button and target the button in jquery as follows with no success:
$('#toggleButton').click(....);
the button is html looks like the following:
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
what seems to be going wrong?
Thanks in advance.
Related
I created this so far using html, bootstrap, and jQuery v1.12.0, and jQuery UI - v1.10. So far what displays is a button that says "menu". Once you click that button, menu will drop down and display a right-aligned box that says "Popover with data-trigger". Once that happens, I want to be able to click the "Popover with data-trigger" button to popover something using bootstrap. I tried using the onclick stuff, as shown in jquery, but it isn't working. What am I doing wrong?
$(".dropdown-menu").css('margin','50px');
$(function () {
$('[data-toggle="popover"]').popover()
})
$("#popoverData").popover({ trigger: "hover" });
<div class="btn-group" style ="left:1860px;top:-140px;">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</button>
<div class="dropdown-menu dropdown-menu-right" style="background: rgba(0,0,255,.35);">
<a id="popoverData" class="btn" href="#" data-content="Popover with data-trigger" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover">Popover with data-trigger</a>
</div>
</div>
Actually, I figured out the answer...The thing is I had the right code...
I forgot to put $(document).ready(function() {}); surrounding my popover code, so the code wouldn't run. I think this has something to do with the DOM not being ready? Correct me if I'm wrong guys. This code should work for jquery.
$(document).ready(function() {
$(".dropdown-menu").css('margin','50px');
$(function () {
$('[data-toggle="popover"]').popover()
})
$("#popoverData").popover({ trigger: "hover" });
});
Goal: I would like to call a bootstrap modal from a bootstrap popover. I was looking at Calling a modal from a Bootstrap popover and tried to implement the code.
Issue: Upon clicking the button that triggers the modal from inside the popover, it will darken the background but no modal appears. Not sure what the issue is exactly. The code I tried from the linked article above gives the same result as if I just set up the button to trigger a modal without the suggest jQuery in that article.. Currently my code is set up to use the advice suggested there, and this is what I have so far...
Thanks in advance to all help.
$(function () {
$('[data-toggle="popover"]').popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
$(document).on('click', "#messageUser", function() {
console.log('Clicked message button');
$('#messageUserModal').modal('show');
});
});
/* --Tried this too, thinking the popover and modal were fighting
$(function() {
$('#messageUser').click(function() {
console.log('Clicked message button');
//$('[data-toggle="popover"]').hide();
$('#messageUserModal').modal('show');
//$('#messageUserModal').show();
});
});
*/
HTML/PHP/BS
<button class='btn btn-xs btn-primary' type='button' id='messageUser'>Send Message</button>
</form>
<div class='modal fade' id='messageUserModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button>
<h4 class='modal-title' id='myModalLabel'>Send Message to ".$helperName." </h4>
</div>
<div class='modal-body'>
<textarea class='form-control' name='message' maxlength='749' rows='10' cols='50' placeholder='Enter message to ".$helperName." here..'></textarea><br>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
<button type='button' class='btn btn-primary'>Send Message</button>
</div>
</div>
</div>
</div>
I found the answer to the problem.. I thought that I should try to call the modal from outside of the popover (i.e. a button somewhere on the page to press to call that modal, just to see if the problem was isolated to the popover as I had originally concluded..). Once I added the same button elsewhere I got nothing to happen. I then realized that the code for the modal was in the popover so I then took that code put it outside of the popover. When I then clicked on the new button I saw that a modal came up as expected, but then I clicked on the original button that I was trying to call the modal with and it then also triggered the modal.. so that told me that when the popover is fired it must be executing the modal but never showing it or something to that extent.. so I will remove the code for the modal outside of the popover code and it will work just fine. Long winded answer but hopefully the journey to get to the answer will help someone else as well.
Also, important to note, if using bootstrap 3 you do not need to write any fancy jquery code to show the modal, or whatever the suggestion was from the article I referenced at the beginning of the post..
New to Angular and struggling with how to do things the "Angular Way". All I want to do is click a button to show a hidden element inside a view then hide the button that was clicked. Any help would be awesome.
HTML:
<button class="btn btn-primary" ng-click="showDiv=true; hideMe()">
Show Div
</button>
<div ng-show="showDiv">
I was hidden now you see me, but how do I hide the button?
</div>
Controller:
$scope.hideMe = function(){
console.log('hide the button');
$scope.hide();
}
Code sample: Plunker
Ideally would like to incorporate ng-hide on the button and not have a function run inside of the controller.
<button ng-hide="showDiv"...
Should work also
Just add ng-show="!showDiv" to your button, this will hide it if showDiv = true
Just to be clear new html should look:
<button class="btn btn-primary" ng-click="showDiv=true" ng-show="!showDiv">Show Div</button>
I am facing problem in loading div into my javascript,
My code is:-
$(document).ready(function()
{
$('#example').hide();
$("#myDiv").tooltip({trigger:'hover',placement:'left',html:true,title:'Rate Us'}).popover({trigger:'click',placement:'top',content:$("#example").html(),});
});
<div id="example">
<button type="button" class="btn btn-default btn-circle btn-lg"><i class="glyphicon glyphicon-ok"></i></button>
</div>
I am not able to load button in the example div on popover.
What should I write in content:$("#example").html(), to load example div?
Please help me.
you cannot use content: for html content on popovers without setting html:true
see here for more information about popovers http://getbootstrap.com/javascript/#popovers
jsfiddle http://jsfiddle.net/CsR5Z/1/
Here is a sample code from twitter bootstrap but . . .
<div class="modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
The scenario is this: I have a redirect page and I want to display the modal. Yes, of course I made it displayed but how do I close it? I tried different ways the click function but nothing happened.
From bootstrap doc :
Manually hides a modal.
.modal('hide')
$('.modal').modal('hide')
So if you want to hide it on click you can bind this action to the click event
$('#yourid').on('click' , function() {
$('.modal').modal('hide')
});
if you want to hide it after some second that you loaded the document you can try with a timeout
$(function(){ //document ready
..
.. //your code
..
setTimeout(function(){
$('.modal').modal('hide')
}, 2000); //2000 = 2 second
..
})
UPDATE 1
To bind it on the close button give him a class or id
Close
now
$('.closebtn').on('click',function() {
$('.modal').modal('hide');
});
If you want to bind only on that close button use an id instead of a class
Old post but this can now be done using HTML attributes.
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
try this
$('.modal').modal('hide');
I had the same problem. If it's still needed you can try to put your 'click' event in another event 'shown.bs.dropdown' like so:
$('#myDropdown').on('show.bs.dropdown', function () {
$('#yourid').on('click' , function() {
$('#myDropdown').modal('hide');
});
});
In my case the 'click' event wasn't binded when the modal was shown. So when I put it in 'show.bs.dropdown' event, everything went as I expected. 'click' was binded to modal as soon as modal was shown.