client side rendering JS | Astro Lounge | Page 1

real badger Jul 3, 2024, 2:54 AM

#

I have built a carousel using js, css and html. It works on a .html file but doesn’t work with Astro. I tried wrapping it in an eventListener(astro:pageload, () =>{. File. “dataset”, “slides” and “carousel” are all “possibly null, it says. Any advice?

vapid cedar Jul 3, 2024, 5:08 AM

#

is:inline to make the script tag run on the client?

real badger Jul 3, 2024, 10:30 AM

#

My Js is in a script tag at the bottom of my html. Styles are imported.

#

Does this answer your question?

proven violet Jul 3, 2024, 10:45 AM

#

Can you send an actual code snippet or a stackblitz reproduction?

real badger Jul 3, 2024, 11:12 AM

#

Just Js?

proven violet Jul 3, 2024, 11:13 AM

#

Probably your astro file?

real badger Jul 3, 2024, 11:14 AM

#

buttons.forEach(button => {
button.addEventListener("click", () => {
const offset = button.dataset.carouselButton === "next" ? 1 : -1;
const carousel = button.closest("[data-carousel]"); // Find closest carousel container
const slides = carousel.querySelector("[data-slides]");
const activeSlide = slides.querySelector("[data-active]");

let newIndex = (slides.children.length + [...slides.children].indexOf(activeSlide) + offset) % slides.children.length; // Improved slide selection and looping

slides.children[newIndex].dataset.active = true;
if (activeSlide) {
  delete activeSlide.dataset.active; // Remove active state from previous slide
}
});
});

})

</script>

proven violet Jul 3, 2024, 11:15 AM

#

If you know that those elements will always be there you can cast as Element

const carousel = button.closest("[data-carousel]") as Element

real badger Jul 3, 2024, 11:16 AM

#

where do I put this line of code?

#

at the top?

proven violet Jul 3, 2024, 11:18 AM

#

No so that's the same line as you have where you're defining carousel

<script>
document.addEventListener("astro:page-load", () => {
    const buttons = document.querySelectorAll("[data-carousel-button]");

    buttons.forEach(button => {
    button.addEventListener("click", () => {
    const offset = button.dataset.carouselButton === "next" ? 1 : -1;

    // Added the Typescript casts below 👇
    const carousel = button.closest("[data-carousel]") as Element; // Adding as Element here
    const slides = carousel.querySelector("[data-slides]") as Element; // Adding as Element here
    const activeSlide = slides.querySelector("[data-active]") as Element; // Adding as Element here

    let newIndex = (slides.children.length + [...slides.children].indexOf(activeSlide) + offset) % slides.children.length; // Improved slide selection and looping

    slides.children[newIndex].dataset.active = true;
    if (activeSlide) {
      delete activeSlide.dataset.active; // Remove active state from previous slide
    }
    });
    });
})

</script>

real badger Jul 3, 2024, 11:19 AM

#

Thanks, it stilldoesn't recognize dataset

proven violet Jul 3, 2024, 11:21 AM

#

I'd probably do something like

const slideChild = slides.children[newIndex] as Element
slideChild.dataset.active = true

real badger Jul 3, 2024, 11:24 AM

#

Slides, newIndex and dataset are all complaining

#

Document is not defined it says

#

    document.addEventListener("astro:page-load", () => {
        const buttons = document.querySelectorAll("[data-carousel-button]");
        const slideChild = slides.children[newIndex] as Element
slideChild.dataset.active = true
        buttons.forEach(button => {
        button.addEventListener("click", () => {
        const offset = button.dataset.carouselButton === "next" ? 1 : -1;
    
        // Added the Typescript casts below 👇
        const carousel = button.closest("[data-carousel]") as Element; // Adding as Element here
        
        const slides = carousel.querySelector("[data-slides]") as Element; // Adding as Element here
        const activeSlide = slides.querySelector("[data-active]") as Element; // Adding as Element here
    
        let newIndex = (slides.children.length + [...slides.children].indexOf(activeSlide) + offset) % slides.children.length; // Improved slide selection and looping
    
        slides.children[newIndex].dataset.active = true;
        if (activeSlide) {
          delete activeSlide.dataset.active; // Remove active state from previous slide
        }
        });
        });
    })
    
    </script>```

proven violet Jul 3, 2024, 11:28 AM

#

Are you able to screenshot or copy and paste the errors you're getting?

real badger Jul 3, 2024, 11:38 AM

#

can you see the screenshots that I uploaded, they don't appear to be in the chat.

Screen_Shot_2024-07-03_at_6.30.09_AM.png

Screen_Shot_2024-07-03_at_6.32.18_AM.png

Screen_Shot_2024-07-03_at_6.33.14_AM.png

#

now they appear to be in the chat

#

I need to run an errand this morning, I will check back in. a couple of hours. I appreciate your help!

real badger Jul 3, 2024, 2:04 PM

#

Maybe I should explore server side rendering for the carousel??

ember snow Jul 3, 2024, 2:52 PM

#

The error about document not existing is coming form CustomCarousel.js. Where are you importing that script and what's on line 2 of it?

real badger Jul 3, 2024, 3:20 PM

#

This is what I am importing: There's no JS file

#

Before, all the pictures were stacked, but would not scroll.

real badger Jul 3, 2024, 4:02 PM

#

I found this list of errors. I'm not sure what to do with it:

Screen_Shot_2024-07-03_at_11.00.56_AM.png

#

    document.addEventListener("astro:page-load", () => {
        const buttons = document.querySelectorAll("[data-carousel-button]");
        buttons.forEach(button => {
        button.addEventListener("click", () => {
        const offset = button.dataset.carouselButton === "next" ? 1 : -1;
    
        // Added the Typescript casts below 👇
        const carousel = button.closest("[data-carousel]") as Element; // Adding as Element here
        
        const slides = carousel.querySelector("[data-slides]") as Element; // Adding as Element here
        const activeSlide = slides.querySelector("[data-active]") as Element; // Adding as Element here
    
        let newIndex = (slides.children.length + [...slides.children].indexOf(activeSlide) + offset) % slides.children.length; // Improved slide selection and looping
    
        slides.children[newIndex].dataset.active = true;
        if (activeSlide) {
          delete activeSlide.dataset.active; // Remove active state from previous slide
        }
        });
        });
    })
    
    </script>```.  here's the file

proven violet Jul 3, 2024, 4:15 PM

#

Try typing them as HTMLElement instead of Element, I think maybe dataset is only on HTMLElement?

real badger Jul 3, 2024, 4:23 PM

#

how do I do that?

proven violet Jul 3, 2024, 4:24 PM

#

Change where it says as Element to as HTMLElement. So this is called "casting" in Typescript, where we are telling Typescript that something is a specific type.

So we're telling it that your carousel variable, actually has the type HTMLElement

proven violet Jul 3, 2024, 5:09 PM

#

If that doesn't work, it might be worth making a stackblitz reproduction of this so we can actually see what you're trying to do!

You can use this template and add your code so we can see what you're doing https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics?file=README.md

StackBlitz

Astro Basics Example - StackBlitz

Run official live example code for Astro Basics, created by Withastro on StackBlitz

real badger Jul 3, 2024, 6:40 PM

#

Thank you. I want to try a couple more things first

real badger Jul 3, 2024, 8:07 PM

#

https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics?file=src%2Fpages%2Findex.astro

StackBlitz

Astro Basics Example - StackBlitz

Run official live example code for Astro Basics, created by Withastro on StackBlitz

proven violet Jul 4, 2024, 9:39 AM

#

real badger https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics?file=s...

Did you mean to send your updated one? This is just the boilerplate example link 😅

real badger Jul 4, 2024, 11:25 AM

#

Sorry I didn’t communicate well. Family came and I needed to entertain them. I’ll do that now.

#

Here is the link. I hope I did it right. I just copied and pasted the code into the program in the right spot. If I need to do more, let me know. https://stackblitz.com/edit/withastro-astro-habeqb?file=src%2Fpages%2Findex.astro

StackBlitz

Donnie

Astro Starter Kit: Basics - StackBlitz

Run official live example code for Astro Basics, created by Withastro on StackBlitz

#

everyone is sleeping

proven violet Jul 4, 2024, 2:21 PM

#

Ok, so... That repo doesn't seem to be working, there's some components and stuff missing... What exactly was your error again? Was it just the type error of the carousel.dataset ?

real badger Jul 4, 2024, 3:31 PM

#

I have had time to fix the code so that I now have the same experience as on my computer

#

Sorry for sending before it was ready

proven violet Jul 4, 2024, 3:54 PM

#

Ok, so that previous link still has some errors. But tbh you're not really trying to rewrite your whole site! If you can create a reproduction of your issue with the minimum amount of code the better!

So I think your error was a typing issue, correct?

real badger Jul 4, 2024, 3:59 PM

#

It worked on my end, I’ll look in a couple hours

#

Maybe I didn’t save it

real badger Jul 4, 2024, 8:59 PM

#

try this link. It works for me. I saved the data, and here is the link. https://stackblitz.com/edit/withastro-astro-habeqb?file=src%2Fcomponents%2Fcarousel.astro

StackBlitz

Donnie

Astro Starter Kit: Basics - StackBlitz

Run official live example code for Astro Basics, created by Withastro on StackBlitz

#

this is what I see

Screen_Shot_2024-07-04_at_4.59.43_PM.png

#

Let me know if you see something else. how I fix it. Thanks,

ember snow Jul 5, 2024, 1:57 AM

#

I see this: "The collection "blog" does not exist or is empty. Ensure a collection directory with this name exists."

But I don't see the error messages you mentioned earlier

real badger Jul 5, 2024, 1:58 AM

#

The problem is that the js does not work.

#

The photos should sycle with clicking the arrows

ember snow Jul 5, 2024, 2:06 AM

#

real badger The photos should sycle with clicking the arrows

try this: https://stackblitz.com/edit/withastro-astro-lcazi6?file=src%2Flayouts%2FLayout.astro

real badger Jul 5, 2024, 2:47 PM

#

Help me out, why does yours work, and mine does not. I have looked line by line in the js and html. What have I missed?

#

found it, thank you so much!!

ember snow Jul 5, 2024, 2:55 PM

#

real badger Help me out, why does yours work, and mine does not. I have looked line by line...

Yeah so I'm glad it works. Wasn't 100% sure if that's what you were going for but it's a simple fix. You were using the astro:page-load lifecycle event. But that doesn't work unless you import and use View Transitions.

So in Layout.astro line 3 I added:
import { ViewTransitions } from 'astro:transitions';

Then on line 38 I added: <ViewTransitions />

I took that from the docs here: https://docs.astro.build/en/guides/view-transitions/

You also had two <head> so I removed one

real badger Jul 5, 2024, 2:56 PM

#

I appreciate your help. still working on that attention to detail thing!!

ember snow Jul 5, 2024, 2:57 PM

#

Yeah it's terrible. Forget one word and your entire app breaks. If want to you can go through the astroJS tutorial and it has a section for ViewTransitions. It will explain it better than I can

#

I can't even find it in the tutorial now that I look. Maybe just the docs then 🙂

real badger Jul 5, 2024, 3:47 PM

#

Do you have the link? I would love to know more about JS and astro!

#client side rendering JS