12 Posts
Nuno_rules
8 years ago
Topic

Hello,

I have created a gig form with 2 article related fields (gig_venue and band_name), as I am adding venue articles and band articles, my dropdown are getting rather long in the gig articles form.

With dynamic cascade field plugin, would I be able to create a first level dropdown list with countries, where the 2nd drop down menu would have the corresponding venues to the selected country?

For bands, the first dropdown menu would be letters (A,B, C, etc) and depending which letter is selected, I would get only band names starting with the selected letter.

Can this be done with this plugin (http://www.seblod.com/store/extensions/2997) and still have the values article related?

Thanks in advance 

Johann

Get a Book for SEBLOD
251 Posts
Viktor Iwan
8 years ago
0
Level 1

For the workflow, yes you can !

but your third dropdown perhaps require tweak a bid... i suggest you tweak it with "Chosen" (see the sample on 'Multiple Select with Groups') as core joomla use

Ref: http://julesjanssen.github.io/chosen/


But perhaps Klas has better answer....

12 Posts
Nuno_rules
8 years ago
0
Level 1

I am not sure that I was very clear.

I would like 4 dropdown lists 

Dropdown list 1 : list letters of the alphabet

Dropdown list 2: will display only bands who's name start with the letter picked in dropdown list 1 (article related)

3 and 4 are effectively the same

Dropdown list 3 : lists countries

Dropdown list 4: will display only venues which are in the country picked in dropdown list 3 (article related)

Can this be done?

4229 Posts
Kadministrator
8 years ago
2
Level 1

For select dynamic cascade you need a column in database that relates first dropdown with second one, so in the bands list database you would need letter column, which you don't have.

A much easier solution is what Viktor suggested, just use chosen or select2 on your related article dropdown, it turns it into combobox that can be searched - it shows options filtered on your entered letters, see first example on

https://harvesthq.github.io/chosen/

or

https://select2.github.io/examples.html

12 Posts
Nuno_rules
8 years ago
1
Level 2

Thank you both for your advice. I have downloaded the plugin but have no idea how to set it up. I have spent the whole day looking for a tutorial on how to setup chosen in Seblod and had no luck.

I guess I need to link in my template index.php to the chosen.css and chosen.js

Will this do?

<link type="text/css" href="/<?php echo JURI::base(); ?>templates/<?php echo $this->template ?>/css/chosen.css" rel="stylesheet"/> <script type="text/javascript" src="/<?php echo $this->baseurl ?>templates/<?php echo $this->template;?>/js/chosen.js"></script>

When it comes to linking my field to query, i am guessing that i have to click on the pen, then Stuff, then JS (script).

But what command do I put in here?

And how do I link the css?

Thanks

Johann

12 Posts
Nuno_rules
8 years ago
0
Level 3

Chosen Plugin in Seblod

Waking up at 6.00 this morning was the best feeling as I have managed to figure this one out. For people who may be stuck like me.

1. Download Chosen plugin

2. Copy chosen.min.css to the css folder in your template folder and chosen.query.min.js to the js folder in your template folder. Joomla has already got chosen folders in media/jui/... but they might not be as up to date as your downloaded version.

3. Edit your template index.php by adding links to your css and js files between the <head> </head> tags.

   <link rel="stylesheet" href="/templates/yourtemplatename/css/chosen.min.css" /> 

   <script src="/templates/yourtemplatename/js/chosen.jquery.min.js"></script>

4. Go to your Seblod form, click on the pen on the left of your field, click on the orange arrow on the left bottom corner of the Storage section. Under Stuff, in Class (CSS) enter field_name , in Script (JS) enter $(".field_name").chosen();

5. In chosen.min.css, changed the padding to centre text under

.chosen-container-single .chosen-single{position:relative;display:block;overflow:hidden;padding:5px 0 0 5px;

Hope this helps, that is how I got it working.

Get a VIP membership