HOW TO FILTER A LIST FIELD BASED ON ASSOCIATION WITH ANOTHER FIELD

Explanation Of Filter Fields

00:00:00 (Click on these time links to see Youtube video)

Perhaps you encountered the necessity to limit the dropdowns of a list field based on its association with another table. A common place where this occurs is, for example, when the regions of only one country have to be loaded. Although there are many ways to accomplish this, this is how I have done it.

Example Component With Filters

00:00:43

For example; Here is a component called 'Job Tracking'. In this component is a client area. If you go to Admin Views, there is 'Country' and 'Regions'. The field concepts can be changed and replaced with other tables. (See video.) 00:01:16 Here follows an explanation of how it is implemented in the client's view because that's where most of the work is done. JavaScript, as well as the PHP area, are two areas that should be looked at. 00:01:51 In previous tutorials some of the Ajax functionality in Component Builder had been explained.

For the sake of those who have not watched all the tutorials, here is a brief explanation. First, it should be determined what our objective is. 00:02:19 When starting with a client a country must be selected. Load only that country's regions. 00:02:41 You furthermore want to make sure that when you unselect the Country, it also unselects the Region.

There are various things that must be accomplished here. This will be illustrated in JavaScript. 00:03:10 If, for example, the country "Australia" is used, notice that it does not load any regions. It shows 'Create a region'. If Namibia is selected, it indicates 'Select a region'. So two regions are already created. There is this button in some of the dropdowns which are being added by selecting 'true' to the button. It's helpful to either create or editing existing regions. If a country is selected where there are not any region set yet, it tells you to create one. 00:03:44 If 'Create' is selected, your region may be created. Save and close. Call it 'Region', for example. Save and close. Go back to Creating a client. 00:04:17 If Australia is selected it shows that it has 'Regions'.

To demonstrate how that was done:

Two Variables - Var Regions(object) Var Region(store)

00:04:30

Let's get started on the JavaScript side of things. There are two variables. Both may be called 'var'. One is an object and one is where a value will be stored (only if that value is already set.) When the fields are Created, all the regions are brought to the page. No region should be left unloaded. 00:05:11 Rather parse those regions into this variable, then place those regions that are part of this country back into the list of drop-down options. 00:05:43 It is been done for 'each(function()' on the regions options. (See video.) Get the value; it is placed in 'var'key. Get the 'text', place it in 'var' text, then add it to regions'Key=text'. It is loaded in an array. 00:06:08 Then take the value of the set region, add that to 'Region', and the function 'getregion' is set.

Loading Show - Class ID

00:06:23

First load the 'jQuery("#loading"),show);'. This 'show', or the class ID, is loaded on the page by default when Fade in Affect is set on 'Add'. By default, it loads that class with a spinner. If the loading process takes a long time the user is incapable of doing anything. 00:06:58 It is not necessary to add that. Look for the options 'find('option')' for the region, and remove all of them. An update is then triggered. This update that is triggered here 'lizt', is a Joomla function. 00:07:19 It might change in the future. Keep in mind that if things break, it might happen here, because this list field is dynamically generated by Joomla. Only after everything has been removed, it may be told to draw that list again.

GetRegion

00:07:51 Up till here only the region had been touched. Now get the country value that has been selected and add it to 'country'. Now call the server. The only thing given to the server is the 'country' ID. Up here is a 'country' ID. We have our getUrl. In this case, 'getRegion' is the task. 00:08:16 Check if the token is on the page and make sure that a country ID is not zero. A request is loaded and an Ajax is sent.

It is done this way because some things must be performed after we have the result which is this 'done'. 00:08:40 Then 'setRegion'. The result is placed into 'setRegion'. Hide the 'load' and do some house cleaning on the 'button'. In this instance, the button had been tampered with. There is a correction region button below. (See video.) 00:09:05 This code may be copied and tested. Update 'region' to whatever field you are trying to limit but only after 'setRegion'.

SetRegion

SetRegion is simple, mainly because most of the work had already been done, with the result being returned. (It gets returned by PHP). 00:09:38 Get an array in 'setRegion', check if the array is there, then 'append'. As with any list selection, 'append' the value.

Strings - Select_A_Region, Create_A_Region

00:09:55 The 'select_a_region' is a JavaScript variable that is set through PHP, which will be discussed at a later stage. It's just a string that says that the region should be selected. 00:10:21 If there is no array returned, another variable should be used, the 'create_a_region' which is also just a string.

Go to 'jQuery.each(array,function(i,id){', select 'array', and use the 'id'. Check if the 'id' is in 'regions'. If it is in 'regions', append the 'id' as a value. In 'regions' the text, as well as the 'id', had been saved. 00:10:51 That is how to get the text, adding it in there. (See video.) It could have been done in PHP, but let the browser help with some of the lifting. There are regions. If it's a huge table it should be approached differently. Eventually, it is checked whether the 'id' and the 'region' equals(id==region). If it does, it is necessary to ensure setting the 'region' value.

00:11:25 As you remember we found the region value and stored it into 'region'. Just in case the value was set before and saved, now the person looks through different countries. But when he selects the country that was previously saved, we want to make sure that this previous region is also shown as the selected value. That's what we are doing here. (jQuery(#jform_region)val(id)). After everything is done we trigger this liszt:Updated again. 00:11:58 Which is the same as what was triggered there. (See video.) This sets the Regions List afresh. We run this bit of housekeeping which is done by the region button.

RegionButton Correction

00:12:22 The region button is JavaScript that is added because of the List field. If a specific list field was set to have no button, then leave this out. If it was set to have a button, the name of the button would be this area before the 'jform'_. This part of the name ('region') would be the first part of the name of the button function, and the last part would be 'button'. 00:12:54 That's how it can execute and search for this 'regionButton' function on the page if there is uncertainty. That's how to run the Button Correction. That is how the JavaScript performing this looks like. This area of JavaScript can include PHP.00:13:25 This area can not because it's a pure JavaScript file where this is JavaScript added to a PHP file. There may be added some PHP and that's where to get the 'select_region' and 'create_region'.

JavaScript - AdminForm.on(change)

There is another way to do this in Javascript. This function, the 'adminForm.on(change)' of the country field and when that event occurs. We want to execute 'getRegion'. 00:14:06 That is done every time the field is changed. That is the extra Script that must be added to these two if you are going to copy this. It will execute this function which is the same function executed on the page load. 00:14:33 It is not necessary to execute this because it is already been done on the page load. It is all the JavaScript that should be added.

PHP - Ajax Method - Model - Controller

It is not necessary to add the PHP to the same Admin view since all the Ajax methods are added to one file in the component Ajax. The model, as well as the controller, is the Ajax model and controller. 00:15:13 If the component is compiled it can be unzipped. Go to the model and the controller, in the back end or in the front end. For now, it will be in the back end under models. There is an Ajax model and all of the back end Ajax methods are added to this one model. This 'php ajax method' area is what takes care of the model. 00:15:37 This 'Ajax input - add' area takes care of the controller. The value's name is 'country', the task is 'getRegion', if no values are passed it is Null. It must be an integer that is passed. The method name is 'getRegion' and it must be a login user. That takes care of the whole controller setup.

00:16:08 Here is the method('php ajax methogotd') called 'getRegion'. It gets the ID. It doesn't need to sanitize it again since the controller already did that. At the controller, the implementation may be seen. We get the factory and the database factories pass us the database. A query must be set up that requests the ids in the region that are published. 00:16:38 This is where the changes must be done. We want the IDs of the regions on their association with the country. In the region table, we have a field and a column, called 'country'. It has an 'id' in it. 00:17:06 So each region is linked to a country. Whatever table you're targeting, this association would be this country. Add the integer again, set the query, execute it, and check if you have a value. If there is a value return the 'loadcolumn' function, which returns the 'id' in an array. 00:17:33 Then return 'false' if no value was found. That is all the PHP necessary. It returns the PHP to the JavaScript and the JavaScript does the rest. 00:17:57 This will help to sort your dropdowns.

The fields being focused on this is Country and Region Field both of which are custom. Tutorials had been done on how to set up a Custom Field. As a reminder: Open Region. In Region the button is set on true ('button="true"'). 00:18:34 The region is selected. The view name can be dynamically updated in the description. Here(XML field definition) some PHP is done. All of the PHP can be placed in 'type_PHP_1' without adding it to the 19th placement. Every area had been used. 00:19:05 I prefer to let the code appear as it had been written and not computer-generated. Options are added, and so this is a basic Custom field without any JavaScript in it. Everything had been done in the back end Admin View, the PHP as well as the Javascript. 00:19:44 I prefer to use this field may be in other views with different associations. So I don't usually use the script area as one might expect.

So that's looking at filtering a dropdown Custom list selection via JavaScript and Ajax. 00:20:15 If you are targeting a table of another component where you do not have control over the actual field names, it will work the same way as long as there is a field of association within the table that you like to filter, you could write that PHP, find the values and filter it.