I have an issue related to click events on different modal divs.
I have a modal div 'A' which shows an overlay div with some info. This div is show by clicking i.e. a button A. So, when it's shown if i click outside the overlapped div, i want this to close.
I have another div 'B' which shows an overlay div with some other info. This div is show by clicking i.e. a button B. So, when it's shown if i click outside the overlapped div, i want this to close.
In both cases i use $(window).click() for managing them.
The question is that i need that when once i click on button 'A', it's corresponding div come up and if i click on button 'B' I want div 'A' close and div 'B' come up and viceversa.
how can i handle multiple clicks events for multiple modal divs?
Thanks.y
I'm not really sure if this is what you want, but...
Assuming your buttons and divs are of class "overlay", and have IDs as in Rolando's example ("buttonA", "divA"; "buttonB", "divB"; etc.):
$(".overlay").filter(":button").click(function() {
var callid = /button(.+)/.exec($(this).attr("id"))[1];
$("div.overlay[id$=" + callid + "]").show();
$("div.overlay:not([id$=" + callid + "])").hide();
})
Example: http://jsfiddle.net/KXeXj/
The only issue is the "clicking outside the div to close it" part; I tried using $(":not(.overlay)").click(function() {$("div.overlay").hide()}), but that didn't seem to work as it just kept the divs hidden whatever you clicked.
This may be a staring:
$('#buttonA").click(function(){
$(#divA").show();
$(#divB").hide();
})
Related
In a Cypress test, I am trying to click a specific button nested inside a div, based on it's text.
Below is the HTML code I am testing:
<div class="mat-menu-content">
<button>First button</button>
<button>Second button</button>
</div>
I want to click the button with the Second button text.
I can't just use cy.contains('Second button') because Second Button text appears multiple places on the page.
Here's what I'm trying to write using Cypress:
Click the button inside mat-menu-content div that contains Second button text
Can someone please tell me how this can be done?
You should first grab the element by class name and then search for contents, and finally invoke the click() method. Try something like this:
cy.get('.mat-menu-content').contains('Second button').click()
For more info, look here in the official doc
.contains() is quite powerful and allows the use of a selector paired with text, cy.contains('selector', 'Your text').
For your scenario, you'll want to use the button selector paired with the text to get the button containing Second button.
cy.contains('button', 'Second button')
// or if there are multiple buttons with 'Second button' text on the page
cy.get('.mat-menu-content')
.contains('button', 'Second button')
.contains() also allows for regex matching, which I prefer for finding with case insenstive.
cy.contains('button', /second button/i)
One more variation, add .mat-menu-content ahead of the button selector
cy.contains('.mat-menu-content button', 'Second button') // tighter criteria
If you have multiple mat-menu-content on the webpage you can use eq to access a particular one and then use within() to scope your query within div.mat-menu-content
cy.get('mat-menu-content')
.eq(0)
.within(() => {
//eq(0) points to the first occurance in the DOM
cy.contains('button', 'Second button').click()
})
If you have multiple menus on the page, the item buttons are only displayed when the menu is open, and only one menu will be open at a time.
You can go ahead and just select the button with the text Second button after opening it's menu.
cy.contains('button', 'Contacts Menu').click() // open the menu
cy.contains('button', 'Second button').click() // select 2nd item
As you want to do 'Click the button inside mat-menu-content div that contains Second button text' i suggest
cy.get('div.mat-menu-content button').contains('Second button').click()
Here's a single get command that satisfies exactly what you want to do:
cy.get('div.mat-menu-content button:contains("Second button")'
When I am placing the jQuery selectmenu inside a div that has a CSS property overflow: scroll and is smaller then its content, then the dropdown menu is not following the scrolling inside the overflown div.
See the example here
https://codepen.io/Nighel123/pen/gZeQVd?editors=1000
I have found a way to fix it with this code:
$(".demo").scroll(function(){
$( "#salutation" ).selectmenu( "open" );
});
But I think this is not the best way to fix the problem since the dropdown does not seem to follow the select element precisely when I am trying the code on my computer. Additionally the dropdown menu opens when I am scrolling inside the overflown div, what is also not the expected behavior of a dropdown.
I also tried to trigger the scroll event of the window object, when the overflown div gets scrolled to fire the positioning methods of the jQuery dropdown menu. But this did not work at all.
I would like to follow the dropdown menu follow my select item more precisely with the scrolling of the overflown div. And maybe also get some less ugly hack compared to what I did above.
I found a solution with the appendTo method of the jQuery-UI selectmenu. Just append the dropdown menu to the div that is being scrolled and it works!
I have a modal which has a link to another modal. When I opened the second modal and close the first modal, I can't scroll the second modal, only the background content scrolls. Can any one help me to solve this? I am using bootstrap 3.3.7
Try to use Modal Events to be sure your modals will not overlap. In this case you must open the second modal after the first one, like this:
$('#first-modal').on('hidden.bs.modal', function(event) {
// Open your second one in here
});
If .button is the selector for those things that close the first modal to open the second one, you should have something like this
$('#first-modal').on('click', '.button', function() {
// [...] Whatever you need to do after pushing one of those buttons
$('#first-modal').on('hidden.bs.modal', function(event) {
// Open your second one in here
$('#first-modal').off('hidden.bs.modal');
// This will remove ANY event attached to 'hidden.bs.modal' label
}).modal('hide');
});
If you want to use the first cleaner example, oyu should be able to test from the event object where it came from (if it's not one of your button, event.preventDefault(); and quit)
Hi,
I'm implementing a layout with Extjs 4 as shown in the image.
The layout contains
4 tab panels
Each tab content will be loaded dynamically. The loaded page contains left navigation panel and right side container to load the respective page
The page which is loaded in right side container will have a button
When the button is clicked a pop will be shown
I'm showing one pop up in page1 and another different pop up in page2.
What my problem is
when i click the button on the 1st page its showing a popup (say pop up 1),
for the second page when i click on the button it has to show pop up2, which contains some panels.
But pop up 1 appears in the second page.
the same pop up appears in all the sub pages.
if i reload the entire page and directly go to the page2 it shows the pop2.
i think that the window once created will persist until the page is reloaded.
i'm using window as follows
var createLessonWin = Ext.widget('window', {
autoHeight:true,
id: 'cformWin',
closeAction: 'hide',
y: 100,
modal: true,
plain: true,
layout: 'fit',
items: profile_form
});
Ext.get('add_lessons_btn').on('click', function () {
createLessonWin.show();
});
if i use closeAction: 'destroy' window elements also destroyed.
i tried with Ext.create('Ext.window.Window', {}) and new Ext.Window also. the same problem appears.
Content of the pop up in each page is a different form
How to solve this problem
I'm assuming you only use that code for one of the two windows. The items property is what goes in the window, so you'll need that to be different for the two buttons. Secondly, make sure your ids are unique for each window.
If you post some more code, I might have a better idea of what's going on. How do you create your other window?
My page is divided into two parts vertically.Left part is like a menu section. Clicking on
any menu brings the proper data related to that menu in the right part of the page. I am
doing it using ajax call and the only div on the right part get refreshed. I am using jquery click event for that ..
say:
$("#left_part").click(function() { // ajax call here });
Now I have some more jquery action on the right part. (say Show hide some div which also work on click event.)
But when new div reloads on the right part those click event on the right part is not working.
But when I bind the click event it works.
say:
$("#some_right_part").click(function() {/ some hide show here )}; Not working
$("#some_right_part").bind('click', function(event){ // some hide show here )}; works fine
Important: When I am on fresh page (no ajax call yet to bring right part) $("#some_right_part").click(function() {/ some hide show here )}; works fine.
But what I know is: $().click(function) calls $().bind('click',function)
So, What is the reason behind this? Or What is the perfect way to solve such problem
Thanks
When you assign a click event via $().click when the page loads, the click event is bound to all matching elements. However, when you do the ajax call and recieve new markup - the new elements are not bound to the click event because they did not exist when you first called $().click.
There is a way to get a click event to be bound to all elements and all future elements that may be created. You must use the live method like so:
$('#elements').live('click', function() {
// do logic
});