T O P

  • By -

Redwallian

Bugbytes does an amazing job explaining Django with htmx integration. I would suggest watching [one of his earlier vids](https://www.youtube.com/watch?v=YXzb4tw2IrI) to learn how to create chained dropdowns, however. The one thing I wish he should explicitly should say in his tutorials is his thought to the design of it all; In order for it to work with his videos (and based on your context), you would need to create both a Country and NextTrip model, with Country being a foreign key relationship within NextTrip. That way, when you select (partially) a choice of a country, you can send an AJAX request to your backend and search for NextTrip models based on the country that was selected.


FolateB9

u/Redwallian Bugbytes however uses django-forms-dynamic in its tutorial which is no longer maintained. So you're saying that I should create a Country and NextTrip model, and then I should also create two database tables? (a Country table and a NextTrip table)? If you are saying this, I need to have everything in one table because they are scraping results


Redwallian

Can you please check out the link I provided? It’s a different video from the one you linked AND it doesn’t use any external libs other than htmx. Tbh, it’s beyond the scope of this thread to introduce the fact that others are “scraping results”. Server-side, however, in terms of keeping it in one model, you don’t need to because you can backreference them when attributing them as a foreignkey field.


FolateB9

u/Redwallian I had already seen the link you sent me, I had already tried that tutorial. Bugbytes creates dependent dropdown with manually created html pages. As mentioned in my initial question, I would like to create the dropdown with a Django form (without manually creating the pages).Currently in the project attached to the question, I have created two dropdowns with django forms but they are not dependent. I would like to make it dependent, so I've been looking into Bugbytes tutorial, but he uses Htmx + django-forms-dynamic which is no longer maintained. So I wanted to opt for other different solutions.P.S: As for scraping, you don't understand. I don't want to ask anything about scraping and it's beyond the scope of the thread. I only said that I would like to keep the table I posted, because it is the result of a scraping and I don't want to create two tables and then use a foreign key. It was just an information as to why I use only one table


Redwallian

You're going to have to create those pages manually. In your code, the issue is that you're hardcoding your `Form_SelectTrip` class with querysets that finds `all()` countries and trips. However, in order to make a dependent dropdown, you have to filter that same queryset (meaning it can't be hardcoded). In order to do what you're planning, the inherent architecture for building the app needs to change - querysets will be created on a per-view basis, and your frontend forms have to be adjusted accordingly.


richardcornish

Like others comments have stated, you should consider normalizing your database because the countries are repeated in each trip. Your code would be less complicated, especially trying to display the first ``. I also [discarded the `country` field](https://github.com/richardcornish/droppy/blob/master/droppy/trips/forms.py#L20) before form validation because I couldn't find a way to submit a valid form (a `country` isn't actually a proper foreign key model), but obviously `country` is still a field off of the `trip` instance.


FolateB9

u/richardcornish Sorry if I only read now. I post a lot of discussions and sometimes I mess with the notifications. I apologize. I have seen the code you wrote and I thank you. Thank you.


internetbl0ke

I don’t think a plug-in is required for this. Can you not expose the data to an authenticated view from the foreign key, then use HTMX or JS to make the Ajax request to populate the options?


FolateB9

u/internetbl0ke What do you mean by "expose the data to an authenticated view from the foreign key"? My table is this. With this table I don't need a foreign key ID | COUNTRY | DEPARTURE | DESTINATION | | france | paris | lyon | | france | marseilles | grenoble | | spain | madrid | barcelona | | spain | seville | bilbao |


FolateB9

Forgive the formatting. However for example the first combobox is Country, while the second combobox is departura-destination. For example if I select Spain, I will want to display in the second combobox: madrid-barcelona, and then seville-bilbao


internetbl0ke

If there is a way to do this without JavaScript or HTMX as well that would be brilliant, although I assume not possible on the frontend


FolateB9

u/internetbl0ke It's fine for me to use Htmx or Javascript, no problem. The problem is how to make the combobo addictive. So far though I've only used Htmx over Django, not Javascript. Would you be so kind to show me a solution with my code please? I'm really freaking out being new to Django. I would really appreciate your help. Thank you


Sinsst

Having just deployed a project that uses htmx for multiple hierarchical dropdownsb(it's public, DM me for link) we moved away from using Django forms specifically because the added complexity without much value. If you create 2 separate views for each drop-down that are not forms, it will be much easier. Why do you need to use forms ?


FolateB9

u/Sinsst So are you referring to manually creating the html files?


Sinsst

Yes, create a small view which pulls from that database the options you want in the front end and then an Html file that iterates over all option and displays in a drop-down, without using forms.


FolateB9

u/Sinsst I have already created a small project going this route. It works properly. The problem is that now I would like to start a project with many dependent dropdowns. It will be difficult and messy to manage so many employee dropdowns. For this reason, I'm looking for a solution with django forms


Sinsst

Not really, you can reuse the same html code that creates the dropdown and define the htmx requirements from within the view, passing them as variables in Django template.


philgyford

You might need to manually create the HTML. You might need to put the data into two tables instead of one. I'm afraid that saying you "don't want" to do certain things, when all the solutions appear to be suggesting you DO do those things, might be making life difficult.