Plugin

Developer
Supported

GWcode CatMenu

ExpressionEngine 1.x, ExpressionEngine 2

Back to this add-on's main page
View Other Add-ons From Leon Dijk

1 of 2
1
   

You must be logged in to post.

Is this a possible use for this add on?....

Support Request

shorn
shorn

I am planning on organising these entries via categories, which will be determined via location. Im in the UK, so my parent category will be Country, and the child categories will be the relevant counties within that country.

I have my view template for single entry, and I have a search template.

My search template consists of two dropdown fields and a search. These will be for determining the category, and below that will be a list of entries.
My question is… can I run this from one single template?

Ideally, when the user goes to the search template, they will have the drop downs and then below that will be a list of ALL entries in this channel (paginated). Is it possible to choose the parent category from the first drop down, this would then give you a list of child categories within the second drop down, select the one you want, hit search, and then be presented with the relevant entries within that category below.

Hope that make sense!

Leon Dijk (GWcode)
# 1
Developer
Leon Dijk (GWcode)

Hi shorn,

I think it can be done, but you’d have to use JavaScript for the dependable dropdowns.
In the past I’ve helped someone to do something similar. It needed 2 dependable dropdowns like you, with the first one holding the root categories and the second the child categories for the selected root category, which would then be submitted to Safecracker.

Anyway, the add-on to use here is GWcode Categories, not the one you posted this support post for (GWcode CatMenu).

To generate the dependable dropdowns, I suggested the following code:

{!-- create dropdown for depth 1 categories --}
<div id="col1" >
 <
select name="" id="parent_dropdown1">
 <
option value="Select a Category" selected="selected">Select a Category</option>
 
{exp:channel:categories channel="your_channel" category_group="3" parent_only="yes" style="linear"}
  
<option value="{category_id}">{category_name}</option>
 
{/exp:channel:categories}
 
</select>
</
div>

<
div id="col1" >
{!-- create dropdowns for depth 2 categories and hide them with css --}
{exp
:gwcode_categories group_id="3" style="linear"}
 {if depth2_start}
<select name="" id="child_dropdown_for_{parent_id}" class="child_dropdown">{/if}
 {if depth 
== 2}<option value="{cat_id}">{cat_name}</option>{/if}
 {if depth2_end}
</select>{/if}
{
/exp:gwcode_categories}
</div

with the following jQuery code:

$(document).ready(function() {
  
$('.child_dropdown').hide(); // hide all child dropdowns

  
$('#parent_dropdown1').change(function () // when the parent changes..
   
$('.child_dropdown').hide(); // hide all child dropdowns
   
$('.child_dropdown').attr('name'''); // remove the name of all child dropdowns so they are not being submitted to the form
   
$('#child_dropdown_for_' + $(this).val()).show(); // show the child dropdown for the newly selected parent
   
$('#child_dropdown_for_' + $(this).val()).attr('name''category[]');
  
});
 
}); 

I don’t know how familiar you are with jQuery, but this should get you started.
If you can’t figure it out, let me know and I’ll try to come up with a full example.

Cheers,
Leon

Leon Dijk (GWcode)
# 2
Developer
Leon Dijk (GWcode)

Hi again,

I’ve played with this for a bit. Attached is a full example. You may need to tweak it a bit to your liking, but it should work. I’m able to first select a root category, then a child category, hit search and it will show the entries for the selected child category.

Hope that helps!

Cheers,
Leon

File Attachments
gwcode-dependable-dropdowns.pdf  (File Size: 19KB - Downloads: 372)
shorn
# 3
shorn

Wow, this is great thanks. I’m not in a position to test right at this moment, my job is getting in the way! :)
I shall be trying this out tonight first thing!
I’m brand new to EE and it’s this kind of support and assistance that it helping my achieve things! I’ll get back to you soon!!

Leon Dijk (GWcode)
# 4
Developer
Leon Dijk (GWcode)

No problem, and welcome to EE! Hope you like things so far..and if you need further help, let me know.

shorn
# 5
shorn

OK, just started to have a go with this. Ive added the jQuery code,  and the code to the drop downs. The first drop down shows the list of parent categories, but when one is selected, it does not pass through to the second drop down.

heres my code, does this look right?...

<div class="row row-selects">
         <
div class="col">
          <
label for="country-field">Country</label>
          <
select name="#" id="parent_dropdown1">
          <
option value="Select a Category" selected="selected">Select a Category</option{exp:channel:categories channel="walks" category_group="2" parent_only="yes" style="linear"}
          
<option value="{category_id}">{category_name}</option{/exp:channel:categories}
          
</select>
         </
div>
         <
div class="col">
          <
label for="county-field">County</label>
          <
select id="county-field">
           
{exp:gwcode_categories group_id="2" style="linear"}
           {if depth2_start}
<select name="#" id="child_dropdown_for_{parent_id}" class="child_dropdown">{/if} {if depth == 2}<option value="{cat_id}">{cat_name}</option>{/if}
           {if depth2_end}
</select>{/if}
           {
/exp:gwcode_categories}
          
</select>
         </
div>
        </
div

My parent category group is “2”.

shorn
# 6
shorn

Still struggling to get this working. Any help greatly appreciated! Thanks!

Leon Dijk (GWcode)
# 7
Developer
Leon Dijk (GWcode)

Hard for me to say why this isn’t working without having access to the page. Looking at the code snippet, it does appear to be right.

When you look at the source code of the page, do you see the dropdowns being generated correctly?
Did you include jQuery? Did you also include the jQuery code I posted?
Is there any other EE tag surrounding the piece of code you posted?

shorn
# 8
shorn

Yea, I am including jQuery, and I have used the jQuery code.

The source code of the page shows the following….

<form action="#" class="form-addwalk">
         <
div class="row row-selects">
          <
div class="col">
           <
label for="country-field">Country</label>
           <
select name="" id="parent_dropdown1">
            <
option value="Select a Category" selected="selected">Select a Category</option>
            
             <
option value="12">England</option>
            
             <
option value="13">Scotland</option>
            
             <
option value="14">Wales</option>
            
            </
select>
          </
div>
          <
div class="col">
           <
label for="county-field">County</label>
           
                                                <
select name="" id="child_dropdown_for_12" class="child_dropdown">            <option value="16">Derbyshire</option>                                    <option value="15">Hampshire</option>                                    <option value="17">Sussex</option>            </select>                                                                                    <select name="" id="child_dropdown_for_14" class="child_dropdown">            <option value="18">Cardiff</option>            </select>          </div

But only the first drop down is visible.

Seems like its picking up the child categories, bout not displaying them?

 

Leon Dijk (GWcode)
# 9
Developer
Leon Dijk (GWcode)

Ok, the output seems to be ok, looks like the jquery part isn’t working.
It’s supposed to show the dropdown for the child categories once you select a parent category in the first dropdown.

I’ve created a pastie and jsfiddle for my output, that way you can see it’s working..and it’s probably easier for you to see why yours isn’t working.

Full source code of my output: http://pastie.org/3462680

Give that a try by saving it as a html file and running it in your browser.

And here’s the jsfiddle: http://jsfiddle.net/pds6Z/

You can try that one in the lower-right box.

shorn
# 10
shorn

Thanks for that. Just tried it. When using the jsfiddle, it works. Select the first category, then next drop down shows and second one allows me to select the child category. I’m sure its something to do with the js.
I have jquery 1.7.1min.js locally on my server, as other parts of my site use js. I also have a js main file.
I have copy/pasted your exact head code, into the head of mine, and removed my js links, and then it works, but my css styling is gone, presumably as it links to the js.
I tried by pasting the query script into my main js file, but then, i only get the first drop down showing. presumably there is some kind of conflict?
Not sure if you would be able to tell, but pastie’d my js main file here: Pastie JS file

Getting there! :) Thank you ever so much for your help!

Leon Dijk (GWcode)
# 11
Developer
Leon Dijk (GWcode)

Quite a bit of JS there :) It looks like you’re also using Prototype, which is probably why the jQuery part isn’t working. Please see this page

For the jQuery code that deals with the dropdowns, try replacing the dollar sign with “jQuery”, so

$(document

will become

jQuery(document

and

$('.child_dropdown').hide(); 

will become

jQuery('.child_dropdown').hide(); 

etc.

shorn
# 12
shorn

Hi there.
Just done as above. changed to jQuery. Still no good! :( Im getting both the parent drop down, and two drop downs showing (one for each set of child categories).
Agghh! Who would have thought this would be so hard! :)
I’ve done a jsfiddle here: http://jsfiddle.net/KWsxc/

Leon Dijk (GWcode)
# 13
Developer
Leon Dijk (GWcode)

Interesting, thanks for putting that jsfiddle page up there to play with.

I found out that when I change the “onLoad” to “no wrap (head)”, it does work. The setting is at the top left of the jsfiddle page.

You can see the results here: http://jsfiddle.net/KWsxc/1/

So, if you find out what that setting does exactly, I’m sure you’ll be able to get it to work :)
Sorry for the slow replies here, I’m swamped with work at the moment.

shorn
# 14
shorn

Thank you for your reply. I saw what you meant, and did some research in the jQuery forums. With some help I have finally got it working!

it was simply a case of adding this to the following line:

jQuery('#child_dropdown_for_' jQuery(this).val())[b].prev()[/b].show(); 

Amazing heh!

Thank you so much for your help. Although I do have one more final query, (which should hopefully not be a jQuery related one!)

The page that has these drop downs and search button on, is basically my list page for the latest entries.
What I would like is that when the page is first visited, it brings you to that channels entries with the lost recent showing first. (It does this at the moment by a simple channel entries tag pair below the drop downs.
Now when the drop downs are selected and the search button hit, I would like to page to refresh with the entries for that category displaying like the latest ones did before.

Is that making sense?

Leon Dijk (GWcode)
# 15
Developer
Leon Dijk (GWcode)

Great!

That last part should definitely be possible. When clicking the search button, it already redirects to a certain page? If not, please look at the code I provided in the PDF, that should do the trick.

It redirects you to a certain template. How you set it up is up to you.

Let’s say you have the dropdowns and initial list of entries on this page:
/my_template_group/my_template

With the search button, you can make it redirect to that same template, with the category id appended as a 3rd segment, so it goes to:
/my_template_group/my_template/3
for example.

Then, in the template, you can decide what to show, based on the 3rd segment.
If the 3rd segment is not set, you can have the template show the initial list of entries.
If the 3rd segment is set, you can have the template show the results based on the category.

Something like this:

{if segment_3 == “”}
...code to show the initial list of entries
{if:else}
...code to show the list of entries for a category. Use {segment_3} as the value for the category parameter in the exp:channel:entries tag.
{/if}

I hope that helps!

1 of 2
1