Hide Userlisting until search is performed

You might want to hide the All Userlisting Template until a search is performed. This can be achieved using custom code.
This functionality works with the Search all fields option: {{{extra_search_all_fields}}} and also with the Faceted Menus: {{{faceted_menus}}} option.

First, go to Profile Builder -> Userlisting and go to the User listing you want to behave that way, then in the All Userlisting Template, before any of the content, add this snippet of code:

<script type="text/javascript">
jQuery('.wppb-userlisting-container').on('wppbFacetSetGetCompleted', '.wppb-faceted-list', function (url, param) {
    jQuery('.wppb-table, #wppb-ul-theme-glimplist .wppb-ul-container').show();
    jQuery('#wppb-ul-theme-boxomo .wppb-ul-container, #wppb-ul-theme-vergrid .wppb-ul-container').css('display', 'flex');
    jQuery('#userlisting_pagination').css('display', 'flex');
});
</script>

Example:

The next step is to add some code that will hide the Userlisting table until a search is performed.
You can download the following add-on in order to do this:

After downloading, go to your Dashboard -> Plugins -> Add New to install and activate it.

You can also choose to manually add the code inside the functions.php file from your child theme:

add_action('wp_footer', 'wppbc_hide_userlisting_if_no_parameters');
function wppbc_hide_userlisting_if_no_parameters() {
    global $wppb_userlisting_shortcode;

	if ( $wppb_userlisting_shortcode && !isset( $_REQUEST['searchFor'] ) ) {
		$display = false;

		foreach ( $_REQUEST as $k => $v ) {

			if ( strpos( $k, 'ul_filter') !== false )
				$display = true;
		}

		if ( !$display )
			echo '<style>.wppb-table, .wppb-ul-container, .userlisting_pagination { display: none; }</style>';
	}
}

Now it should work as described, go to your Userlisting page in the front end and check it out.

This is an example of how it works:

If you have questions or need help with this, please contact support.

Profile Builder Pro

Create beautiful front-end registration and profile forms with custom fields. Setup member directories, custom redirects, cutomize user emails & more using the all in one user management plugin.

Get Profile Builder