step 1) on my Form page, I open a select2 dropdown
step 2) without clicking anywhere else on the Form page, I select the browser's 'back' button
result: prev page is loaded but the select2 dropdown persists.
NB: select2 closes successfully when user goes anywhere else in the app/screen itself (using the menu) - it is only when using the 'external' controls of the browser that the select2 remains open.
I'm using Meteor, jQuery and handlebars
Things I've tried:
Template.teamsForm.onDestroyed(function () {
if ($('select').data('select2')) {
$('select').select2('close');
}
});
image of step 1
image of step 2
I had a similar issue and the solution was to update the Jquery library to 3.4.0 After I did that the dropdown select was operating as if you never left the page.
Related
I am facing problem on removing unknown division created during opening of a mat-select.
When I am opening a modal and after selecting values ,I need to click directly on the button given on side but because of some property of modal a div is getting created and I have to do two clicks on the button to apply changes.
Right now when I am clicking outside the mat-select modal to make it close then clicking on button it is going correct. But I need to open modal -> select options -> direct click on the button given.
Something in the background is blocking the first click when opening a mat-select modal. I am not able to see what is that. Is there some css property that can be block ? I am not getting exact hidden problem.
Modals in Angular Material create something that's called 'backdrop' by default. This backdrop is like a layer right behind your modal, filling the whole page. If you click somewhere on the page, your target will be the backdrop, which then closes the modal.
So for you to achieve, what you want to achieve, you have the following options:
edit the backdrop behavior to not prevent the default click action, so that clicks on the backdrop close the modal but also trigger the action you want
remove the backdrop on opening of the modal (this can be done by setting a flag hasBackdrop in the open methods config parameters) and close the modal programmatically by triggering the close method of the MatDialogRef
This is standard modal behavior, you should include all your needed options either before opening a modal or in the modal itself after being opened.
I am working on alpha.dubaiexporters.com.
http://alpha.dubaiexporters.com/aboutus.aspx
Upon resizing the browser, the blue button panel comes and after clicking on it, it shows the navigation side bar.The issue is that after clicking somewhere else, it does not disappear.
I don't seem to find the issue here. The home page is not creating any problems. Rest pages do.
You can add to end of your code when you activate the menu and
$(".container").on("click", function(){
$(".menu-btn").click();
});
And inside the menu-btn.click() add a $(".container").off(); so it toggles the behaviour.
I used bootstrap 3 modal dialog for search function in my asp.net inventory application.When I press the search button on my modal content whole popup up dialog went disappeared.I want to lock the the modal dialog in my current page window.How can I resolve this using bootstrap.I tried putting data-backdrop: static.But it's still not work for me.
Try also passing the
{keyboard: false}
Option as well as data-backdrop: false. Technically speaking data-backdrop should be solving your problem. Is theres something that makes your project unique?
I have a scenario where...
1.) Have created a div with a dropdown list and ok, cancel button
2.) On document ready - registering div created on step 1 into a jQuery dialog
3.) on a javascript button click - I am opening this dialog box.
4.) Now, the problem is - the jQuery dialogbox which I have created, needs to be used by other button clicks as well on same page. Now, my div's (which is a dialog at runtime using jQuery) ok button click is already engaged with a javascript function (button1 click) and I can not associate other button's click events with it - thus stuck up here and have no clues or hit to resolve this.
Anyone have faced this issue in asp.net, jquery earlier? Can someone provide a guidance?
Why you cant associate another event?
buttons will have different id. Is it?
$('#button1').click(function() {
alert('Handler for button 1 .click() called.');
});
$('#button2').click(function() {
alert('Handler for button 2 .click() called.');
});
Is this not possible in your case.?
Options:
1) disassociate the click handler when the function opens the div, then later in the function of opening the div associate a click handler to the button.
2) create multiple buttons toggle them all hidden, associate the click handler to each button you want. When the div is opened do a check to see which button to toggle to visible.
3) create no buttons but have a function create the button on the fly. When the div is opened, create the button for that div by calling the function and passing in a code telling it which button to open and what to associate to the click handler (this can be stored in an array and all that is passed in is the key).
Depending on the application, I have used all of these methods. The last one can have a twist that allows it to call an ajax server based application to get the button text and functionality (stored in a database), this saves you from having to load an array with button data, and also allows for easier expansion of the application.
I have an ASP.NET C# page, with image thumbnails in it.
I created a script that opens a jQuery UI Dialog on each hover on a thumbnail that shows me the thumbnail in larger size in a dialog view, and when I hover out - dialog closes.
My little annoying problem is, that in every mouseover (trigger dialog to open) - the page makes itself 'longer' - a scrollbar appears on the side of the browser, and it seems like the page gets longer when a dialog is openning, but it shouldn't do so.
When I hover off (mouseout) - the dialog disappears and the page returns to its normal state.
Because of this- when I hover through the thumbnails, my page 'jumps'.
I looked for a solution for this, and I've added return false; for each dialog open, and close - and it still doesn't make any different.
Sorry for the unperfect english, and thanks for all helpers!
I finally got my solution - for all interested:
open: function(event, ui){
/*
* Scrollbar fix
*/
$('body').css('overflow','hidden');
}
I added this to dialog's opening event and it fixed the issue!