siguy

Hey thanks Bukajec! I haven’t gotten around to playing with the code yet but I knew it would be something pretty much as simple as that. You added those lines as the first thing that happens when you hit submit yes?

Now I/we just have to sort out the multiple matches issue.

Bukajec, your question got me thinking and testing some more and I have just found that if for example you have Manager, Assistant Manager, Regional Manager positions and you search for Manager, all 3 positions will show up in the results. Clearly my little script is not perfect but I will keep refining it and posting my results here for you all to benefit from it.

I had that working at an earlier revision but the latest version only works if you are narrowing your search. This is something that I would like to have the script do so I will look into it. I don’t think it will be too difficult to do. Probably just a matter of resetting the match classes each time you click the search button.

Here is the code I tried to put in my post:

https://pastebin.com/Ku2iNMEJ

You will probably want to change your value attributes. They are what is used for the search. Here is one of my <select>’s for example:

<select class="location" multiple="" size="8" name="location">
  <option value="all" selected>- Any -</option>
  <option value="Burnaby">Burnaby</option>
  <option value="Coquitlam">Coquitlam</option>
  <option value="Langley">Langley</option>
  <option value="Pitt Meadows">Pitt Meadows</option>
  <option value="Richmond">Richmond</option>
  <option value="Surrey">Surrey</option>
  <option value="Vancouver">Vancouver</option>
</select>

using value=”all” for the Any option will also make it so that the reset page button will select “Any” in each <option>.

Hi Alicia,

The first thing I see is you are missing a ) at the end of your site.js file. (the last line should look like this:

});

It also looks like your job-table(s) is/are set up much differently than mine which might be a bit of a problem. Here is the code that I have in the “Job List Template” field in job manager settings -> display settings:

[Code moderated as per the Forum Rules. Please use the pastebin]

The important part is class="[job_field0_label]" which I have added so that the jquery script in site.js knows which td to look for content in.

You might be alright with using one table per job if you make those 2 changes. Try it out and see how it goes.

The other thing I would suggest is using firefox and getting (and learning all you can about) firebug. I use it all the time to figure out why complex pages and/or scripts don’t work. It was essential in the development of this search script.

Let me know if you have any more questions and I’ll do whatever I can to help out.

No luck yet benjazz. Still waiting on some helpful soul to give me a hand.

Ack, that doesn’t work: https://eccotique.com/careers/listings/registered-massage-therapist-2/

Any chance on getting some more insight into the problem?

Thank you Gary! I will add a copy of my job listing page template and call it job.php and let you know how it goes!

Is there anybody here who can help me with this? I’m still kind of stuck. The only work around I’ve figured out is to change the default template of my site and then change all of the other pages on my site to the (previous) default template.

It’s a really nasty sounding hack that I would prefer not to have to do for something seemingly so simple.

HELP!! (please)

bloginfo('stylesheet_directory') is pointing to the directory that contains the style.css that wordpress is currently using.

If you poke around in my job listing page: https://eccotique.com/careers/listings/ you will see that it is the actual page with the table of jobs in it, but I used css to hide it initially:
.job-table { display: none;}

once the user clicks the submit button, the table is shown:

$('.job-table').show('fast');

then the value of the 2 <select> elements is checked and the table is shown with the requested results. Basically if either of the <select> elements don’t have “-all-” selected we go through the list of selected items and search the correct column for the selected items (I’ve added a class to help me discern the correct column to look at: <td class=”Position”> and <td class=”Location”>) if one of the selected words is found we add a new class “match” to the <td> containing the word and at the end of the loop all of the elements without a class of “match” have their row hidden:
$('.jobrow').children('td.Position').not('.match').parent().hide('fast');

The reset button basically hides the table, unhides any table rows and removes all of the “match” classes, as well as setting the <select> elements back to their initial value of “-all-”

I don’t think it matters where in the functions.php file you put that. (as long as you don’t stuff it into the middle of another function of course) I just put mine at the end. You can add other things into the header inside of that function as well if you want/need.

Yes I created the site.js file and put it into the theme’s root folder: “wp-content/themes/thematic-child/site.js”

you can add any other js you want to run on every/any page into the site.js file as well.

I like to create a site.js file and add a link to it in the head section of my theme using the functions.php file. It may not be the most elegant (or correct) way to do things but it works for me like this:

(in your themes functions.php)

function childtheme_scripts() {?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory') ?>/site.js"></script>
<?php }
add_action('wp_head','childtheme_scripts');

the code in my previous post goes in a site.js file right in your theme directory.

I have a different solution that anybody interested in a search function might be interested in. It’s not really generic code, but it could be modified probably fairly easily to work for other setups.

https://eccotique.com/careers/listings/

Sorry the page probably loads really slow right now, there’s some kind of a performance problem I can’t seem to pinpoint just yet.

Basically I added the <select> elements to the “Before the Main Jobs List” box, along with the search jobs and reset buttons and used css to hide the job-table by default.

I then spent hours writing the jquery to search through the contents of the table for the selected items in the <select> elements. It also works with multiple selections which is nice.

Here’s the code:

$('.submit').click(function(){
	locationVals = $('.location').val();
	positionVals = $('.position').val();

	$('.job-table').show('fast');

	if (locationVals != "all")	{
		x = 0;
		$(locationVals).each(function() {
			loc = $('.location').val()[x];
			$('td.Location:contains('+loc+')').addClass('match');
			x++;
		});
		$('.jobrow').children('td.Location').not('.match').parent().hide('fast');
	}
	if (positionVals != "all") {
		y = 0;
		$(positionVals).each(function() {
			pos = $('.position').val()[y];
			$('td.Position:contains('+pos+')').addClass('match');
			y++;
		});
		$('.jobrow').children('td.Position').not('.match').parent().hide('fast');
	};
});

$('.resetpage').click(function(){
	$('.job-table').hide('fast');
	$('.location').val('all');
	$('.position').val('all');
	$('.jobrow').children('td').removeClass('match');
	$('.job-table').children('tbody').children('tr').each(function(){$(this).show()});
});

all of this goes into:

jQuery(function($) {
    put code in here
}

I can try and explain things a bit more thoroughly if anybody is interested.

As an alternative I have found a snippet of code that makes all posts of a certain wordpress category use a specific template, so if there is a way to automatically put a category on all jobs, that would work just as well.