diff --git a/030-How-to-filter-a-list-field-based-on-association-with-another-field.md b/030-How-to-filter-a-list-field-based-on-association-with-another-field.md index a7c2633..d984c99 100644 --- a/030-How-to-filter-a-list-field-based-on-association-with-another-field.md +++ b/030-How-to-filter-a-list-field-based-on-association-with-another-field.md @@ -1 +1,23 @@ -Hi I don't know some of you also encountered The reality of having to Sort off limit the drop Downs Of a list field Based on It's association with another table A very common place where we find this [00:00:22](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m22s) Is for example When you want to load the regions of only one country And so I'm gonna show you how I have achieved this I realize there are many ways to do this and yet This is how I've done it Ok so to start off I have a component I could use as a illustration or job tracking Now in this component [00:00:50](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m50s) Obviously I have a client area And then I have Already loaded I go to admin views you would see there is country and regions Now I'm gonna illustrate it on the basis of country and regions but You obviously can Change the Field Concepts and Replace it with other tables [00:01:16](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m16s) But none the less this is what I'll be using And I'm gonna show you how I implemented it in inside the the client's View because that's basically where most of the work is done Ok so I'm gonna open the client View And then I'm gonna look in the two places we wanna look at JavaScript As well as the PHP area Now I have in various previous tutorials explain some of the Ajax functionality [00:01:51](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m51s) In component Builder But I realized not all of you Might have watched all the tutorial so I'll explain some of that again Briefly But having said that We first gonna look at What we really wanna achieve Like I have said When you load So let me go show you that [00:02:19](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m19s) So when you Start with a client You would like to choose a country And then Have it load only that country's regions That is basically what you want to do Furthermore You want to make sure when it does that And you unselect [00:02:41](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m41s) the country it also unselects The region And so there are Various things we wanna achieve here So in JavaScript I'm goining to show you how I've done that I'm just illustrating at the moment one country Maybe I should go put on a few more so just hold on for a second there ok So now if I look it says Australia If I click on Australia [00:03:10](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m10s) You see that it doesn't load any regions in fact that says create a region If I choose Namibia It says select a region and so there's three regions two regions already created Now as you know by now there is this button In some of the Dropdowns which are being added by saying true to the button And so it's very helpful For either Creating or editing existing regions So if you could sort of selecting a country where there isn't any regions set yet [00:03:44](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m44s) It basically tells you to create one And you can then create a region for this country And what's nice if you click on this Create You can then simply create your region Save and close so I don't know any of Australia regions so I'm just gonna call it Region for now And save and close Go back to creating a client [00:04:17](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m17s) If I now Select Australia you see that it's got regions So there we go Problem solved And that's really what I'm gonna demonstrate how I did that So let's get started On a JavaScript side of things I first have Two variables I actually could call them both of var Doesn't matter [00:04:42](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m42s) One is an object And one is simply where we are gonna Store if there is a value already set We're gonna store that value Then on document ready I simply Oh yes Before I continue Creating the fields I obviously make it bring all the regions to the page I don't want it to [00:05:11](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m11s) Leave some regions on Unloaded how can I say Instead what I rather do Is I parse those regions Into this variable And then only put those regions that are actually Part of this country back Into the list of dropdown options that's really what I'm doing so that's What you also see happening here Is first thing I'm doing is I am [00:05:43](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m43s) Doing it for each On the regions options And then I'm getting the value I putting it in key I'm getting the text I'm putting it in text And then I'm adding it to Regions Simply as you would load it in any Any array there And then I am also [00:06:08](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m08s) Getting the value of the set region And I'm adding that to Region And then I'm setting the The function getregion The getregion function is down here This area The first thing we do is we load a little loading show now the loading show or Rather this class ID [00:06:34](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m34s) Is loaded on the page by Default When you Set This fade effect On ad Then it by Default loads that class With a nice spinner And so I'm basically If the loading process takes long I'm sort of stopping the user from doing anything Waiting for that spinner [00:06:58](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m58s) Don't need to add that Then I am Finding Options for the region And I'm removing them All of them Then I'm triggering An update now this is This update that we are triggering here list zt is a Joomla function [00:07:19](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m19s) And it's actually Possibly gonna change in the future So keep that in the back of your mind It things break it possible is happening right here Because this as you know the list the of is dynamically generated by Joomla And so we literally telling it Draw that list again But after having removed everything Now We are looking at the country [00:07:51](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m51s) So up to here we only touched the region Now we get the country value the one that is selected And we add it to country We then call the server at this point And the only thing we are giving the server is the country ID up here We have a country ID We have our Get URL Our case is get region [00:08:16](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m16s) Is the task We checking that the token is on the page Checking that a country ID is not zero And We then basically loading the request Shooting of an Ajax We doing it this way because obviously You wanna do some things after we've got The result which is this done And then we [00:08:40](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m40s) Set region now We throw the result into setregion We hide the load And Then We do some house cleaning on the button So that button also gets Tampered with And I'll show you the region button correct Correction that we are doing down here [00:09:05](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m05s) And you can copy this code Test that out obviously you would update this to whatever field you trying to limit only do that After set region Now we going to setregion setregion is quite simple Mainly because we already done most of the work With the result being returned and so I'll show you the PHP that returns this result in the moment so in setregion would get an array we Check if the array is there [00:09:38](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m38s) And then we append Simply as you would With any list selection We append the value But now Since we are Oh yes another thing I'm almost skipping it This select region [00:09:55](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m55s) Is a JavaScript Variable That I'm setting through PHP Which I'll show you in a later Stage And basically it's just a string That says that you should select the region And if there is no array returned We basically just use the other variable [00:10:21](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m21s) Create a region which is also just a string So now over here we are going to each over the array And we are using the ID And we checking whether the ID In regions If it's in regions We append the ID as a value And as you remember in regions we saved the text As well as the ID [00:10:51](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m51s) And so that is how we get the text Simply adding it in there I know we could have done that in the PHP but I felt a let's let the The browser help us with some of the lifting So We got the regions there if it's a huge table you might want it should approach this differently Eventually we are checking whether the ID and the region = Since if it does your mother ensure to set Region Value so as your member previously [00:11:25](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m25s) We found the region value And which store did into region Just in case The value was set before and saved Now the person is looking through different countries But when you can select the country that previously was saved We want to make sure that his previous region is also shown as the selected value That's simply what we doing here Then after everything is done we again trigger this List [00:11:58](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m58s) Update Which is the same as what was triggered there And that basically sets the regions list again afresh Then only Do we run this little bit of housekeeping Which does the Region button Now the region button It's actually A JavaScript [00:12:22](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m22s) That is added Because of the list Field so if your specific list field was said to have no button You could simply leave this out If it was said to have a button Then this is the usually the name of the button would be the This area before the J form Underscore This part of the name Would be the first part of the name of the button function and then the last part would be button [00:12:54](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m54s) So that's how you know and you can obviously on the page Let it execute and search for this function if you aren't sure But that's how you would Run The button correction And that's basically How did JavaScript looks to achieve this Ok there is a little bit more housework necessary in that's what I said before This area of JavaScript can actually include [00:13:25](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m25s) PHP that area can not because that's just pure JavaScript file Where's this is JavaScript added to a PHP file So here we can add some PHP and that's where we get the select region and create region Now I know there is another way to do this in Javascript itself so forgive me for being so sloppy Anyway There's this function Which basically when the admin form on change of the country field is When that event occurs We want to execute get region [00:14:06](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m06s) so That Every time That is changed What is the extra bit of Script that you need to add these two If you are gonna Copy this down exactly the same Just another note We see then execute this function which is the same function That we are executing [00:14:33](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m33s) On the page load We don't need to read execute this Simply because that is already been done on the page load that is all the JavaScript But you need to add Now let's go look at the PHP Should know by now you do not need to add the PHP to the same admin View Since all the ajax methods are all added to one file In the component called Ajax the the model As well as the controller is the Ajax model in controller so if you compile the component [00:15:13](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m13s) You can unzip it and go to the model To the controller either in the backend or in the front end Where is now it will be in the back end And it's under models Auc there's an Ajax model and All of the backend Ajax Methods gets added to this one model And so this area is what takes care of the model [00:15:37](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m37s) And And this area here takes care of the Controller So basically saying the values name is country the task is get region if no values passed it's Null And it must be an integer that is past And the method name is get region And it must be a logged in user that's a simple as that is That takes care of the whole controller setup Then here [00:16:08](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m08s) we have The method Called get region it gets the ID It doesn't need to sanitize it again since the controller already did that You can go look at the controller to see the implementation So we simply getting the factory the data base factories passes us the database We set up a query we say that we are looking for the IDs in the region That are published [00:16:38](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m38s) I'm basically where the country Now this is again where you need to sort of Make your changes We want the names of the regions or the IDs instead sorry of the regions on Their association with the country so Obviously then in the region Table We have a a a field a column That is called country And it has an ID in it [00:17:06](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m06s) So that each region Is linked to a country so whatever Table you're targeting this association would be than this country And it's obviously me being paranoid we just add the interger there again Set the query executed check if you have a value And if we do we simply return the load Load column Function [00:17:33](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m33s) Which returns the ID is in an array There we go done finished And There we return false if no value was found and it's simple as that that's all the PHP you Need And that returns The the PHP to our JavaScript And the JavaScript does the rest Ok well [00:17:57](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m57s) I hope this will be very helpful And help you to sort of sort your dropdowns I didn't spend much time on explaining that maybe I should so let me Give a Quik Run over of that The field that we are Focusing on is this country in the region field and they are both custom right So I've already done tutorials on how to set up a custom field I'm not gonna spend too much on this But just for reminder let's open region we Simply saying the button is true [00:18:34](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m34s) And We select the region you can obviously update the view name dynamically in the description And here we doing some PHP you could Put all of this PHP in just PHP one Without adding it to the 19th placement But like I've done I've actually used every area [00:19:05](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m05s) I like making the code look It was written and not computer-generated And Then I'm adding the options and so this is just a simple basic simple custom field there is'nt even any Java script in here I've Done Everything basically in the model Did the PHP as well as the Javascript sorry not in the model in the back end admin View And I think that is because I wanna use this field maybe in other views with different [00:19:44](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m44s) Different Association So I don't tend to use the script area Maybe as one might expect So that's quickly looking At Filtering a dropdown list selection custom list selection Via JavaScript And Ajax therefore If you are targeting a table of another Component which you're not having the control over [00:20:15](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m15s) The actual field names it will it should work the same way as long as there is A field of Association within the table that you'd like to filter you could write that PHP Find the values and filter it Thanks for watching +# HOW TO FILTER A LIST FIELD BASED ON ASSOCIATION WITH ANOTHER FIELD + + +### Explanation Of Filter Fields + +Hi I don't know some of you also have encountered the reality of having sort of limit the drop downs of a list field based on it's association with another table. A very common place where we find this [00:00:22](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m22s) is for example when you want to load the regions of only one country. I'm going to show you how I have achieved this I realize there are many ways to do this and yet this is how I've done it. + +* ### Example Component With Filters + +To start off, I have a component I could use as a illustration called job tracking. Now in this component [00:00:50](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m50s) I have a client area. Then I have already loaded, I go to admin views, you would see there is country and regions. Now I'm going to illustrate it on the basis of country and regions but you can change the field concepts and replace it with other tables. [00:01:16](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m16s) None the less this is what I'll be using. I'm going to show you how I implemented it in inside the client's view because that's where most of the work is done. + +I'm going to look in the two places we want to look at JavaScript, as well as the php area. Now I have in various previous tutorials explain some of the Ajax functionality [00:01:51](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m51s) in component builder. I realized not all of you might have watched all the tutorial so I'll explain some of that again briefly. But having said that we first going to look at what we really want to achieve. [00:02:19](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m19s) When you start with a client, you would like to choose a country. Then have it load only that country's regions, that is what you want to do. Furthermore you want to make sure when it does that, you unselect [00:02:41](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m41s) the country, it also unselects the region. There are various things we want to achieve here. So in JavaScript I'm going to show you how I've done that. I'm just illustrating at the moment one country. Maybe I should go put on a few more, so now if I look it says Australia. If I click on Australia, [00:03:10](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m10s) you will see that it doesn't load any regions in fact that says create a region. If I choose Namibia, it says select a region, and so there's two regions already created. Now as you know by now there is this button(see video). In some of the dropdowns which are being added by saying true to the button. It's very helpful for either creating or editing existing regions. So if you could sort of selecting a country where there isn't any regions set yet, [00:03:44](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m44s) it tells you to create one. You can then create a region for this country, and what's nice if you click on this create, you can then simply create your region. Save and close. I don't know any of Australia regions, I'm just going to call it Region for now. Save and close. Go back to creating a client. [00:04:17](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m17s) If I now select Australia you will see that it's got regions. So there we go, problem solved. And that's what I'm going to demonstrate how I did that. + +### Two Variables - Var Regions(object) Var Region(store) + +So let's get started on a JavaScript side of things. I first have two variables. I could call them both var. [00:04:42](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m42s) One is an object, one is where we are going to store, if there is a value already set. We're going to store that value. Creating the fields I make it bring all the regions to the page, I don't want it to [00:05:11](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m11s) leave some regions on unloaded. Instead what I rather do is I parse those regions into this variable. And then only put those regions that are part of this country back into the list of dropdown options. What you also see happening here, first thing I'm doing is I am [00:05:43](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m43s) doing it for each on the regions options. And then I'm getting the value. I putting it in (var)key, I'm getting the text, I'm putting it in (var)text, and then I'm adding it to regions(Key)=text;. Simply as you would load it in any array there. And then I am also [00:06:08](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m08s) Getting the value of the set region(see video). And I'm adding that to region. And then I'm setting the function getregion. The getregion function is down here. + +### Loading Show - Class ID + +The first thing we do is we load the loading show. The loading show or rather this class id, [00:06:34](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m34s) is loaded on the page by default when you set Fade in Affect on add. Then it by default loads that class with a nice spinner. If the loading process takes long I'm stopping the user from doing anything waiting for that spinner, [00:06:58](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m58s) you don't need to add that. Then I am finding the options for the region, I'm removing all of them. Then I'm triggering an update. This update that we are triggering here lizt, is a Joomla function. [00:07:19](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m19s) It's possibly going to change in the future. So keep that in the back of your mind. If things break, it is possible happening right here. + +???? +Because this list field is dynamically generated by Joomla. And so we literally telling it Draw that list again. But after having removed everything. We are looking at the country. [00:07:51](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m51s) So up to here we only touched the region Now we get the country value the one that is selected And we add it to country We then call the server at this point And the only thing we are giving the server is the country ID up here We have a country ID We have our Get URL Our case is get region [00:08:16](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m16s) Is the task We checking that the token is on the page Checking that a country ID is not zero And We then basically loading the request Shooting of an Ajax We doing it this way because obviously You wanna do some things after we've got The result which is this done And then we [00:08:40](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m40s) Set region now We throw the result into setregion We hide the load And Then We do some house cleaning on the button So that button also gets Tampered with And I'll show you the region button correct Correction that we are doing down here [00:09:05](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m05s) And you can copy this code Test that out obviously you would update this to whatever field you trying to limit only do that After set region Now we going to setregion setregion is quite simple Mainly because we already done most of the work With the result being returned and so I'll show you the PHP that returns this result in the moment so in setregion would get an array we Check if the array is there [00:09:38](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m38s) And then we append Simply as you would With any list selection We append the value But now Since we are Oh yes another thing I'm almost skipping it This select region [00:09:55](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m55s) Is a JavaScript Variable That I'm setting through PHP Which I'll show you in a later Stage And basically it's just a string That says that you should select the region And if there is no array returned We basically just use the other variable [00:10:21](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m21s) Create a region which is also just a string So now over here we are going to each over the array And we are using the ID And we checking whether the ID In regions If it's in regions We append the ID as a value And as you remember in regions we saved the text As well as the ID [00:10:51](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m51s) And so that is how we get the text Simply adding it in there I know we could have done that in the PHP but I felt a let's let the The browser help us with some of the lifting So We got the regions there if it's a huge table you might want it should approach this differently Eventually we are checking whether the ID and the region = Since if it does your mother ensure to set Region Value so as your member previously [00:11:25](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m25s) We found the region value And which store did into region Just in case The value was set before and saved Now the person is looking through different countries But when you can select the country that previously was saved We want to make sure that his previous region is also shown as the selected value That's simply what we doing here Then after everything is done we again trigger this List [00:11:58](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m58s) Update Which is the same as what was triggered there And that basically sets the regions list again afresh Then only Do we run this little bit of housekeeping Which does the Region button Now the region button It's actually A JavaScript [00:12:22](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m22s) That is added Because of the list Field so if your specific list field was said to have no button You could simply leave this out If it was said to have a button Then this is the usually the name of the button would be the This area before the J form Underscore This part of the name Would be the first part of the name of the button function and then the last part would be button [00:12:54](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m54s) So that's how you know and you can obviously on the page Let it execute and search for this function if you aren't sure But that's how you would Run The button correction And that's basically How did JavaScript looks to achieve this Ok there is a little bit more housework necessary in that's what I said before This area of JavaScript can actually include [00:13:25](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m25s) PHP that area can not because that's just pure JavaScript file Where's this is JavaScript added to a PHP file So here we can add some PHP and that's where we get the select region and create region Now I know there is another way to do this in Javascript itself so forgive me for being so sloppy Anyway There's this function Which basically when the admin form on change of the country field is When that event occurs We want to execute get region [00:14:06](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m06s) so That Every time That is changed What is the extra bit of Script that you need to add these two If you are gonna Copy this down exactly the same Just another note We see then execute this function which is the same function That we are executing [00:14:33](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m33s) On the page load We don't need to read execute this Simply because that is already been done on the page load that is all the JavaScript But you need to add Now let's go look at the PHP Should know by now you do not need to add the PHP to the same admin View Since all the ajax methods are all added to one file In the component called Ajax the the model As well as the controller is the Ajax model in controller so if you compile the component [00:15:13](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m13s) You can unzip it and go to the model To the controller either in the backend or in the front end Where is now it will be in the back end And it's under models Auc there's an Ajax model and All of the backend Ajax Methods gets added to this one model And so this area is what takes care of the model [00:15:37](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m37s) And And this area here takes care of the Controller So basically saying the values name is country the task is get region if no values passed it's Null And it must be an integer that is past And the method name is get region And it must be a logged in user that's a simple as that is That takes care of the whole controller setup Then here [00:16:08](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m08s) we have The method Called get region it gets the ID It doesn't need to sanitize it again since the controller already did that You can go look at the controller to see the implementation So we simply getting the factory the data base factories passes us the database We set up a query we say that we are looking for the IDs in the region That are published [00:16:38](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m38s) I'm basically where the country Now this is again where you need to sort of Make your changes We want the names of the regions or the IDs instead sorry of the regions on Their association with the country so Obviously then in the region Table We have a a a field a column That is called country And it has an ID in it [00:17:06](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m06s) So that each region Is linked to a country so whatever Table you're targeting this association would be than this country And it's obviously me being paranoid we just add the interger there again Set the query executed check if you have a value And if we do we simply return the load Load column Function [00:17:33](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m33s) Which returns the ID is in an array There we go done finished And There we return false if no value was found and it's simple as that that's all the PHP you Need And that returns The the PHP to our JavaScript And the JavaScript does the rest Ok well [00:17:57](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m57s) I hope this will be very helpful And help you to sort of sort your dropdowns I didn't spend much time on explaining that maybe I should so let me Give a Quik Run over of that The field that we are Focusing on is this country in the region field and they are both custom right So I've already done tutorials on how to set up a custom field I'm not gonna spend too much on this But just for reminder let's open region we Simply saying the button is true [00:18:34](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m34s) And We select the region you can obviously update the view name dynamically in the description And here we doing some PHP you could Put all of this PHP in just PHP one Without adding it to the 19th placement But like I've done I've actually used every area [00:19:05](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m05s) I like making the code look It was written and not computer-generated And Then I'm adding the options and so this is just a simple basic simple custom field there is'nt even any Java script in here I've Done Everything basically in the model Did the PHP as well as the Javascript sorry not in the model in the back end admin View And I think that is because I wanna use this field maybe in other views with different [00:19:44](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m44s) Different Association So I don't tend to use the script area Maybe as one might expect So that's quickly looking At Filtering a dropdown list selection custom list selection Via JavaScript And Ajax therefore If you are targeting a table of another Component which you're not having the control over [00:20:15](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m15s) The actual field names it will it should work the same way as long as there is A field of Association within the table that you'd like to filter you could write that PHP Find the values and filter it Thanks for watching