Problem with redirecting using window.location.href and getting JS to work

Terrencewafu · November 15, 2024, 3:05pm

Hello! I’m trying to ask for help regarding my project that works locally but once I built it using Netlify, it wouldn’t work. any help with be appreciated!

here is the source code - movie-watchlist/index.js at main · TerrenceArceo/movie-watchlist · GitHub
here is the built project - https://sparkling-cuchufli-6959ef.netlify.app/

THE PROBLEM

I am trying to redirect from my index.html to another page called watchlist.html, but since on my index.js I am using document.addEventListener, it made everything listens to a “click”. so my html anchor tags wouldn’t work anymore, so I had to give my anchor tag a data-attribute and made JS to listen for an element being clicked with the similar attribute that once clicked it will redirect to watchlist.html using window.location.href. The problem is I have already provided the exact link to it but still giving me the “redirecting to a broken link” problem…

Also any help in figuring out why my javascript won’t work?

Thank you in advance!

nathanmartin · November 16, 2024, 1:32am

@Terrencewafu Basically everything you’ve written about your JavaScript is irrelevant.

The /watchlist.html page doesn’t exist, this can be seen clearly by navigating there directly:

https://sparkling-cuchufli-6959ef.netlify.app/watchlist.html

You need to ensure the page actually exists.

(Note: Your source code can’t be viewed because it’s currently private)

Terrencewafu · November 17, 2024, 1:21am

Thank you so much for trying to help Nathan!

I have made my source code public -

github.com

TerrenceArceo/movie-watchlist/blob/main/index.js

const mainBody = document.getElementById("search-result-area")
const listBody = document.getElementById("saved-movies")
const form = document.getElementById("form")
const search = document.getElementById("search")
const apiKey = "13a9adac"
let movies = []
let moviesToChooseFrom = []

document.addEventListener("click", (e) => {
    e.preventDefault()
    if (e.target.dataset.search) {
            searchTitle(search.value)
    } else if (e.target.dataset.add) {
        addMovie(moviesToChooseFrom, e.target.dataset.add)
    } else if (e.target.dataset.nav === "list") {
        window.location.href = "watchlist.html"
    } else if (e.target.dataset.nav === "main") {
        window.location.href = "/"
    }
})

This file has been truncated. show original

here is the link to my project again
https://sparkling-cuchufli-6959ef.netlify.app/

here is what my files look like, just in case you can’t open the files still. by opening the project, it seems like it can’t detect the images from the images folder either.

thank you Nathan!

nathanmartin · November 17, 2024, 3:18am

@Terrencewafu As I previously indicated, there is no watchlist.html file.

Run your build locally and you will see that it never produces one:

You should revisit the Vite documentation.

Also be careful with case sensitivity, as you can see in your screenshot you have watchList

Terrencewafu · November 20, 2024, 4:37am

Hi Nathan! it’s me again!

I went and did what you told me to do and revisited VITE documentation. I was able to make my images appear by importing them, and was able to make my Javascript work.

what I really can’t figure out is the redirecting to watchlist.html
I build it locally using Vite and you’re right! it is not building watchlist.html and watchlist.js
I also fixed the camel case problem “watchList.html” to “watchlist.html”

what exactly is the reason why this is happening and how can I fix it?

Thank you again Nathan! you’ve been very patient and helpful!

nathanmartin · November 20, 2024, 4:57am

@Terrencewafu This seems like a question for Vite’s community, not for Netlify’s, see:

https://vite.dev/guide/#community

I don’t work with Vite myself so can’t give you a “users perspective”, but to throw you a bone:

If the secondary page or other assets are entirely static, you’re probably looking for:
https://vite.dev/guide/assets.html#the-public-directory
If they’re not, then you may want:
https://vite.dev/guide/build.html#multi-page-app

Terrencewafu · November 22, 2024, 1:56am

Hi Nathan!

I just want to thank you so much for all your help! I have finally figured out the solution to my problem! thank to you!

Just in case some other people in the future will have the same problem as this one, I would like to leave this solution here for them to see.

I basically had to configure my vite.config.js like this:

and moved my watchlist.html and watchlist.js inside a watchlist folder!

thank you so much! on top of all this coding I have done, I was also able to learn this new awesome thing called VITE!

Topic		Replies	Views
My javascript isn't working on my website Support deployment	3	313	November 20, 2022
I have a page redirect that works locally but not on netlify Support redirects	1	431	February 2, 2022
Errors after trying a redirect url Support netlify-dev-open-beta	7	1780	July 22, 2019
Redirect not working for external JS file Support redirects	10	1330	July 10, 2020
Redirects are not working Support redirects , create-react-app	5	543	May 16, 2023

Problem with redirecting using window.location.href and getting JS to work

Related topics