I have a filter function implemented on "panel" in jQuery Mobile:
I call filter by clicking on any button, the panel slides from left and there are filter options to set up current filter.
If multiple select box contains a lot of options, it shows on a black background covering the whole page and it closes the panel.
I need to reopen the panel with filter after this dialog of multi-select is closed...
I am using this:
$('#filter select').bind('change',function(){
$('#filter').panel('open');
});
This is OK if the user does any change in opened dialog (select)...
But what if he just closes this dialog using the X-button without any change? Dialog disappears, but panel is not reopened.
Thank you very much for any help.
jQuery Mobile custom selectmenu are either converted into popup or a dialog depending on screen size and options length.
When the selectmenu is dialog, it navigates to a new dialog-page. In that case, you can listen to pagecontainer events to retrieve previous prevPage and next page toPage.
If previous page is a dialog/selectmenu, open panel in next page.
$(document).on("pagecontainershow", function (e, data) {
var previousPage = data.prevPage,
nextPage = data.toPage;
if (previousPage.hasClass("ui-selectmenu")) { /* or ui-dialog */
$(".ui-panel", nextPage).panel("open");
}
});
Demo
Related
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.
UPDATED
I need some fresh eyes on my problem. I have done a lot of research and have tried everything I can think of, but for some reason I simply cannot get my modals to behave in the way I want them to.
My issue:
After opening modal one (which has a Google map and Google auto complete address field), I trigger via a button click the close of modal one, and opening modal two. But modal two does not open, or you only see the modal-backdrop.
My code:
(1) The first modal is opened via this click event:
<a class="shop-btn" id="5G router-32" (click)="startFivegJourney()">buy</a>
(2) The click event fires this method which opens the #five-g-product-modal. The reason for the additional shown.bs.modal code is simply for setting the z-index of the modal, making sure that the Google autocomplete address field does not display behind the opened modal.
startFivegJourney() {
if (this.cartService.simsInCart.length > 0) {
$('#modal-clear-cart').modal('show');
} else {
$('#five-g-product-modal').modal('show');
$('#five-g-product-modal').on('shown.bs.modal', () => {
$('.pac-container').css('z-index', $('#five-g-product-modal').css('z-index'));
});
}
}
(3) A button click event fired from modal one that is now open, triggers the method below, which hides modal one.
checkFiveGCoverage() {
$('#five-g-product-modal').modal('hide');
$('#five-g-product-modal').on('hidden.bs.modal', () => {
$('#five-g-coverage-modal').modal('show');
this.openModal();
});
}
(4) After modal one has completely closed, a simple method is called to open the new modal:
openModal() {
$('#five-g-coverage-modal').modal('show');
}
I have tried various ways of opening the modal (the modal does open on top of the first modal if I do not close the first modal), but it is as if it does not fire, or opens the modal-backdrop only. Thank you in advance!
This is my website .
It has a top menu and a sidebar menu. When the page loads up, the side bar is by default visible. There is no problem in Desktop, but when this is viewed on Mobile device, the side bar comes above the content of the website and it is not possible to remove it, since the toggle button to show/hide it is in the top menu.
Is it possible to make it hidden by default when the page loads up ? (Problem 1)
Also, if it works, then the show/hide sidebar works fine in desktop, but if we minimize the brower window, it becomes opposite, like, when it is hidden, HIDE SIDEBAR is displayed, when it is shown, SHOW SIDEBAR is displayed.
The jquery code I used to Hide/Show side bar is:
var f=1; // to displayd HIDE, since by default its shown.
$(document).ready(function(){
$("#menu-toggle").click(function(){
if (f==0)
{
$("#menu-toggle").html("<b>Show Categories</b>");
f=1;
}
else
{
$("#menu-toggle").html("<b>Hide Categories</b>");
f=0;
}
});
});
Is it possible to know if I am on mobile or desktop, so that I can initialise the value of f accordingly? (Problem 2)
Add one more line in $(document).ready to trigger click event on page load as below:
$(document).ready(function(){
//Event code start here
....
//Event code end here
$("#menu-toggle").trigger('click') //trigger its click
});
For your 2nd problem you will get lot of javascript solutions if you
search, like one here and another here
using toggle will be more convenient than click,if u want to make it hidden when the page loads up ,set display none first in html(simple way)
$(document).ready(function(){
$("#menu-toggle").toggle(function(){
if($(this).css('display') === 'none')
{
$("#menu-toggle").html("<b>Hide Categories</b>"); //this is hide
}
else
{
$("#menu-toggle").html("<b>Show Categories</b>"); //this is show
}
});
});
I am kind of simulating that I have multiple pages by defining 2 divs that each act as a page. Only one page at the time is shown. Those divs are:
divProjectList
divProjectListItem
When the user opens the website, the div 'divProjectList' is shown. This div contains an un-ordered list with projects. This is a long list, so it is sortable.
As soon the user clicks an item from the list, I do a $('#divProjectList').hide() followed by a $('#divProjectListItem').show(). The list is now invisible for the user and instead is presented with project details for the item he selected from the list.
As soon as the user clicks the close button it works the other way around. The project details page is being hidden and the project list page is being shown again.
If the user scrolled down a bit (or a couple of pages) then the project list is scrolled back to the first item and the item that he clicked is now out of view.
I have a JSFiddle that has a hide- and show-button and a list which simulates the behavior that I described above.
I would like to know if it is expected behavior what I see here and how I could circumvent this. For now I solved it by doing a $.ScrollTo:
$('#' + currentProjectId).ScrollTo({duration: 0, offsetTop: 151})
This jquery code reminds you where you scrolled to, and puts you back there when you press the show button:
http://jsfiddle.net/py7zemLo/1/
jquery:
var scroll;
$("#btnHide").on("click", function (e) {
scroll = $(document).scrollTop();
// $("#divOptions").hide();
$("#divOptions").css('display', 'none');
})
$("#btnShow").on("click", function (e) {
// $("#divOptions").show();
$("#divOptions").css('display', 'block');
if ( scroll !== null ) {
$(document).scrollTop(scroll);
}
})
I hope this helps you!
I am setting up a small shop using simpleCart.js and Bootstrap 3.
For displaying the cart I was hoping to use an off-canvas panel that I have enabled using the Jasny-bootstrap add-on. Everything works fine but when I eliminate elements from the cart the off-canvas panel closes. This way the user his unable to modify content in the cart without having to reopen the panel after each click. How can I keep the panel open until the user chooses to close it?
Here is an FIDDLE demonstrating the issue
From looking at this snippet from (link straight to code) simpleCart.js - line 337-353, am I right in assuming that once you remove an item it reloads the cart and therefore it causes the panel to close? If this is the case, then how would a version of this code look like to fix my problem?
// empty the cart
empty: function () {
// remove each item individually so we see the remove events
var newItems = {};
simpleCart.each(function (item) {
// send a param of true to make sure it doesn't
// update after every removal
// keep the item if the function returns false,
// because we know it has been prevented
// from being removed
if (item.remove(true) === false) {
newItems[item.id()] = item
}
});
sc_items = newItems;
simpleCart.update();
},
Thank you in advance :)
The option autohide controls if the navbar should be closed when a user clicks outside of it. Setting it to false, means it stays open until the user clicks on the 'CLOSE PANEL HERE' link.
See the fiddle
Note that normally the navmenu doesn't close when clicked on a link inside of it. I'm not sure why this is happening in your case.