When I click a button the new url will be shown in the browser address bar but strangely the content of the page is not changed . I see in the code that ..history.push(url); is executed . So what could be the problem ??
I can further narrow down the problem.
I am on a SiteA and via button click I switch to SiteC. Now if I am on SiteB and again want via button also switch to SiteC it does not work. Very strange.
Related
I'm trying to implement a page transition animation that works as follows:
User clicks a link on the website
A block slides down from top to the bottom so the whole screen turns into the block's color
After a short delay, the block disappears by sliding down further
User sees a new page opened.
The libraries I use are:
React
React Router Dom
Transition Group
GSAP
You can find the current implementation here: https://codesandbox.io/s/frosty-brook-3dl6y5
The problem is that the animation gets triggered after the new page is opened (i.e. user clicks a link, sees a new page's content, and then the animation starts).
I've already tried many different things, including replacing onEnter with onExist in PageTransition component, however, nothing worked.
How can I update my code so the animation gets triggered before the new page loads?
Just in case, I'm ready to switch to any open source library that would allow me to achieve what I described above.
I am working on a page where a left hand main menu has submenus. I try to hover to the main menu item, and it will show the submenu, and then I will click the submenu.
I am using below code:
#FindBy(id = "xxx")
private WebElementFacade mainmenu;
#FindBy(id = "yyy")
private WebElementFacade submenu;
Actions builder = new Actions(getDriver());
builder.moveToElement(mainmenu).perform();
submenu.waitUntilClickable().click();
I've tried other ways like:
action.moveToElement(mainmenu).moveToElement(submenu).click().build().perform();
It seems the problem is: when the test is performed when browser is in full screen, i.e.
driver.manage().window().maximize();
the main menu sometimes flash very quickly as if it's clicked really fast and recede, other times it appears not clicked or hovered to at all.
Because this hover and click active happens immediately after user navigate to the page, I add wait for element on the main menu, but it does not seem to work.
Any ideas how to solve the problem? I do not understand why it happens only when browser is in full screen mode. The only reason I can think of is the main menu element need more time to load.
EDIT:
Btw, the issue is very severe in Chrome. Firefox is better, but not 100% working either. It seems that even a simple hover:
mainmenu.waitUntilPresent();
Actions builder = new Actions(getDriver());
builder.moveToElement(mainmenu)perform();
does not always make the main menu display its submenu. I do not understand why it does not work.
I am trying to use $anchorScroll and $location.hash() to scroll to a div. I have a bottom on the top of the page. When I click the bottom, I want the page to scroll down to the bottom of the page where I have a <div id="target">.
For some reason, the first time I click the button, my page doesn't scroll. If a click a second time, the page does scroll. And afterwards the scrolling works fine. This weird behavior can be reproduced if I refresh my page.
I have this code in my controller:
$scope.scrolldown = function() {
$location.hash('target');
$anchorScroll();
}
I know that the $location.hash('target') line is supposed to append a hash value to the end of my URL.
Here's the URL when my page first got loaded:
http://run.plnkr.co/iqvdGjdeCP4idP4D/
After I clicked my button for the 1st time, it becomes:
http://run.plnkr.co/iqvdGjdeCP4idP4D/#/target
which was not right (and the page was not scrolling properly).
After I clicked my button for the 2nd time, it becomes:
http://run.plnkr.co/iqvdGjdeCP4idP4D/#/target#target
From this point on the page started to scroll properly, but the URL still looks very strange to me -- why would I want two hash values?
I want to know why the button only works after second click and how to correct it.
Update
I added routing to my code and the scroll is working fine now.
Here's my plunker demo with routing.
Take a look at this question, which contains a possible solution for you:
Supress reloading of ui-router based view on query parameter change
It works the second time you click the button because the hash doesn't change (and so the route doesn't reload). Notice the page flickering when you click it the first time? That's an indicator that the whole DOM has been re-rendered.
I have encountered a quirky problem in IE when using AngularJS (1.2.13).
The solution is in general a report-generator, which uses the routes to determine which report to show and the route parameters as the parameters for the given report.
One way to produce the exception is:
I click on a link in the menu.
Then I copy the url (from the address bar in IE).
I click on another link in the menu.
Then I paste the copied url into the address bar in IE and press enter.
This works fine, the view changes to the correct view.
Then I click on another link in the menu.
And then I paste the copied url into the address bar in IE again and
press enter.
After the final step, nothing happens, the view stays the same as it was.
If I press F5 however, it changes.
If I click on another link from the menu the solution will change to that view. Pasting the url again into the address bar, will lead to the same behaviour, nothing happens. All subsequent pastes fails, only the first one works.
This happens only in Internet Explorer (IE10), not in Chrome or FireFox.
The urls are #-based.
Tried to attach an $locationChangeSuccess and $routeChangeStart event to check what happens, but neither event is called when I paste in the url the second time.
Is there anybody who has encountered this problem before or know what is causing the behavior?
We're developing a simple app with the sencha framework
The app consist of a few tabs( a tabPanle with bottom tabBar) and the switching between tabs works perfectly when we use it as it is on the sencha docs, alas when no live data is present.
When we add stores within the single tabs, functionalities breaks, tabs stop switching and every time one clicks a tab to change the view, a flickering appears, the default tab is loaded again(from the chrome console we can see that all the remote data request of the loginView get reissued) and the only tab that remain visible to the user is tab[0].
app.js --> http://pastebin.com/S9qaNfij
mainView.js ---> http://pastebin.com/uiG2E0AW
controller.js ---> http://pastebin.com/8MTfxC85
This was created with senchaArchitect, that btw is awful and quite useless if not to work visually with the components.
here is a little movie of the thing happaning.
http://youtu.be/OVOSOWhMZeE
What are we doing wrong?
I think it's your button listener, it seems that it might be being triggered on even the tab panel button taps. I would try giving your button a unique ID and then create a ref and an action to login based on that ID.