My /htmx webpage has a list of links like this one:
<li class="collection-item" hx-push-url="true" hx-post="/htmx/file/open/specification.idp"
hx-trigger="click" hx-target="#screen">Click me</li>
When I click it, the #screen target is correctly updated, and the browser URL is correctly changed to /htmx/file/open/specification.idp (thanks to hx-push-url="true").
When I click the browser back button, the original htmx page is properly displayed, but the browser URL remains /htmx/file/open/specification.idp, instead of becoming /htmx.
How can I get the browser URL to be /htmx? I'm using Htmx 1.8.0. I also tried using hx-get.
Related
In this page :
https://www.bedbathandbeyond.com/store/product/o-o-by-olivia-oliver-turkish-modal-bath-towel-collection/5469128?categoryId=13434
I can see a button with "Add to Cart" text , I can also see it in dev tools.
But when the same page source is retrieved by ChromeHeadless using selenium, and my script searches for it, this text is not present.
I tried with selecting show page source in the browser, the source too did not have the "Add To Cart text"
Further I used a curl to GET page, "Add To Cart" wasn't in the returned page source either.
What am I doing wrong?
is the page hiding the button?
How can I check for its presence, for product availability check?
The elements you are looking for are inside the shadow DOM. You need to access the shadow root first. Hard to see exactly what is going on in the DOM without some trial and error, but something like this:
WebElement shadowHost = driver.findElement(By.cssSelector("#wmHostPdp"));
SearchContext shadowRoot = shadowHost.getShadowRoot();
WebElement addToCart = shadowRoot.findElement(By.cssSelector(".shipItBtnCont button"));
More info on Shadow DOM & Selenium — https://titusfortner.com/2021/11/22/shadow-dom-selenium.html
I am currently using "vue-styleguidist": "^4.36.1" version and I have some string params in URL.It is loading perfectly fine until click event happens on components in side bar of vue-styleguidist.
Once click event happens, whole page reloads ad string params in URL are getting lost.
Please check in this link:
https://vue-styleguidist.github.io/basic/index.html?name=zzz
Once page loads click on any component in side-bar and we can see that name parameter is getting removed from URL. But I need to have those to make condition based rendering
Any help would be appreciated
For example, I have a blog website, with a discover page that doesn't take any params. When you load page fetch hook calls API that randomly returns some article.
So my problem is when I'm already on the Discover page and I click discover in the Left bar I want the page to refresh.
:key="$route.fullPath" is not working for me because nothing is changing in the path.
I have a simple test web site with 2 different pages, Page1 and Page2. Pages are generated by a web server.
All responses contain these headers:
Cache-control: no-cache, no-store, must-revalidate
Pragma: no-cache
Page1 contains a link to Page2 and a TextArea element, enclosed in a FORM tag. Page2 is a blank page (it doesn't contain anything useful).
Clicking on the Page2 link (inside Page1) will submit the form (and TextArea value) to the server and switch to Page2.
Each time Page1 is requested from the server, a new line is added to the TextArea. This happens at server-side (no DOM manipulation via JavaScript, at browser side).
So, when application starts, Page1's TextArea contains:
"Line 1"
If I click on the link to Page2 and then hit the back button, Page1's TextArea now contains 2 lines, as expected:
"Line 1"
"Line 2"
This shows 2 things:
BFCache (Back-Forward cache) is not being used (because each time the back button is hit, a new request is sent to the web server). It can also be confirmed by the fact that pageshow's event parameter persisted property is false.
The browser is updating the page correctly (because new content added to the page, at server-side, is being shown at browser side, as expected)
However, if I clear the text area, click on the same link to Page2 and then hit the back button, the TextArea will still show an empty content. I would expect it to show exactly one line of text (inserted by the server). This happens in all tested browsers, including WebKit, FireFox and even Internet Explorer.
Using Network tab from Developer Tools I can see that the server responds with the correct content and the preview sub-tab (in dev tools/network) shows exactly that.
So, in the second scenario, the browser is definitely retrieving the updated content from server, but refuses to update the page with that content. Seems to me that whenever the page is submitted, the browser will use the submitted page when the user hits the back button, regardless of content updated at server-side.
This issue is very similar to another here: How to prevent content being displayed from Back-Forward cache in Firefox?
with same symptoms but in that case there is no form submit and change in response headers would fix it.
My questions:
a) Why browsers retrieve an updated content from the server but don't use it to update the page in that particular scenario? Is it a documented behavior?
b) Is there a way to change this behavior? I'm particularly thinking about a way to force the browser to update the page with the response from the server (the same way it occurs when no submitting is involved).
BTW, submitting the form in an AJAX request is not a solution but merely a workaround for this issue, having in mind that a full post back may be needed in some scenarios.
I have an asp.net website that is using update panels on the page that i cant get to reload from the server. I have this for the disable page cache on the master page.
Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1))
Response.Cache.SetValidUntilExpires(False)
Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches)
Response.Cache.SetCacheability(HttpCacheability.NoCache)
Response.Cache.SetNoStore()
When I click the browser back button to go back to the page it says the page has expired. The other pages on my web site work and call the page load, the only solution i found but cant use is to wrp the whole page in an update panel, but i can't do this because i have a report viewer on the page that does not work with ajax. If anyone can help i would deeply appreciate it.
This is not a browser cache problem; it's a postback one. You have to implement the Post/Redirect/Get pattern in order to avoid the "do you want to submit again? / page expired" message.
http://en.wikipedia.org/wiki/Post/Redirect/Get
The classic example for this thing is when a web page has a save button that insert something in a Database. The "Save" button is clicked -> a postback occurs -> code insert a row in a table -> user refres the page (F5) -> postback occurs again -> code insert the same row again.
To avoid the double insert in the previous example you need to redirect when the "save" button is pressed and only then, execute the insert.
Just add this in your view file in header part:
<head>
<script language="JavaScript">
<!--
javascript:window.history.forward(1);
//-->
</script>
</head>
Inside body tag add this:
<body onUnload="OperaReload()">
<input type="hidden" id="refreshed" value="no">
To reload the page with JavaScript use the following:
window.location.replace(window.location.pathname);