joomla/Component-Builder
joomla/Component-Builder
38
21
Fork 10
Code Issues 57 Pull Requests Projects 3 Releases Wiki Activity

Updated 030 How to filter a list field based on association with another field (markdown)

Amigo 2019-07-15 08:31:11 +02:00
parent 4aa485278b
commit 51fbf9a90d
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
030-How-to-filter-a-list-field-based-on-association-with-another-field.md

@ -2,12 +2,16 @@
### Explanation Of Filter Fields
Perhaps you encountered the necessity to limit the drop downs of a list field based on it's association with another table.[00:00:22](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m22s) A very common place where this occurs, is for example, when the regions of only one country need to be loaded. Although there are many ways to accomplish this, this is how I have done it.
[00:00:00](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m00s)
Perhaps you encountered the necessity to limit the drop downs of a list field based on it's association with another table. A very common place where this occurs, is for example, when the regions of only one country need to be loaded. Although there are many ways to accomplish this, this is how I have done it.
* ### Example Component With Filters
For example: Here is a component called 'Job Tracking'. [00:00:50](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m50s) In this component is a client area. If you go to Admin Views, it may be seen that there is 'Country' and 'Regions'. The field concepts can be changed and replaced with other tables.(See video) [00:01:16](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m16s) Here follows a 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](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m51s)In various previous tutorials some of the Ajax functionality in Component Builder had been explained.
[00:00:43](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m43s)
For example: Here is a component called 'Job Tracking'. In this component is a client area. If you go to Admin Views, it may be seen that there is 'Country' and 'Regions'. The field concepts can be changed and replaced with other tables.(See video) [00:01:16](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m16s) Here follows a 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](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m51s)In various 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. But first it should be determined what is our objective. [00:02:19](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m19s) When starting with a client a country needs to be selected. Let it load only that country's regions. [00:02:41](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m41s) Furthermore you want to make sure that when you unselect the Country, it also unselects the Region.
@ -17,11 +21,15 @@ To demonstrate how that was done:
### Two Variables - Var Regions(object) Var Region(store)
Let's get started on a JavaScript side of things. There are two variables. Both may be called 'var'. [00:04:42](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m42s) One is an object and one is where a value is going to be stored, only if that value is already set. When the fields are Created, all the regions is brought to the page, no region should be left unloaded. [00:05:11](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m11s) Rather parse those regions into this variable, only then put those regions that are part of this country back into the list of drop down options.[00:05:43](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m43s) It is been done for 'each(funtion()' on the regions options.(See video) and then I'm getting the value, then it is put in 'var'key, then get the 'text', and place it in 'var'text, and add it to regions'Key=text'. Simply as it is loaded in any array. [00:06:08](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m08s) Then take the value of the set region(see video) and add that to 'Region', and the function 'getregion' is set.
[00:04:30](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m30s)
Let's get started on a JavaScript side of things. There are two variables. Both may be called 'var'. One is an object and one is where a value is going to be stored, only if that value is already set. When the fields are Created, all the regions is brought to the page, no region should be left unloaded. [00:05:11](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m11s) Rather parse those regions into this variable, only then put those regions that are part of this country back into the list of drop down options.[00:05:43](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m43s) It is been done for 'each(funtion()' on the regions options.(See video) and then I'm getting the value, then it is put in 'var'key, then get the 'text', and place it in 'var'text, and add it to regions'Key=text'. Simply as it is loaded in any array. [00:06:08](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m08s) Then take the value of the set region(see video) and add that to 'Region', and the function 'getregion' is set.
### Loading Show - Class ID
First load the 'jQuery("#loading"),show);' [00:06:34](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m34s) Now this 'show' or rather the class ID, is loaded on the page by default when Fade in Affect is set on 'Add'. Then by default loads that class with a spinner. If the loading process takes long the user is incapable from doing anything, [00:06:58](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m58s) It is not necessary to add that. Then look for the options 'find('option')' for the region, and remove all of them. Then an update is triggered. This update that gets triggered here 'lizt', is a Joomla function. [00:07:19](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m19s) It is possibly going to change in the future. Keep in mind that if things break, it is possible happening right 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.
[00:06:23](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m23s)
First load the 'jQuery("#loading"),show);' Now this 'show' or rather the class ID, is loaded on the page by default when Fade in Affect is set on 'Add'. Then by default loads that class with a spinner. If the loading process takes long the user is incapable from doing anything, [00:06:58](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m58s) It is not necessary to add that. Then look for the options 'find('option')' for the region, and remove all of them. Then an update is triggered. This update that gets triggered here 'lizt', is a Joomla function. [00:07:19](https://www.youtube.com/watch?v=Z8FLifQOjUk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m19s) It is possibly going to change in the future. Keep in mind that if things break, it is possible happening right 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