window.history.back() scrolls to lastscroll position rather than next page - jscript

I am using window.history.back(-1) to attempt to go back to the last url, however it will work until i goto another page scroll and enter another page url through click.
Then when i go back to the previous page it scrolls to last position, But when I click the Back button again it just goes back to the scroll position and not the previous page. Even though there was a previous page.
How do I fix this. Thank you.
`
<div class="button cart-button left-right" >
<button class="btn" onclick="window.history.back(-1)" ><i class="lni lni-pointer-left"></i>Go Back</button>
</div>
I have tried using the following but get only the same results.
window.history.go(-1)
I am not sure how else to approach this problem.

Related

Make a clone of html element in _hyperscript

How to make a clone of html element in _hyperscript?
For example, I want to see a copy of a button after clicking on it. Something like:
<button _="on click put me after me">Test</button>
If you want the hyperscript to work for new nodes I currently do something like this:
<div id="test123">
<div _="on click log 'Test' then put my outerHTML after me
_hyperscript.processNode(#test123)">Copy Me</div>
</div>
<button _='on click put my outerHTML after me'>Test</button>
However, only clicking the original button produces a copy this way.

HREF target='_blank' does not work in Chrome 79

Using simple HTML code, no JavaScript, nothing fancy, I use this HREF
Click here
Clicking on the link in IE, FireFox, Edge does open a new tab for https://www.example.com on click. In Chrome (version 79), the click just redisplays the current page.
This happens on Chrome desktop and phone (Android). There are no add-ins to my installation of Chrome; no popup or ad blocking installed.
Why doesn't Chrome open a new tab when target="_blank" is used? Thanks.
Added
The issue seems to be with an HREF being inside a FORM element. The FORM element is as follows:
<form action='' method='post'>
An HREF with target="_blank" outside the FORM element works properly. Just not inside the FORM element.
But still puzzled as to why that would be the case...and for a workaround or solution.
Added more - plus code
There's a button inside the form, and the button contains an image, and the link in the button will not open up a new tab.
Simple form with the button
<form action='' method='post'>
<p>inside the form</p>
<p><button><img src="https://via.placeholder.com/150 " width="24" height="24" class='button_img' alt='delete' /> that's a button</button></p>
<p><button>that's a button </button></p>
</form>
So, with even further testing, the click to open a new tab won't work in Chrome when the HREF is wrapped around an button with an image inside a form. But works in FireFox and Edge.
Why?
There are four image/buttons inside the form. The fourth one is the HREF/blank. Items 1-2-3 are form submittals; values need to be passed to the form processing page. The 4th item doesn't need to be processed by the form, but it is inside the form so that all four items will be on the same line. If I place the 4th (HREF/blank) outside of the form, then the 4th item is wrapped around to the next line.
a
The <button> tag cannot be opened in a new tab the same way an <a> does.
You can use this instead:
<p>
<button onClick="window.open('https://www.bklnk.com/B004RVZRL0');">
<img src="https://via.placeholder.com/150 " width="24" height="24" class='button_img' alt='delete' />
that's a button
</button>
</p>

Selenium select the first button that contains text matching

I am using the Firefox webdriver for Selenium to scrape a webpage that looks to be rendered with React on the client side. The classes in the rendered DOM look dynamically generated, and seem to change with every new request. There are also many button elements on the page, some of which are not in the viewport. So my strategy is to search for a way to click on a button that contains text that I enter using selenium. Several buttons will contain the text, and I want to just find the first such button.
Using selenium/xpath, how would I select the first button that contained the text E9 1QJ?
<button>
<div><svg ...> </div>
<div>
<div>London</div>
<div>E9 1QJ</div>
</div>
</button>
<button>
<div><svg ...> </div>
<div>
<div>London Foo Bar</div>
<div>E9 1QJ</div>
</div>
</button>
Thanks
This should work:
{driver}.find_element_by_xpath("//button[div/div[text()='E9 1QJ']][1]")
But keep in mind that a solution like this it is not very flexible and could break with a minimum change in the html structure.

angular2-mdl tooltip gets stuck when disabling button

I've set an mdl-tooltip on a button.
When the mouse hovers over the button, tooltip is displayed correctly.
When the mouse leaves the button, tooltip disappears correctly.
When button is clicked, button is disabled and the tooltip remains displayed. How do I fix this such that the tooltip is hidden when the button is clicked/disabled?
<button type="button" mdl-button mdl-button-type="icon" mdl-colored="primary" mdl-ripple mdl-tooltip="Disable Button" mdl-tooltip-position="bottom" (click)="isDisabled = true" [disabled]="isDisabled">
<mdl-icon>close</mdl-icon>
</button>
plunker: http://plnkr.co/edit/vGw8W93jR0j6qzHCyASS?p=preview
pointer events are not fired on disabled elements. (have a look for a discussion on that topic: Event on a disabled input)
you can change your code in this way to make possible what you are trying to do:
<span mdl-tooltip="blah">
<button mdl-button mdl-button-type="fab" mdl-colored="primary"
[disabled]="itemDisabled" (click)="itemDisabled=!itemDisabled">
<mdl-icon>add</mdl-icon>
</button>
</span>
(see also: https://github.com/mseemann/angular2-mdl/issues/535)

For a datepicker, why does one code snippet work, but the other doesn't?

I want to populate two date fields on the same form, using "Today's date".
Both fields are read-only, to force the user to use the datepicker.
I can populate the first date field without problem.
Here is the HTML:
<div class="">
<div id="EffectiveFrom$CalendarBehavior_today" class="ajax__calendar_footer ajax__calendar_today"></div>
</div>
Here is my code:
#browser.div(:id => 'EffectiveFrom$CalendarBehavior_today', :class => 'ajax__calendar_footer ajax__calendar_today').click
Second date field
HTML:
<div class="">
<div id="RegistrationDate$CalendarBehavior_today" class="ajax__calendar_footer ajax__calendar_today">
Today: July 15, 2014
</div>
</div>
Code:
#browser.div(:id => 'RegistrationDate$CalendarBehavior_today', :class => 'ajax__calendar_footer ajax__calendar_today').click
The error is "Element not visible". But I can see exactly the same popup for the second field as I do for the first field.
(Edited) The popup that caused the "Element not visible" error message is fully displayed within the browser boundaries.
It seems to me (a non-techie) that the only difference between the first HTML and the second HTML is that the second HTML has inner text.
The element not visible exception means that the element exists on the page but is not displayed (eg has a style="display:none"). Given that you can see the popup, it is likely a timing issue.
What happens is:
You click something to trigger the popup to display.
Watir tries to click the div element.
The browser finishes updating the popup's style such that it is now visible.
Given that Watir tries to click the div before it gets displayed, you get the element not visible exception.
You can tell Watir to wait for the element to become visible before trying to interact with it:
#browser.div(:id => 'RegistrationDate$CalendarBehavior_today', :class => 'ajax__calendar_footer ajax__calendar_today').when_present.click

Resources