Changing Contents of Select Based on Choice from another select - javascript

Im having a hard time rendering subgenres based off the parent genre. Ive included a codeSandbox originally forked from the mui_grouped_select CSB at the bottom.
As you can see in the CSB I tried a few different approached to try to get subGenre and ended up passing an empty array just so the page would load.
Feel free to convert to a ".js" if that's easier.
I can see that I can get the right code in the first handle hook but after that I am struggling withupdating the subGenre to have the selectedGenre.sub array.
P.S. new to JS and TSX. I come from a C99/Python background mostly if that helps any.
https://codesandbox.io/s/genre-subgenre-v1mfr3?file=/demo.jsx

Related

How to repeat text from one page to another to reduce time in updating every month

I've been looking everywhere and I can't seem to find exactly what I'm looking for, I'm starting to think I should be looking at some kind of Javascript?
Basically, I have an amount £1,000,000 displayed over an image button and I need this repeated on a different page (The page the button leads to).
As I've never done this before I'm not sure where to look or what I need to be looking at as I'm a novice in this area.
Any help would be appreciated.
If the value is static so you can use content css property :
https://developer.mozilla.org/fr/docs/Web/CSS/content
If the amount is dynamic you should pass variable through Url or via form.
As I don't have a clue as to what you're setup is, i'll make some assumptions:
a static HTML site
no javascript frameworks (so no jQuery or jqLite etc)
with these assumptions you should start by looking up url attributes as a way to communicate basic information between pages.
As an example, the button href should look something like this:
/link-to-page?amount=1000000
then you grab the amount on the new page - with javascript - looking in the window.location object
This is a good resource

EventDrops for D3.js (from marmelab) - how to tweak example code?

I stumbled upon the non-nodejs version of the EventDrops library for D3, and I was able to reproduce the example on my own server. See this blog post here for more information and the example code.
However, could somebody please dodge me in the right direction or provide me with code for the following two problems I'm currently facing:
Instead of the real-time monitoring, I would like to load a CSV file with dates to display. How can I achieve this?
And second, how can I display more information while hoovering over an entry from the graph? The demo from the link above shows only limited information, but I would like to load up multiple rows from the CSV and show them while hoovering. Like in the example from the original EventDrops library team, but without using nodejs.
Thank you all so much for your time and your answers.
Clarification to point 1: The CSV file will have the following structure:
name,date,comment
google,"2017-03-06 17:00","some comment about the event"
facebook,2017-02-15 11:13,"again a comment"
google,"2017-01-01 12:13","older google event"
Mark was so kind to put some code together (see here). However, I was not able to run this code with my CSV from above. Could somebody please help me? Thanks!
Best regards,
Stephan
For your first point, you can turn a CSV file into JavaScript plain object quite easily using PapaParse. You would then be able to import your file using something like:
const data = Papa.parse(csv);
For your second question, you have access to the whole data row in each events. For instance, referring to the EventDrops demo, you can access your data directly via, for instance:
const chart = d3.chart.eventDrops()
.mouseover((row, index) => {
// if you need to access several rows, use data[index+1] for instance
})
For hovering yet, it is not really trivial, and you should handle mouseover and mouseout events manually, as shown in previous demo link.

Randomized Divs each time a page is reloaded/refreshed

I saw this post:
Random Div Order on Page Load
and the working solution was posted:
jsfiddle.net/BwJHj/1/
Which works each time I refresh that page ^ As soon as I make my own, or even just copy the exact HTML/CSS/JAVA from that demo, it doesn't work?
Just wondering why that may be.
Select Javascript from settings and it will work
without javascript : [https://jsfiddle.net/UserIsMonica/daw5nytd/][1] (no randomize)
with Javascript : [https://jsfiddle.net/UserIsMonica/daw5nytd/1/][2] (Randomize)
It's common first time Jsfiddle user can easily miss that. i did :)
happy coding !!

Web Page Javascript Objects

newbie question.
I've read some of the W3Schools, I also read a lot from other sources on the internet, however I can't find what I need, and I'm sure it's quite simple to you.
I'm using ASP.Net, and I want to add to my website, multiple items, which every item hold a picture, and some other information, including links. I'm pretty sure I don't need to write the code for every item in the HTML source, and I don't know exactly how to implement my this.
The basic idea is that my items will be imported from a Database that I create in visual studio, and I want to style my webpage so they would appear in a certain formation, I thought I might need to use Javascript or CSS for this, hope I'm not mistaken.
Javascript isn't some sort of magician that will render all your stuff on its own. However, you can use it to attach a template to every of your items.
What you have to do is :
Create a base HTML template for 1 of your item that can be applied to all of them
Create a Javascript function that will attach thoses CSS classes and HTML attributes to every element out of your DB (or you could use a templating frameork .. since there's a lot of them I'll let you look for it on Google. It's pretty easy to use)
On page load or whatever event you want to bind on, you call your function which will attach the CSS and HTML to every element out of your DB and will render it on your page
Enjoy what you've done.
I hope this helps. Good luck ! ;)

Mottie jQuery Tablesorter filters not loading on the page

I'm having a terrible hard time at trying to get the Mottie Tablesorter plugin to work properly on my HTML page.
I'm designing the front end of a website for someone, and I need the advanced filters provided with this plugin:
http://mottie.github.io/tablesorter/docs/example-widget-filter-formatter-1.html#demo
I have downloaded the files in .zip format, extracted them and placed them in my project, and made sure all the links work properly and that the page can read them.
I have copy/pasted the stuff from the demo with the multiple types of filters across all the columns (in the code quotes) into my HTML page.
However, the second table header row inside the table header doesn't appear.
I can't figure out what it is that I'm doing wrong.
Here's a screenshot of what gets rendered on the page + the offending code inside the web inspector of Safari: http://puu.sh/dqzNX.png
As you can see, the second table header looks like it is trying to display, but it's empty?
And it seems like it generates a search for searching by text, but is set to hidden (I don't know why)
And it also generates the correct amount of TH's, but all of them (apart from the first one) are empty!!
I've been banging my head against a wall over this for 4 days now and have no clue!
Can anyone else get this demo to work properly?
Many thanks for taking the time to read all of this!
Looks like I must not have been pulling jQuery UI into my project properly, as when I started from scratch it all looks like it's working now! -- My bad, thanks for the help though, great table filtering!
In my haste I also seemed to have put a css CDN into a script src tag, causing some style errors where the date picker was below the table before it had been selected and had a transparent background. That had me stumped for a good 20 minutes until I realised my mistake!

Categories

Resources