Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2014-03-11 10:56:19

a7aylor
New Member
From: Manchester, UK
Registered: 2014-03-11
Posts: 9

Filtering categories based on the chosen section (back end)

Im building a system for the school I work at and Im giving staff writes to create their own articles. For each article created they choose the subject e.g IT, then add 1 or 2 categories from a selction under the IT category e.g Key Stage 3 (cat1) and Computing (cat2).

Example structure:

Subject Chosen – IT

Categories under chosen subject:

IT (parent)
  • Computing (child)
  • Computer Science (child)
  • Databases (child)

As the system grows the list of categories is going to get quite large, since there are many categories for each section. I’d really like to minimise what the user sees in categories once they’ve chosen a subject, since these are directly related to the categories in terms of labelling – so once they choose a subject (e.g. IT) you would only see categories that are children of the category labelled ‘IT’.

I came accross this (view topic) in the forums, which can remove categories, but it would be too much to manage if I have to create exclusions for every section and update the plugin everytime I add in new categories. I need to say ‘show these’ for this section, rarther than ‘exclude these’.

Any ideas? Im not always keen on using plugins, but in this case it’s probably the only way!

Last edited by a7aylor (2014-03-11 14:30:28)

Offline

#2 2014-03-11 13:02:48

sacripant
Plugin Author
From: Rhône — France
Registered: 2008-06-01
Posts: 479
Website

Re: Filtering categories based on the chosen section (back end)

Hello a7aylor,

A day, Pat64 and Etc they discussed similar topic.

You can make that with Javascipt/Jquery :

$(function() {

        /*
	**	Adapt Cat-1 values depends to selected section	
	*/

	var catSelect	= $('#category-1')
	,   cats	= $('option:gt(0)', catSelect)
	,   catsLevel0	= cats.not(':contains("\u00a0")').addClass('level0')
	;

	cats.hide();
	var sectionSelected = $('#section :selected').text();
	// console.log(sectionSelected);

	function filterCats(section) {
		cats.hide().filter('[value='+section+']').nextUntil(".level0").show();
	};

	filterCats(sectionSelected);

	$('#section').change(function() {
		var sectionSelected = $('#section :selected').text();
		filterCats(sectionSelected);
	});
});

Last edited by sacripant (2014-03-11 13:06:27)

Offline

#3 2014-03-11 13:34:22

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: Filtering categories based on the chosen section (back end)

Hi and welcome to txp,

just to clarify, are you talking about the front or the back end?


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#4 2014-03-11 13:37:23

a7aylor
New Member
From: Manchester, UK
Registered: 2014-03-11
Posts: 9

Re: Filtering categories based on the chosen section (back end)

colak wrote #279657:

Hi and welcome to txp,

just to clarify, are you talking about the front or the back end?

Thanks. Its for the back end

Offline

#5 2014-03-11 13:55:58

etc
Developer
Registered: 2010-11-11
Posts: 5,028
Website GitHub

Re: Filtering categories based on the chosen section (back end)

sacripant wrote #279656:

A day, Pat64 and Etc they discussed similar topic.

Frankly, I don’t remember it, but agree with your idea. It’s a bit fragile, since is based on visual presentation that could change, and works only for top-level categories (though this can be fixed). I would suggest adding some data-level attribute to categories options in treeSelectInput(...) function for easier children selection/styling.

Offline

#6 2014-03-11 16:49:32

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: Filtering categories based on the chosen section (back end)

etc wrote #279660:

I would suggest adding some data-level attribute to categories options in treeSelectInput(...) function for easier children selection/styling.

I could add that to the core if it’s deemed broadly useful.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Online

#7 2014-03-11 16:59:57

sacripant
Plugin Author
From: Rhône — France
Registered: 2008-06-01
Posts: 479
Website

Re: Filtering categories based on the chosen section (back end)

Bloke wrote #279670:

I could add that to the core if it’s deemed broadly useful.

Yes, please.

Offline

#8 2014-03-11 22:01:16

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: Filtering categories based on the chosen section (back end)

etc wrote #279660:

I would suggest adding some data-level attribute to categories options in treeSelectInput(...)

Done


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Online

#9 2014-03-12 12:21:32

a7aylor
New Member
From: Manchester, UK
Registered: 2014-03-11
Posts: 9

Re: Filtering categories based on the chosen section (back end)

Ok so jquery sounds like the way to go. Ive got ‘bot_write_tab_customize’ installed as a plugin so I could use the additional js code option in that to run a document ready function.

Thanks for the code example sacripant, but im really not sure how to start this. In jquery how could I do something like below, dynamically for all sections:

if chosen Section = ‘section_name’, Category 1 and Category 2 show only categories where parent = ‘section_name’

…so only relevent categories can be chosen based on the currently chosen section.

Thanks dudes

Offline

#10 2014-03-12 13:03:28

uli
Moderator
From: Cologne
Registered: 2006-08-15
Posts: 4,303

Re: Filtering categories based on the chosen section (back end)

a7aylor wrote #279684:

if chosen Section = ‘section_name’, Category 1 and Category 2 show only categories where parent = ‘section_name’

In my understanding, cats.hide().filter('[value='+section+']').nextUntil(".level0").show(); does exactly that. I.e. drop sacripants script in for bot_write_tab_customize and enjoy.

Last edited by uli (2014-03-12 13:04:54)


In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links

Offline

#11 2014-03-12 14:12:22

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: Filtering categories based on the chosen section (back end)

Or, as a cheeky plugin:

if (txpinterface === 'admin') {
	register_callback('smd_catsec', 'article');
}

function smd_catsec($evt, $stp) {
	$section_cat_list = fetch_form('section_cats');
	$section_cats = "'". implode("','", array_map('trim', explode("\n", $section_cat_list)))."'";

	echo script_js(<<<EOJS
jQuery(function() {
	var smd_affected = [{$section_cats}];
	var catSelect	= $('#category-1')
	,   cats	= $('option:gt(0)', catSelect)
	,   catsLevel0	= cats.not(':contains("\u00a0")').addClass('level0')
	;

	function smd_filterCats(section) {
		cats.hide().filter('[value='+section+']').nextUntil(".level0").show();
	};

	$('#section').change(function() {
		var sectionSelected = $(this).find(':selected').val();

		if ($.inArray(sectionSelected, smd_affected) > -1) {
			smd_filterCats(sectionSelected);
		} else {
			cats.show();
		}
	}).change();
});
EOJS
	);
}

This changes things a little bit in case you only want the filtering to take place on certain sections. Create a form called section_cats and list, one per line, the sections you want to be affected. e.g.:

english
maths
science
it

Any sections not in the list will have all categories displayed. You could reverse the logic if the list of sections to exclude is shorter. Or just ditch that part of the code entirely. Note the section names are used this time to match the catgeories, not the section titles.

Hope that helps.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Online

#12 2014-03-12 14:16:51

a7aylor
New Member
From: Manchester, UK
Registered: 2014-03-11
Posts: 9

Re: Filtering categories based on the chosen section (back end)

uli wrote #279685:

drop sacripants script in for bot_write_tab_customize and enjoy.

I must be close, if someone can help me limp over the finish line :-s

Ive pasted that exact code in to ‘bot_write_tab_customize’ (in the additional js code) between js tags:

<script>
$(function() {
	var catSelect	= $('#category-1')
	,   cats	= $('option:gt(0)', catSelect)
	,   catsLevel0	= cats.not(':contains("\u00a0")').addClass('level0')
	;
	cats.hide();
	var sectionSelected = $('#section :selected').text();
	// console.log(sectionSelected);
	function filterCats(section) {
		cats.hide().filter('[value='+section+']').nextUntil(".level0").show();
	};
	filterCats(sectionSelected);
	$('#section').change(function() {
		var sectionSelected = $('#section :selected').text();
		filterCats(sectionSelected);
	});
});
</script>

No errors, but also no effect; all categories are still listed. Ive dropped alerts in the functions just to test that their running, which they are. Im sure its something basic Ive missed.

Im on 4.5.5, Hive theme.

Offline

Board footer

Powered by FluxBB