Filter Dependency issue

By ricardodrupal on 25 Jun 2015 at 01:54 UTC

Hello,

I would appreciate very much if someone could please assist me with the next issue:

- I was asked to implement several grouped filters and exposed them, so visitors could filter the information/data displayed on the page.

- I was asked to hide or show the subordinate filters depending on the option selected in the main filter. I mean, there is a first dropdown menu with the main categories, and below appears a second dropdown menu with subcategories, which dependents on the option selected previously on the first dropdown menu. For example, if the first dropdown menu shows "- Any -", then the second dropdown menu displayed is the one that shows the entire list of subcategories, but if the first dropdown menu shows a main category, then the second dropdown menu displayed is the one that shows the corresponding subcategories (e.g. if the Army Corps of Engineers main category is selected in the first dropdown menu, then the Army Corps of Engineers subcategories dropdown menu appear below with all its options to select from. I was asked to show all the time the main categories dropdown menu, just one subcategories dropdown menu corresponding to the option selected in the main categories dropdown menu, and hide the other subcategories dropdown menus, so just one of the subcategories dropdown menus is showed at a time. I implemented a jQuery code in the view (under Advanced/Other/JS Code):

jQuery(document).ready(function ($) {

if($("#edit-command").val() == "All"){
$("#edit-contracting-office-id-wrapper").show();
$("#edit-ace-contracting-offices-wrapper").hide();
$("#edit-inscom-contracting-offices-wrapper").hide();
$("#edit-amc-contracting-offices-wrapper").hide();
$("#edit-medcom-contracting-offices-wrapper").hide();
$("#edit-mraa-contracting-offices-wrapper").hide();
$("#edit-peo-stri-contracting-offices-wrapper").hide();
$("#edit-smdc-contracting-offices-wrapper").hide();
$("#edit-ngb-contracting-offices-wrapper").hide();
}
if($("#edit-command").val() == "1"){
$("#edit-contracting-office-id-wrapper").hide();
$("#edit-ace-contracting-offices-wrapper").show();
$("#edit-inscom-contracting-offices-wrapper").hide();
$("#edit-amc-contracting-offices-wrapper").hide();
$("#edit-medcom-contracting-offices-wrapper").hide();
$("#edit-mraa-contracting-offices-wrapper").hide();
$("#edit-peo-stri-contracting-offices-wrapper").hide();
$("#edit-smdc-contracting-offices-wrapper").hide();
$("#edit-ngb-contracting-offices-wrapper").hide();
}
if($("#edit-command").val() == "2"){
$("#edit-contracting-office-id-wrapper").hide();
$("#edit-ace-contracting-offices-wrapper").hide();
$("#edit-inscom-contracting-offices-wrapper").show();
$("#edit-amc-contracting-offices-wrapper").hide();
$("#edit-medcom-contracting-offices-wrapper").hide();
$("#edit-mraa-contracting-offices-wrapper").hide();
$("#edit-peo-stri-contracting-offices-wrapper").hide();
$("#edit-smdc-contracting-offices-wrapper").hide();
$("#edit-ngb-contracting-offices-wrapper").hide();
}
if($("#edit-command").val() == "3"){
$("#edit-contracting-office-id-wrapper").hide();
$("#edit-ace-contracting-offices-wrapper").hide();
$("#edit-inscom-contracting-offices-wrapper").hide();
$("#edit-amc-contracting-offices-wrapper").show();
$("#edit-medcom-contracting-offices-wrapper").hide();
$("#edit-mraa-contracting-offices-wrapper").hide();
$("#edit-peo-stri-contracting-offices-wrapper").hide();
$("#edit-smdc-contracting-offices-wrapper").hide();
$("#edit-ngb-contracting-offices-wrapper").hide();
}
if($("#edit-command").val() == "4"){
$("#edit-contracting-office-id-wrapper").hide();
$("#edit-ace-contracting-offices-wrapper").hide();
$("#edit-inscom-contracting-offices-wrapper").hide();
$("#edit-amc-contracting-offices-wrapper").hide();
$("#edit-medcom-contracting-offices-wrapper").show();
$("#edit-mraa-contracting-offices-wrapper").hide();
$("#edit-peo-stri-contracting-offices-wrapper").hide();
$("#edit-smdc-contracting-offices-wrapper").hide();
$("#edit-ngb-contracting-offices-wrapper").hide();
}
if($("#edit-command").val() == "5"){
$("#edit-contracting-office-id-wrapper").hide();
$("#edit-ace-contracting-offices-wrapper").hide();
$("#edit-inscom-contracting-offices-wrapper").hide();
$("#edit-amc-contracting-offices-wrapper").hide();
$("#edit-medcom-contracting-offices-wrapper").hide();
$("#edit-mraa-contracting-offices-wrapper").show();
$("#edit-peo-stri-contracting-offices-wrapper").hide();
$("#edit-smdc-contracting-offices-wrapper").hide();
$("#edit-ngb-contracting-offices-wrapper").hide();
}
if($("#edit-command").val() == "6"){
$("#edit-contracting-office-id-wrapper").hide();
$("#edit-ace-contracting-offices-wrapper").hide();
$("#edit-inscom-contracting-offices-wrapper").hide();
$("#edit-amc-contracting-offices-wrapper").hide();
$("#edit-medcom-contracting-offices-wrapper").hide();
$("#edit-mraa-contracting-offices-wrapper").hide();
$("#edit-peo-stri-contracting-offices-wrapper").show();
$("#edit-smdc-contracting-offices-wrapper").hide();
$("#edit-ngb-contracting-offices-wrapper").hide();
}
if($("#edit-command").val() == "7"){
$("#edit-contracting-office-id-wrapper").hide();
$("#edit-ace-contracting-offices-wrapper").hide();
$("#edit-inscom-contracting-offices-wrapper").hide();
$("#edit-amc-contracting-offices-wrapper").hide();
$("#edit-medcom-contracting-offices-wrapper").hide();
$("#edit-mraa-contracting-offices-wrapper").hide();
$("#edit-peo-stri-contracting-offices-wrapper").hide();
$("#edit-smdc-contracting-offices-wrapper").show();
$("#edit-ngb-contracting-offices-wrapper").hide();
}
if($("#edit-command").val() == "8"){
$("#edit-contracting-office-id-wrapper").hide();
$("#edit-ace-contracting-offices-wrapper").hide();
$("#edit-inscom-contracting-offices-wrapper").hide();
$("#edit-amc-contracting-offices-wrapper").hide();
$("#edit-medcom-contracting-offices-wrapper").hide();
$("#edit-mraa-contracting-offices-wrapper").hide();
$("#edit-peo-stri-contracting-offices-wrapper").hide();
$("#edit-smdc-contracting-offices-wrapper").hide();
$("#edit-ngb-contracting-offices-wrapper").show();
}

})(jQuery);

- By the way, the view does not use Ajax, otherwise the jQuery wouldn't work.

- So, the jQuery works well as far a showing and hiding the given subcategories dropdown menus goes.

- However, I noticed a problem when the information/data is displayed after the filters render and the page reloads.

- I will try to explain myself as clear as possible, step by step, in the next example (please click on the links to the screenshots for visual reference):
1) I go to the page (view), both the main categories (Command) and the subcategories (Contracting Offices) dropdown menus show "- Any -", and all the information/data is shown at the bottom (http://sellingtoarmy.com/sites/default/files/1_filter_dependency_issue.jpg)
2) I click on the Command dropdown menu, select Army Corps of Engineers (http://sellingtoarmy.com/sites/default/files/2_filter_dependency_issue.jpg), the Contracting Offices dropdown menu changed to ACE Contracting Offices (http://sellingtoarmy.com/sites/default/files/3_filter_dependency_issue.jpg), and the information/data at the bottom has changed accordingly
3) I click on the Command dropdown menu, select another command, for example Army Materiel Command (http://sellingtoarmy.com/sites/default/files/3A_filter_dependency_issue.jpg), the Contracting Offices dropdown menu changed to AMC Contracting Offices (http://sellingtoarmy.com/sites/default/files/3B_filter_dependency_issue.jpg), and the information/data at the bottom changes accordingly. Again, I click on the Command dropdown menu, select another command, for example National Guard Bureau (http://sellingtoarmy.com/sites/default/files/3C_filter_dependency_issue.jpg), the Contracting Offices dropdown menu changed to NGB Contracting Offices (http://sellingtoarmy.com/sites/default/files/3D_filter_dependency_issue.jpg), and the information/data at the bottom changes accordingly. So far everything works well.
4) However, the problem happens when I select an option from Command and also an option from the Contracting Offices dropdown menu.
5) Let me give you next several examples.
6) I select Army Corps of Engineers under Command (http://sellingtoarmy.com/sites/default/files/3_filter_dependency_issue.jpg), then I select Army Geospatial Center under ACE Contracting Offices (http://sellingtoarmy.com/sites/default/files/4_filter_dependency_issue.jpg), the information/data at the bottom changes accordingly (http://sellingtoarmy.com/sites/default/files/5_filter_dependency_issue.jpg) and everything works and looks well.
7) Now, when I select, for example, "- Any -" under Command (http://sellingtoarmy.com/sites/default/files/6_filter_dependency_issue.jpg), the ACE Contracting Offices dropdown menu changes to Contracting Office Name, but the information at the bottom keeps displaying the Army Geospatial Center data from the previous selection (http://sellingtoarmy.com/sites/default/files/7_filter_dependency_issue.jpg).
8) Now, if I select again Army Corps of Engineers under Command (http://sellingtoarmy.com/sites/default/files/8_filter_dependency_issue.jpg), the Contracting Office Name dropdown menu changes to ACE Contracting Offices, but Army Geospatial Center remains selected, and the information at the bottom keeps displaying the Army Geospatial Center data (http://sellingtoarmy.com/sites/default/files/9_filter_dependency_issue.jpg).
9) Now, if I select again "- Any -" under Command (http://sellingtoarmy.com/sites/default/files/10_filter_dependency_issue.jpg), the ACE Contracting Offices dropdown menu changes to Contracting Office Name, but the information at the bottom still remains displaying the Army Geospatial Center data (http://sellingtoarmy.com/sites/default/files/11_filter_dependency_issue.jpg).
10) Now, if I change the Command back to Army Corps of Engineering (http://sellingtoarmy.com/sites/default/files/12_filter_dependency_issue.jpg), the Contracting Office Name dropdown menu changes back to ACE Contracting Offices, Army Geospatial Center remains selected, and the information at the bottom still displays the Army Geospatial Center data (http://sellingtoarmy.com/sites/default/files/13_filter_dependency_issue.jpg).
11) Now, say I select Cold Regions Research and Engineering Laboratory under ACE Contracting Offices (http://sellingtoarmy.com/sites/default/files/14_filter_dependency_issue.jpg), the information/data at the bottom changes accordingly, and everything seems to look and work well (http://sellingtoarmy.com/sites/default/files/15_filter_dependency_issue.jpg).
12) Now, if I select again "- Any -" under Command (http://sellingtoarmy.com/sites/default/files/16_filter_dependency_issue.jpg), the ACE Contracting Offices dropdown menu changes to Contracting Office Name, but the information at the bottom again doesn't render appropriately, as the Cold Regions Research and Engineering Laboratory data remains (http://sellingtoarmy.com/sites/default/files/17_filter_dependency_issue.jpg), just like in the previous example with Army Geospatial Center.
13) Now, if I select another Command, for example Army Materiel Command (http://sellingtoarmy.com/sites/default/files/18_filter_dependency_issue.jpg), the Contracting Office Name dropdown menu changes for AMC Contracting Offices, but the information/data at the bottom disappears completely (http://sellingtoarmy.com/sites/default/files/19_filter_dependency_issue.jpg), and if I change the contracting office (http://sellingtoarmy.com/sites/default/files/20_filter_dependency_issue.jpg), the problems remains (http://sellingtoarmy.com/sites/default/files/21_filter_dependency_issue.jpg), same thing if I change the command (http://sellingtoarmy.com/sites/default/files/22_filter_dependency_issue.jpg), the data still doesn't show (http://sellingtoarmy.com/sites/default/files/23_filter_dependency_issue.jpg).

What do I need to add to my jQuery code, so the filters work as needed and the data is displayed correctly?

In advance, thank you very much for your kind attention and prompt assistance!!

Comments

If I get it right you are

Stefan Lehmann commented 25 June 2015 at 03:29

If I get it right you are struggeling with the problem, that filters are still selected, although it doesn't make sense anymore. So why don't you deselect them?

For instance:

$("#edit-contracting-office-id-wrapper").val('All');

should set a selection in a dropdown to -Any-.

so in this case you have to implement the change event on the "Command" dropdown and just unselect all options in the "child" dropdowns ..

$("#edit-command").on('change', function(evt) {
  $("#edit-contracting-office-id-wrapper").val('All');
  $("#edit-ace-contracting-offices-wrapper").val('All');
  $("#edit-inscom-contracting-offices-wrapper").val('All');
  $("#edit-amc-contracting-offices-wrapper").val('All');
  $("#edit-medcom-contracting-offices-wrapper").val('All');
  $("#edit-mraa-contracting-offices-wrapper").val('All');
  $("#edit-peo-stri-contracting-offices-wrapper").val('All');
  $("#edit-smdc-contracting-offices-wrapper").val('All');
  $("#edit-ngb-contracting-offices-wrapper").val('All');
});

By the way you are repeating youself a lot in the code above, whilst it would be pretty easy to generate an array you could iterate over. For example if you want to add a new dropdown you will have to edit the code in 10 places.

A possibe datastructure could look like:

var filters = [
  { id:     "#edit-contracting-office-id-wrapper",
     show_if_value:     "All",
  },
  { id:     "#edit-ace-contracting-offices-wrapper",
     show_if_value:     "1",
  }
];

That would reduce the above to:

jQuery(document).ready(function ($) {

var filters = [
  { id:     "#edit-contracting-office-id-wrapper",
     show_if_value:     "All",
  },
  { id:     "#edit-ace-contracting-offices-wrapper",
     show_if_value:     "1",
  }
  // Add all the other here .. don't forget the commas!
];

$("#edit-command").on('change', function(evt) {
  // Get value
  var value = $(this).val();

  for (var i = 0; i < filters.length; i++) {
    // Unselect all previous selections
    $(filters[i].id).val('All');
    
    // Hide / show a dropdown if current value matches "show_if_value" of a dropdown item.
    if (value == $(filters[i].show_if_value) {
      $(filters[i].id).show();
    } else {
      $(filters[i].id).hide();
    }
  }
});

});

That's all untested and probably needs some debugging, but the general idea should become clear. :-)

I like cookies!

Hello Stefan, thank you very

ricardodrupal commented 25 June 2015 at 14:17

Hello Stefan, thank you very much for your kind and prompt feedback and assistance!! I will try your suggestions and let you know hoe it goes.

Hello Stefan, I am new to

ricardodrupal commented 1 July 2015 at 18:26

Hello Stephan, I am new to JQuery, JS, etc. Please tell me where in my code (above) should I add your code (next):

$("#edit-command").on('change', function(evt) {
$("#edit-contracting-office-id-wrapper").val('All');
$("#edit-ace-contracting-offices-wrapper").val('All');
$("#edit-inscom-contracting-offices-wrapper").val('All');
$("#edit-amc-contracting-offices-wrapper").val('All');
$("#edit-medcom-contracting-offices-wrapper").val('All');
$("#edit-mraa-contracting-offices-wrapper").val('All');
$("#edit-peo-stri-contracting-offices-wrapper").val('All');
$("#edit-smdc-contracting-offices-wrapper").val('All');
$("#edit-ngb-contracting-offices-wrapper").val('All');
});

I will try the "array" solution at a later time when I am more familiar with JS.

Thanks!

Hello Stephan, I am new to

ricardodrupal commented 1 July 2015 at 18:27

Hello Stephan, I am new to JQuery, JS, etc. Please tell me where in my code (above) should I add your code (next):

I will try the "array" solution at a later time when I am more familiar with JS.

Thanks!

I added some comments and

Stefan Lehmann commented 1 July 2015 at 21:36

I added some comments and made it a bit simpler, though uglier .. Might need some debugging, but I can't take that from you. :-)

Here a link to a better readable version of that code snippet.

jQuery(document).ready(function ($) {
    
	// Execute this once on page load ..
	setDependentFilters();
	
	// React on a change in the #edit-command drop down..
	$("#edit-command").on('change', function(evt) {
		$("#edit-contracting-office-id-wrapper").val('All');
		$("#edit-ace-contracting-offices-wrapper").val('All');
		$("#edit-inscom-contracting-offices-wrapper").val('All');
		$("#edit-amc-contracting-offices-wrapper").val('All');
		$("#edit-medcom-contracting-offices-wrapper").val('All');
		$("#edit-mraa-contracting-offices-wrapper").val('All');
		$("#edit-peo-stri-contracting-offices-wrapper").val('All');
		$("#edit-smdc-contracting-offices-wrapper").val('All');
		$("#edit-ngb-contracting-offices-wrapper").val('All');

		// Update dependent filters, every time the selection in #edit-command changes.
		setDependentFilters(); 
	});
  
	// Set the correct filters depending on the selected value in the #edit-command drop down
	function setDependentFilters() {
		if($("#edit-command").val() == "All"){
			$("#edit-contracting-office-id-wrapper").show();
			$("#edit-ace-contracting-offices-wrapper").hide();
			$("#edit-inscom-contracting-offices-wrapper").hide();
			$("#edit-amc-contracting-offices-wrapper").hide();
			$("#edit-medcom-contracting-offices-wrapper").hide();
			$("#edit-mraa-contracting-offices-wrapper").hide();
			$("#edit-peo-stri-contracting-offices-wrapper").hide();
			$("#edit-smdc-contracting-offices-wrapper").hide();
			$("#edit-ngb-contracting-offices-wrapper").hide();
			}
			if($("#edit-command").val() == "1"){
			$("#edit-contracting-office-id-wrapper").hide();
			$("#edit-ace-contracting-offices-wrapper").show();
			$("#edit-inscom-contracting-offices-wrapper").hide();
			$("#edit-amc-contracting-offices-wrapper").hide();
			$("#edit-medcom-contracting-offices-wrapper").hide();
			$("#edit-mraa-contracting-offices-wrapper").hide();
			$("#edit-peo-stri-contracting-offices-wrapper").hide();
			$("#edit-smdc-contracting-offices-wrapper").hide();
			$("#edit-ngb-contracting-offices-wrapper").hide();
			}
			if($("#edit-command").val() == "2"){
			$("#edit-contracting-office-id-wrapper").hide();
			$("#edit-ace-contracting-offices-wrapper").hide();
			$("#edit-inscom-contracting-offices-wrapper").show();
			$("#edit-amc-contracting-offices-wrapper").hide();
			$("#edit-medcom-contracting-offices-wrapper").hide();
			$("#edit-mraa-contracting-offices-wrapper").hide();
			$("#edit-peo-stri-contracting-offices-wrapper").hide();
			$("#edit-smdc-contracting-offices-wrapper").hide();
			$("#edit-ngb-contracting-offices-wrapper").hide();
			}
			if($("#edit-command").val() == "3"){
			$("#edit-contracting-office-id-wrapper").hide();
			$("#edit-ace-contracting-offices-wrapper").hide();
			$("#edit-inscom-contracting-offices-wrapper").hide();
			$("#edit-amc-contracting-offices-wrapper").show();
			$("#edit-medcom-contracting-offices-wrapper").hide();
			$("#edit-mraa-contracting-offices-wrapper").hide();
			$("#edit-peo-stri-contracting-offices-wrapper").hide();
			$("#edit-smdc-contracting-offices-wrapper").hide();
			$("#edit-ngb-contracting-offices-wrapper").hide();
			}
			if($("#edit-command").val() == "4"){
			$("#edit-contracting-office-id-wrapper").hide();
			$("#edit-ace-contracting-offices-wrapper").hide();
			$("#edit-inscom-contracting-offices-wrapper").hide();
			$("#edit-amc-contracting-offices-wrapper").hide();
			$("#edit-medcom-contracting-offices-wrapper").show();
			$("#edit-mraa-contracting-offices-wrapper").hide();
			$("#edit-peo-stri-contracting-offices-wrapper").hide();
			$("#edit-smdc-contracting-offices-wrapper").hide();
			$("#edit-ngb-contracting-offices-wrapper").hide();
			}
			if($("#edit-command").val() == "5"){
			$("#edit-contracting-office-id-wrapper").hide();
			$("#edit-ace-contracting-offices-wrapper").hide();
			$("#edit-inscom-contracting-offices-wrapper").hide();
			$("#edit-amc-contracting-offices-wrapper").hide();
			$("#edit-medcom-contracting-offices-wrapper").hide();
			$("#edit-mraa-contracting-offices-wrapper").show();
			$("#edit-peo-stri-contracting-offices-wrapper").hide();
			$("#edit-smdc-contracting-offices-wrapper").hide();
			$("#edit-ngb-contracting-offices-wrapper").hide();
			}
			if($("#edit-command").val() == "6"){
			$("#edit-contracting-office-id-wrapper").hide();
			$("#edit-ace-contracting-offices-wrapper").hide();
			$("#edit-inscom-contracting-offices-wrapper").hide();
			$("#edit-amc-contracting-offices-wrapper").hide();
			$("#edit-medcom-contracting-offices-wrapper").hide();
			$("#edit-mraa-contracting-offices-wrapper").hide();
			$("#edit-peo-stri-contracting-offices-wrapper").show();
			$("#edit-smdc-contracting-offices-wrapper").hide();
			$("#edit-ngb-contracting-offices-wrapper").hide();
			}
			if($("#edit-command").val() == "7"){
			$("#edit-contracting-office-id-wrapper").hide();
			$("#edit-ace-contracting-offices-wrapper").hide();
			$("#edit-inscom-contracting-offices-wrapper").hide();
			$("#edit-amc-contracting-offices-wrapper").hide();
			$("#edit-medcom-contracting-offices-wrapper").hide();
			$("#edit-mraa-contracting-offices-wrapper").hide();
			$("#edit-peo-stri-contracting-offices-wrapper").hide();
			$("#edit-smdc-contracting-offices-wrapper").show();
			$("#edit-ngb-contracting-offices-wrapper").hide();
			}
			if($("#edit-command").val() == "8"){
			$("#edit-contracting-office-id-wrapper").hide();
			$("#edit-ace-contracting-offices-wrapper").hide();
			$("#edit-inscom-contracting-offices-wrapper").hide();
			$("#edit-amc-contracting-offices-wrapper").hide();
			$("#edit-medcom-contracting-offices-wrapper").hide();
			$("#edit-mraa-contracting-offices-wrapper").hide();
			$("#edit-peo-stri-contracting-offices-wrapper").hide();
			$("#edit-smdc-contracting-offices-wrapper").hide();
			$("#edit-ngb-contracting-offices-wrapper").show();
		}
	}
});

I like cookies!