JavaScript | Adding new slides in Materialize

Question

I'm using the front-end framework Materialize and I want to add additional slides when you submit a text input of a book title(then grabs json from google books api). It does add a slide but the materialize slider ignores it. I posted this question on stack overflow and someone wrote "Re-init the slider". I don't know what that means(initialize the object?) and I'm still noobish at javascript. Because I want to provide the code here i added window.onload.

https://code.sololearn.com/WcmPMt4WAkLx/?ref=app

Answer 1

Hi Caleb

Here is working code

https://code.sololearn.com/WzWJDY10getN/#js

I created a function to initialize the slider object

then called it after the inserts of the child elements into the DOM

I only tried it with "Jungle book" and that seems to work

I like the XHR stuff by the way, quite cool to get data of the web

I will leave code up for a few days then I will delete

Answer 2

Hi Caleb

I will try and have a look at this for you later today.
But why not use the official Material components from google?

https://material.io/develop/

Answer 3

Thank you so much!! Also i didn't even know material.io exists so I'm definently going to expirement with it.

The code works and took out the default lists sliders but kept the ul in the html and was able to add as many books as I pleased.

I used xhr because I'm completing a JS course made by Brad Traversy and he shows old and new ways to build application.

Answer 4

also I forgot to mention that I'm avoiding jQuery in this code

Answer 5

Some code I just wrote using Material Components.
https://code.sololearn.com/WBm588FrW0He/?ref=app