I'm trying to acces the current URL in my project but it's only returning the previous URL.
Here is what I have:
htmx.onLoad(function(content) {
console.log(window.location.href);
})
Any idea how to get the current URL after issuing an HTMX request?
HTMX emits the htmx:pushedIntoHistory event after it pushed the new URL to the history. You can attach an event listener to it by:
htmx.on("htmx:pushedIntoHistory", function(event) {
console.log(window.location.href)
})
Related
I see this question has been asked a few times on here, but none of the answers have really helped me in this current situation.
I have an app I'm working on with a sidebar with tabs that link to different dashboards. Each of the SidebarLinks are a router-link with the to key being fed the route prop from the main component.
Inside one of these dashboards, the Analysis dashboard, there is another router that routes you to child routes for specific Analyses with their own ids (EX: /analysis/1).
The user clicks on a button for a specific analysis and they are routed to a page containing that information, on the same page.
The Error
When I click the Analysis SidebarLink the route in the url changes back to /analysis, but the page doesn't update/refresh.
I don't get an error in the console, but I do get the failure in the devtools.
I understand that Vue Router doesn't route back to a route you are already on, but I need it to. If you refresh the page when the url is just /analysis it routes back to it's inital state.
Is there anyway to refresh when it rereoutes to /analysis? Or a way to handle this error to work as intended?
What I've tried
I've tried changing the router-link to an <a> tag and programatically use router.push and then catch the error, but that doesn't do anything.
I've tried checking if the route.fullPath.contains("/analysis") and then just do router.back() but that doesn't seem to work either.
SidebarLink router function
function goToRoute() {
console.log(`route.fullPath → `, route.fullPath)
if (route.fullPath.match('/analysis*') as any) {
console.log('route includes /analysis')
router.back()
} else {
console.log('route doesnt inclue /analysis')
router
.push({
path: props.route,
})
.catch(() => {})
}
}
Inital /analysis Page
This is what the page looks like normally
/analysis/1 Page
This is what the route to analysis/1 looks like (url changes)
/analysis/1 Page When Issue Analysis SidebarLink Clicked
This is what the route to analysis looks like when the sidebarlink is clicked (url changes, but the page stays the same)
I suspect you are fetching your data from a backend service or data files
If yes you can refetch the data everytime the route param changed by watching it.
watch: {
'$route.params.id': function (id) {
if(id)
this.$store.dispatch('fetchOneAnalys', id)
else
this.$store.dispatch('fetchAllAnalyses')
}
I request from a method in a Vue component with this.$http (from https://github.com/pagekit/vue-resource) like this:
this.$http.post("/some/url", data).then(response => { ... })
In some cases the response may have status code 302 Found and I want to process it in the callback in then. But instead the this.$http.post follows the location URL provided by the first response that is not desired. How do I force this.$http.post not to redirect?
I am trying to use the Stripe prebuilt Checkout page to capture the payment details of an user following this documentation.
I think I wrote the code right, but somehow my app does not redirect the user to the Stripe checkout page. My code is as follows:
In my Express backend:
router.get("/create-check-out", async (req, res, next) => {
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
mode: 'setup',
customer: req.body.id,
success_url: 'http://localhost:5000/ll_profile?session_id={CHECKOUT_SESSION_ID}',
cancel_url: 'http://localhost:5000/ll_profile',
});
res.send (session.id);
});
On my JavaScript client-side:
$.get("/create-check-out", { id: stripe_customer_id}, async (sessionId) => {
console.log(sessionId)
stripe.redirectToCheckout({
sessionId: sessionId,
name: "Yugue"
}).then(function(result) {
console.log(result)
});
The console log does not show sessionId nor result.
The problem is after the get request is sent, the web URL becomes: http://localhost:5000/ll_profile?name= from http://localhost:5000/ll_profile (the URL under which all the codes above live), and the app is stuck at the same page without any redirecting action. I thought that it is supposed to redirect to the Stripe built-in checkout page like this:
What did I do wrong?
Most likely you've got the button inside a <form> element and there is competition between the Checkout redirect and the form submit action. You should either not use a form, or otherwise ensure the click handler related to Checkout is using preventDefault().
If that's not the case, please share more context of your DOM structure and the click handler.
I tried to trigger the lifecyclehooks of NUXT or VUE, at the static generated (per npm run generate) page.
Every time I enter the page directly per link or reload the page the Lifecyclehooks aren't triggered.
Do you have any advice how I can force the wanted behavior?
If you need more Information please let me know what you need...
My last try before I changed to a router middleware was the mounted hook:
mounted() {
this.$store.commit('setPlans', JSON.parse(localStorage.getItem('prices')))
this.$axios.get('/prices').then(resp => {
this.$store.commit('setPlans', resp.data)
localStorage.setItem('prices', JSON.stringify(resp.data))
})
},
I read the documentation of vue-router (https://router.vuejs.org/guide/essentials/navigation.html)
This is the method called internally when you click a ,
so clicking is the equivalent of calling
router.push(...)
As far as I know clicking router-link element navigates to the URL placed in "to" attribute. However, according to History API
(https://developer.mozilla.org/en-US/docs/Web/API/History_API#Examples), history.pushState(...) only changes the history and does not navigate to a new URL.
So... how can we explain this contradiction?
I think you need to define exactly what you mean by "navigate to a new URL"; to me it can mean either reloading the page at a new URL, or simply changing the URL in the address bar without reloading the page.
history.pushState() does change the URL, but it doesn't cause the browser to perform a full page reload as is typical when you click a link. This is how "single page apps" work – they intercept <a> clicks and use history.pushState() to prevent the page from reloading.
history.pushState(...) only changes the history and does not navigate to a new URL.
Here I think "and does not navigate to a new URL" is wrong – it does, except the page doesn't reload.
There is no contradiction here. There is no reason why the Vue Router could not do a change to the url with the history api and change the component as rendered in various router-view components.
When you include a router-link in your code, this is a component like any other. Vue will render this component. The interesting part is this:
const router = this.$router
// And later
const handler = e => {
if (guardEvent(e)) {
if (this.replace) {
router.replace(location)
} else {
router.push(location)
}
}
}
const on = { click: guardEvent }
if (Array.isArray(this.event)) {
this.event.forEach(e => { on[e] = handler })
} else {
on[this.event] = handler
}
For the history api, you can see in the source that for a this.$router.push(..) we transition, and we push the state with this pushState function. The transition itself can be found in history/base.js.