JS to remove a div if a condition is met.

Jon Imms
Jon Imms used Ask the Experts™
on
Hi There,

I'm having a little problem with a JS snippet I have on my website, which blocks a search of California.
We don't currently hire in California and have no listings, but we have a sticky job that comes up whatever state or location is entered.
I got the below snippet code, which if you type in ('ca', 'cal', 'cali', 'california', 'california ', 'los angeles', 'san fransisco', 'san diego', '90210', ) it will block the ability to select a freight type, and thus shows no listings, plus an alert.  

This is great for that part,  but if you search for something in say new york, it will bring listings up as intended, but say you then try to enter California again, it will give you the alert, but will also load the sticky job.  

How could i modify the code, so if listings are already there, and you try to search for California jobs, the listing hide?  I was thinking something like the ul.job_listings div is set to display none if it matches criteria, and then display if not California.

Hope this makes sense.  ...  Basically want ZERO jobs to show if you enter California, or CA, or Los Angeles.  ie post 19672 to not appear for California searches.

Website - Job Search.
		<script>
			$(function() {
			$('body').on('blur', '#search_location', function() {
				var excluded_cities = ['ca', 'cal', 'cali', 'california', 'california ', 'los angeles', 'san fransisco', 'san diego', '90210',  ];
					if ($.inArray($(this).val().toLowerCase(), excluded_cities) != -1) {
						alert("we currently have no listings in the state of California.");
							$('#job_type_dry-van').attr('disabled', 'disabled');
							$('#job_type_refrigerated').attr('disabled', 'disabled');
							$('#job_type_flat-bed').attr('disabled', 'disabled');

    				}else{
							$('#job_type_dry-van').removeAttr('disabled', 'disabled');
							$('#job_type_refrigerated').removeAttr('disabled', 'disabled');
							$('#job_type_flat-bed').removeAttr('disabled', 'disabled');

    					}
  					});
				});
		</script>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
I'm sure this is not the best solution to go with, and I believe that the check should be set in the server-side when you're selecting your data, or at least prevent the "/get_listings" query from being sent to your server when you detect one of the listed locations.

To answer your question, yes, as you've said if you want to just hide the returned data in the case of one of the filtered locations from your array you could use the display rule for it like:

if ($.inArray($(this).val().toLowerCase(), excluded_cities) != -1) {
      alert("we currently have no listings in the state of California.");
      
      $('#job_type_dry-van, #job_type_refrigerated, #job_type_flat-bed').attr('disabled', 'disabled');
      $('ul.job_listings,.load_more_jobs, .showing_jobs').hide();
} else {
      $('#job_type_dry-van, #job_type_refrigerated, #job_type_flat-bed').removeAttr('disabled', 'disabled');
      $('ul.job_listings,.load_more_jobs, .showing_jobs').show();
}

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Don't use attr - use prop().
Have you tried unchecking the checkboxes when you disable them like this
$('#job_type_dry-van').prop({disabled: true, checked: false});
$('#job_type_refrigerated').prop({disabled: true, checked: false});
$('#job_type_flat-bed').prop({disabled: true, checked: false});

Open in new window

Jon ImmsWeb Developer

Author

Commented:
This worked!!! just what I was after, thank you, Julian.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.
Jon ImmsWeb Developer

Author

Commented:
just do the solution is up here,  This is what is working now.

		<script>
			$(function() {
			$('body').on('blur', '#search_location', function() {
				var excluded_cities = ['ca', 'cal', 'cali', 'california', 'california ', 'los angeles', 'san fransisco', 'san diego', '90210',  ];
					if ($.inArray($(this).val().toLowerCase(), excluded_cities) != -1) {
						alert("we currently have no listings in the state of California.");
							$('#job_type_dry-van').prop({disabled: true, checked: false});
                                                        $('#job_type_refrigerated').prop({disabled: true, checked: false});
                                                        $('#job_type_flat-bed').prop({disabled: true, checked: false});

    				}else{
							$('#job_type_dry-van').prop({disabled: false, checked: false});
                                                        $('#job_type_refrigerated').prop({disabled: false, checked: false});
                                                        $('#job_type_flat-bed').prop({disabled: false, checked: false});

    					}
  					});
				})

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial