I'm working on a SAPUI5 App showing some data in a MasterDetailView using the sap.m.splitapp. My Problem is quit equal to the question Master menu is not visible on mobile devices but is visible on tablet.
In my case, I have the situation, that I'm going to create a MasterPage with a MasterController depending on requested data. Depending on these data I create dynamically the DetailPages in a function of the MasterController.
for(var i=0;i<adata.inhaltList.length;i++){var DetailPage = new sap.m.Page({
title: masterString,
showNavButton: true,
navButtonPress:function () {
var oSplitApp = this.getView().getParent().getParent();
var oMaster = oSplitApp.getMasterPages()[0];
oSplitApp.toMaster(oMaster, "flip");
}
}); };
On my test device, everything is working fine except the fact, that I have no possibility to show the MasterPage, even no Button is shown.
I have tried the solution of th linked question, but I get the error: "Object Element sap.m.Page#__page0 has no method 'getView'". So it didn't work.
Even a Do-it-yourselve solution, adding a button in a custom-Header:
contentLeft: [new sap.m.Button({
icon: "sap-icon://paging",
press: function() {
var splitApp = sap.ui.getCore().byId("ContentApp");
if (splitApp.isMasterShown()) {
console.log("Master weg");
splitApp.hideMaster();
} else {
console.log("Master kommt");
splitApp.showMaster();
var oSplitApp = this.getView().getParent().getParent();
var oMaster = oSplitApp.getMasterPages()[0];
oSplitApp.toMaster(oMaster, "flip");
};
}
})]
and trying to show the Master manually didn't work.
The SAPUI5 function: oSplitApp.showMaster(); works fine in the explorer but not on the device! Does anybody knows why? And has probably a solution?
I've found it out:
Even with the postet "tricks", the SplittApp class is not available for the Phone category. So, to see the masterView, I have created a PopUpMenu, which looks like the MasterPage.
Everything fine know and thank you for downgrading my question, because nobody knows that exactly.
Related
I'm trying to implement integration tests on our React frontend which uses Ant design. Whenever we create a table, we add an action column in which we have a Menu and Menu Items to perform certain actions.
However, I seem unable to find the correct button in the menu item when using react-testing-library. The menu Ant design uses is rc-menu and I believe it renders outside of the rendered component.
Reading the testing-library documentation, I've tried using baseElement and queryByRole to get the correct DOM element, but it doesn't find anything.
Here's an example of what I'm trying to do. It's all async since the table has to wait on certain data before it gets filled in, just an FYI.
Tried it on codesandbox
const row = await screen.findByRole('row', {
name: /test/i
})
const menu = await within(row).findByRole('menu')
fireEvent.mouseDown(menu)
expect(queryByRole('button', { name: /delete/i })).toBeDisabled()
the menu being opened with the delete action as menu item
I had a same issue testing antd + rc-menu component. Looks like the issue is related to delayed popup rendering. Here is an example how I solved it:
jest.useFakeTimers();
const { queryByTestId, getByText } = renderMyComponent();
const nav = await waitFor(() => getByText("My Menu item text"));
act(() => {
fireEvent.mouseEnter(nav);
jest.runAllTimers(); // ! <- this was a trick !
});
jest.useRealTimers();
expect(queryByTestId("submenu-item-test-id")).toBeTruthy();
I'm creating a Firefox extension for adding some functionality to certain Web pages. I need to check that some elements do exist and highlight them, so I'm using xpath to check and locate them. I know about manipulating tabs and the content through tabs and ports, but I really need to use the low level API and do it without ports. The thing is, I don't know how to get the current opened tab window (I can also open the tab, but I'm not getting the window). I already tryed to open a tab and :
tabs.open({
url: url,
onOpen: function onOpen(tab) {
// get the XUL tab that corresponds to this high-level tab
var lowLevelTab = viewFor(tab);
var browser = tab_utils.getBrowserForTab(lowLevelTab);
var doc = browser.contentDocument;
console.log(doc); //THIS IS AN EMPTY DOC
// get the most recent window. This give me a XUL window, and I can't sucessfully execute eval on that...
var win = utils.getMostRecentBrowserWindow();
}})
I sawa lot of methods for retrieving different kinds of windows, but I'm not finding the explanation about the differences. E.g. Chroe window, XUL window, NSI window, base window...I just need the current Web page's document window.
Any clarification is welcome.
Thanks in advance,
I just needed to listen for another tab event:
onReady: function onOpen(tab) {
var content = utils.getMostRecentBrowserWindow().content;
var domInstances = content.document.evaluate(me.getTemplateXpath(), content.document, null, 4, null);
var res = domInstances.iterateNext();
while (res) {
console.log(res);
res.style["background-color"] = "orange";
res = domInstances.iterateNext();
}
callback();
}
I am new to Phonegap programming.I created one HTML page(ListScreen.html) with NavigationBar plugin.In ListScreen I displayed list of data.When I select the one list item it goes to another HTML page that is DetailsScreen.html page.I tried the code in ListScreen.html as follows:
$(document).on("click", "#lstMyList li" ,function (event) {
window.location.href='DetailsScreen.html';
});
How to send the selected item from ListScreen.html to DetailsScreen.html.Please help me.
You can use local storage. I supports any JavaScript object.
localStorage.setItem("oneKey", anObject);
var anObject = localStorage.getItem("oneKey");
It works perfectly for me. try this way -
var foo = localStorage["bar"];
localStorage["bar"] = foo;
As title suggests I am building a mobile website with JQuery Mobile (1.3.0) and am trying to implement Google Places Autocomplete (API v3) to aid user input of location data.
The autocomplete functions correctly on desktop device, but not when used on a mobile device (I have only tested on iOS 6).
When used on mobile device the dropdown list of relevant locations do appear, but simply disappear when you press one without loading the selection on the map.
I have looked around and seen some solutions that sight the z-index of
.pac-container
as the culprit (see: http://osdir.com/ml/google-maps-js-api-v3/2012-01/msg00823.html).
I have implemented these fixes but to no avail, and I am not convinced that z-index is the problem because I can see that the selected item does change to it's :hover state/colour when pressed on mobile.
Please if anyone has suggestions I am all ears, need any more details let me know.
Saravanan's answer is a bit overkill. To fix the conflict with FastClick and PAC, add the needsclick class to both the pac-item and all its children.
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
Thanks Daniel. But the solution I have given has some performance impact.
I have modifed the FastClick library little bit to accomplish that.
First I have added a param to FastClick constructor, where defaultElCls will be the elements which should not implement fastclick.
function FastClick(layer, defaultElCls) {
'use strict';
var oldOnClick, self = this;
this.defaultElCls = defaultElCls;
Then modify needsClick method:
FastClick.prototype.needsClick = function(target) {
'use strict';
var nodeName = target.nodeName.toLowerCase();
if (nodeName === 'button' || nodeName === 'input') {
// File inputs need real clicks on iOS 6 due to a browser bug (issue #68)
// Don't send a synthetic click to disabled inputs (issue #62)
if ((this.deviceIsIOS && target.type === 'file') || target.disabled) {
return true;
}
} else if (nodeName === 'label' || nodeName === 'video') {
return true;
}
return ((/\bneedsclick\b/).test(target.className) || (new RegExp(this.defaultElCls).test(target.className)));
};
Then pass pac-item to the FastClick constructor
new FastClick(document.body, "pac-item");
Hope this will be taken care by FastClick library as well :)
I've also encountered this bug, and determined fastclick to be the culprit. I was originally going to go with Devin Smith's answer, but epegzz's warning about MutationEvents being deprecated led me to MutationObservers, and since I haven't seen a fix involving them I thought I'd share my solution.
var observer_config = { attributes: false, childList: true, subTree: false, characterData: false }
var observer = new MutationObserver( function(mutations) {
var self = this;
mutations.forEach(function(mutation){
// look for the container being added to the DOM
var pac_container_added = $(mutation.addedNodes).hasClass('pac-container');
// if it is, begin observing it
if (pac_container_added){
var pac_container = mutation.addedNodes[0];
self.observe(pac_container, observer_config);
}
// look for pac-items being added (as children of pac_container)
// This will not resolve if the observer on pac-container has not been created
var pac_item_added = $(mutation.addedNodes).hasClass('pac-item');
// when pac items are added, add the needsclick class
if (pac_item_added) {
$('.pac-item, .pac-item span').addClass('needsclick')
}
});
});
observer.observe(document.body, observer_config);
It is more complex than I'd like it to be because we can't just add observer.observe('pac_container') in the top level, since its added asynchronously. Luckily, the solution for that problem is also MutationObservers.
We add another observer to pac_container when it is created. That way, it detects the pac-items being added, and when they are, we add the needsclick class.
This is my first time using MutationObservers, so feedback/improvements would be appreciated. As you can see, I used both jquery, but it should be pretty easy to pull it out.
There is a patch for fastclick that makes it work well with google places autocomplete. See This answer :)
After much hair pulling I have found the problem to be the "FastClick" library I added to my project.
As #Saravanan Shanmugam points out in this comment https://stackoverflow.com/a/16932543/1177832
FastClick seems to interfere with autocomplete. Also see above link for the workaround he has added to get the two to play nice.
I am developing an application using Backbone.js and have run into an issue where any instance of a view, excluding the first, fails to bind a click event to the ".playVideo" when accessed from an iPad. The same code executes as I would expect on desktop browsers.
I am creating a simple carousel that can scroll left/right and when a button is clicked I trigger another event to create a video player on the page. The first two events which bind to the .leftArrow / .rightArrow class do work on the second instance of the view; however, the click .playView binding will only work on the first instance.
While debugging, I also added a new binding 'click a' and observed that the additional instances don't execute an event for that item as well.
Simplified Code
Pod = Backbone.View.extend({
events: {
'click .leftArrow' : 'previous'
,'click .rightArrow' : 'next'
,'click .playVideo' : 'loadPlayerUI'
}
,initialize:function()
{
// Do stuff
return this;
}
,render:function()
{
// Draw stuff
return this;
}
,loadPlayerUI : function(event) {
event.originalEvent.preventDefault();
console.log("Hit");
return this;
}
});
In the above example the console message will not appear for any instance of this view except the first one created.
Question
What may I be doing incorrectly?
I appreciate your help.
Thank you.