Bootstrap 3 Open Drop Down on page load with Javascript - javascript

I can't seem to open this dropdown menu on page load. Can anyone help?
Documentation on Bootrap 3 is here: http://getbootstrap.com/javascript/#dropdowns
I tried this but it doesn't seem to work
$('#myDropdown').dropdown()
Ultimately, I need to be able to open a drop down that is inside a collapsible menu. For example, I want to open the first down down menu after the user clicks on the menu button. but I can't get it to work.
http://jsfiddle.net/G4k4F/3
Edit: When the navbar is shown, use a timer to wait 1 millisecond before calling .dropdown('toggle'). Like this.
function OpenDropDown() {
$('.dropdown-menu').dropdown('toggle');
};
$('.collapse.navbar-collapse').on('show.bs.collapse', function () {
window.setTimeout(OpenDropDown, 1);
});

try this :
$(function () {
$('.dropdown-menu').dropdown('toggle');
});

Try this..
$(function () {
$('[data-toggle="dropdown"]').dropdown('toggle');
});
Or you can use the button id like:
$('#dLabel').dropdown('toggle');

Related

Cypress is not closing menu when I click on a button from menu

Here I am testing a Vue application using cypress. I have a menu on my app screen. Normally when I click a button on the menu it closes the menu and performs the functionality. But when I do it using cypress, it performs the functionality but it can't close the menu.
Here is my sample code.
it('Open menu, Click on sort button(A -> Z): Check ascending order of data', function () {
cy.server();
cy.route("GET", getTableListAPI).as('getTableList');
cy.route("GET", getFirstPageTableData).as("getTableDetails");
//Asc sort Api
cy.route("GET", ascendingSortApi).as("getAscData");
cy.visit(testTargetURL);
//Wait to load data
cy.wait('#getTableList');
//Select the target tablefrom the left pane
cy.get(selectors.navigationDrawer).find('a').contains(testTableWithData).click();
//Wait to load data
cy.wait('#getTableDetails');
//Open menu
cy.get('th').eq(1).find('button').click();
//Click on first button.
cy.get(selectors.filterMenu).within(($menu) => {
cy.get('.v-item-group').find('button').eq(0).click();
})
//Wait to load data
cy.wait('#getAscData');
//Check visibility
cy.get(selectors.filterMenu).should('not.be.visible');
//Check ascending order data
cy.get('table').within(($table) => {
cy.get('tr').find('td').should('contain','');
cy.get('tr').find('td').should('contain','-9223372036854776000');
})
})
Note: I have also tried
click({ force: true });
cy.wait(500) // Following (https://github.com/cypress-io/cypress/issues/3135#issuecomment-454420548) this issue.
But still, it is not working for me. Please suggest something else for me.
Thanks in advance.
It seems to me the problem is that you are using {force:true} and that doesn`t trigger the function to close the menu. Try selecting some parent element of the button that is native to the menu and click it.

Close mobile menu by clicking / tapping outside

I want to have the option to close a mobile menu by clicking outside of the menu on this site http://test1.wasodesign.com/
I searched StackOverflow and the web, and found this solution
<script>$(document).click(function(event) {
if(!$(event.target).closest('.collapse.in').length) {
if($('.collapse.in').is(":visible")) {
$('.collapse').hide();
}
}
})
</script>
I applied it, and the issue is that it does close on mobile when clicking outside of the menu but then I cannot reopen the menu afterward.
Is there any reason? How can I resolve this?
Thanks
you could try something like:
$('body').on("click", ".dropdown-menu", function() {
$('.dropdown-menu').hide()
$('.collapse').hide()
});
With this the menu should open when you click on the button.
$('.dropdown-menu').on("click",function() {
$('.collapse').show()
$('.dropdown-menu').show()
});
one of those two should work if not leave a comment.

how to run a jQuery function after certain element is displayed

I have a modal that is displayed only once (like a dialog box) after user logged-in firstly. And also I've got a function in that modal file that is supposed to run if modal is displayed.
Here is function:
$('#some_element').(function someFunc() {
console.log("gUM is used now");
//some stuff to do
});
I tried on('click') and it works fine. But I don't need it.
Also, I tried on('load'), but it works before modal is displayed.
Any help will be appreciated. Thanks in advance.
Hello i think you can use events. for example for jquery dialog there is many events and function to know if dialod is open http://api.jqueryui.com/dialog/#method-isOpen and some events like open or beforeClose or you can use jquery to detect if the element is visible $("#SomeElement").is(":visible")
Not an ideal solution but you could start a timer in on load, and have it run a function every half second to check if the modal is visible:
var checkModalTimer;
$(document).ready(function() {
checkModalTimer = setInterval(function() {
if ($('modal').is(':visible')) {
// do your function
clearInterval(checkModalTimer);
}
}, 500);
});

How to close all active bootstrap modals on session timeout?

I need to make a call when the user is idle and passes the session time out that will close all Bootstrap modals. The modals being active are dependent on what the user is doing at the time so I would like to do something that's is all encompassing.
I tried:
$('.modal').modal('toggle');
When the time out occurs but my modals are still there.
Use the following code:
$('.modal').modal('hide');
Also if you would like to do something if the modal is hidden then you can do this:
$('.modal').on('hidden', function () {
// write your code
});
The correct answer is missing something vital.
$('.modal').modal('hide') // closes all active pop ups.
$('.modal-backdrop').remove() // removes the grey overlay.
The second line is vital if you want the users to use the page as normal.
Try this way :
$('.modal.in:visible').modal('hide');
This is how i got it working in my project without using any factory or additional code.
//hide any open bootstrap modals
angular.element('.inmodal').hide();
I have a timeout function that emits logout as $rootScope.$emit('logout'); and the listener in my service is as follows:
$rootScope.$on('logout', function () {
//hide any open bootstrap modals
angular.element('.inmodal').hide();
//do something else here
});
If you want to hide any other modals such as angular material dialog ($mdDialog) & sweet alert dialog's use angular.element('.modal-dialog').hide(); & angular.element('.sweet-alert').hide();
I don't know if this is the right approach , but it works for me.
Using vanilla JS you can do the following
// import all your dependencies
import * as bootstrap from "bootstrap"
// close all modals but the one you want to open
const $modals = document.querySelectorAll('.modal')
$modals.forEach(modal => {
let currentModal = bootstrap.Modal.getInstance(modal)
if (currentModal) currentModal.hide()
})
When I dont know, wich Modal is open, I use the following for me...
$('.modal[id^="modal_"]').modal('hide');

How to get screen not to jump back to up when clicking div to open

i got page with multiple open/hide divs and the problem here is that everytime i try to click one to open or hide the screen jumps at the top of the page..
Anyone idea how to fix this? Javascript is used to hide divs.
Thanks!
$(function() {
$('a.hide').click(function() {
$(this).closest('.hideable').find('.hide-container').toggle();
});
$('a#hide-all').click(function() {
$('.hide-container').hide();
});
$('.hide-container').hide(); });
It sounds like you are using href="#", don't do that, build on things that work instead.
If you’re using an A tag to open close the DIV’s, it means that in Javascript you’ll need to disable the default action for the A tag.
In jquery for example:
$('a').click(function(e) {
e.preventDefault();
});

Categories

Resources