Ultimate Member 2.1 - Add search & reset buttons in member directory

Ultimate Member 2.1 - Add search & reset buttons in member directory

<?php

add_action("um_members_directory_head","um_custom_members_directory_head",10, 1 );
function um_custom_members_directory_head( $args ) 
{
		?>
		<div class="um-search-submit" style="margin:auto;width:50%;"> 
			<div style="width: 40%;float:left;margin:10px;text-align:center;">
			     <a href="#" class="um-button um-do-search" ><?php _e("Search","ultimate-member"); ?></a>
            </div>
            <div style="width: 40%;float:left;margin:10px;text-align:center;">
				<a href="javascript:;" class="um-button um-alt um-clear-filters-a"><?php _e("Reset","ultimate-member"); ?></a>
			</div>
		</div>
    <?php

}

Pressing "Reset" doesn't clear the search box, so it just refreshes the directory with the same results. Should it not clear that as well as the filters?

I added added a bit to the code to make it clear the search field as well. Not sure if this is the best way to do it:

/Edit: Added a line to remove the search query from the URL too :)

<?php

add_action("um_members_directory_head", "um_custom_members_directory_head", 10, 1);
function um_custom_members_directory_head($args)
{
	 ?>
	
	<script type="text/javascript">
		function searchClear() {
			var elements = [] ;
			elements = document.getElementsByClassName("um-search-line");

			for(var i=0; i<elements.length ; i++){
				elements[i].value = "" ;
			}
			
			window.location.href = window.location.href.split('?')[0];		
		} 
	</script>

	<div class="um-search-submit" style="margin:auto;width:50%;"> 
		<div style="width: 40%;float:left;margin:10px;text-align:center;">
			<a href="#" class="um-button um-do-search" ><?php _e("Search", "ultimate-member"); ?></a>
		</div>
		<div style="width: 40%;float:left;margin:10px;text-align:center;">
			<a href="javascript:;" onclick="searchClear()" class="um-button um-alt um-clear-filters-a"><?php _e("Reset", "ultimate-member"); ?></a>
		</div>
	</div>

	<?php
}

@champsupertramp, any feedback on this?

Hi Everyone,

I'll be sharing some Ultimate Member customizations & tutorials on my website: www.champ.ninja

Subscribe to my newsletter to get the latest tutorials.

Regards,

Hi Everyone,

I'll be sharing some Ultimate Member customizations & tutorials on my website: www.champ.ninja

Subscribe to my newsletter to get the latest tutorials.

Regards,

Doesn't really answer the question, so I assume you are going to cover this on your website?

Hi @hirenshah,

You can try this to clear the filters:
jQuery(".um-directory .um-clear-filters-a").trigger("click");

Also, thanks for letting me know about the Contact form issue on my website! I already have contents ready. Just getting enough subscribers to receive the newsletter when i published the tutorials/tips.

Regards,

You can try this to clear the filters:
jQuery(".um-directory .um-clear-filters-a").trigger("click");

There isn't much point in even trying that lol :p

As per my first comment, triggering clicks on a button that doesn't actually work properly isn't going to help in anyway.

You need to clear the search bar and filters, and remove their references from the URL. If you do not do that, using the pagination or refreshing the page just restores whatever was cleared.

My revised version has been working perfectly for me, so please review that and correct yours accordingly :)

Hi @hirenshah, It should clear the URL parameters and fields without reloading the page. It's like you're clicking the "x" clear all filters button. Please see how it works. It's a single line of code.

Regards,

jQuery(".um-directory .um-clear-filters-a").trigger("click"); only clears the filters. I think the reset button should clear the search bar text, too. That little X that appears in the search input is really easy for users to miss.