Search Results for '.val'

[Anonymous]

before my loop start I’m define some empty arrray. then when loop start, using array push method i added value on those array.

https://prnt.sc/rysvwt
https://prnt.sc/ryswfe

by using this array i run some javascript.

https://prnt.sc/rysx71

now what heppened when i filter the array will not update. so my script stop working after filter.even though i add this

https://prnt.sc/rysy07

how to solve this problem?

<?php
/* 
   Template Name: Broker list
*/

get_header(); ?>

<?php do_action( 'ocean_before_content_wrap' ); ?>

<div id="content-wrap" class="container clr">

    <?php do_action( 'ocean_before_primary' ); ?>

    <div id="primary" class="content-area clr">

        <?php do_action( 'ocean_before_content' ); ?>

        <div id="content" class="site-content clr">

            <?php do_action( 'ocean_before_content_inner' ); ?>

            <!--start my coding-->
            <?php 
				$ourCurrentPage = get_query_var('paged');
                $args = array(  
               'post_type' => 'broker',
               'post_status' => 'publish',
               'posts_per_page' => 8,
               'paged' => $ourCurrentPage
                );
                $args['search_filter_id'] = 756;
                $the_query = new WP_Query( $args ); ?>
            <?php echo do_shortcode('[elementor-template id="655"]'); ?>
            <div class="main-container">
                <span class="flot-filter"><i class="fas fa-sliders-h"></i></span>
                <div class="filter-wrap">
                    <div class="filter">
                    <span class="close"><i class="far fa-times-circle"></i></span>
                    <p>Filters</p>
                    <?php echo do_shortcode('[searchandfilter id="756"]'); ?>
                </div>
                </div>
                <div class="sections">
                    <?php
                    $items = Array();
                    $item = Array();
                    $posts = Array(); 
                    if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

                    <?php 
                           $cash_back_heading = get_field("cash_back_heading");
                           $profile_image = get_field("profile_image");
                           $website_link = get_field('website_link');
                           $count=0;
                           $counttwo=0;
                           $countthree=0;
                         ?>
                    <?php array_push( $posts, get_the_ID() ) ?>
                    
                    
                    <?php array_push( $items, strtolower(preg_replace('/\s+/', '_', get_the_title("",false))) ) ?>
                    <?php array_push( $item, strtolower(preg_replace('/\s+/', '', get_the_title("",false))) ) ?>
                    <div class="intro">
                        <div class="flex-container">
                            <div class="flex-q-1">
                                <img />' alt="" />
                            </div>
                            <div class="flex-q-3">
                                <h4><?php echo the_title(); ?> <span> >> </span> <a>" class="details-button" target="_blank">Details</a></h4>
                                <div class="flex">
                                    <div class='flex-full s<?php echo get_the_ID();?>'>
                                        <?php if( have_rows('table') ): ?>
                                        <?php while ( have_rows('table') ) : the_row(); ?>
                                        <?php if( have_rows('column') ): ?>
                                        <?php while ( have_rows('column') ) : the_row(); ?>
                                        <?php if( have_rows('table_data') ): ?>
                                        <ul class="ac">
                                            <?php while ( have_rows('table_data') ) : the_row();$counttwo++ ?>
                                            <?php if( $counttwo == 1): ?>
                                            <li class='items <?php echo strtolower(preg_replace('/\s+/', '_', get_the_title("",false))); ?>'><?php the_sub_field('table_cell'); ?></li>
                                            <?php else: ?>
                                            <li class='item <?php echo strtolower(preg_replace('/\s+/', '', get_the_title("",false))); ?>'><?php the_sub_field('table_cell'); ?></li>
                                            <?php endif; ?>
                                            <?php endwhile; ?>
                                        </ul>
                                        <?php endif; ?>
                                        <?php break;  ?>
                                        <?php endwhile; ?>
                                        <?php endif; ?>
                                        <?php endwhile; ?>
                                        <?php endif; ?>
                                        <?php if( have_rows('table') ): ?>
                                        <ul class="main-flex">
                                            <?php while ( have_rows('table') ) : the_row(); ?>
                                            <?php if( have_rows('column') ): ?>
                                            <?php while ( have_rows('column') ) : the_row(); ?>
                                            <li class="main-flex-child">
                                                <?php if( have_rows('table_data') ): ?>
                                                <?php $count++; ?>
                                                <?php if($count == 2): ?>
                                                <ul class='normal active'>
                                                    <?php else: ?>
                                                    <ul class='normal'>
                                                        <?php endif; ?>
                                                        <?php while ( have_rows('table_data') ) : the_row();?>
                                                        <?php if( !$countthree): ?>
                                                        <li class='items <?php echo strtolower(preg_replace('/\s+/', '_', get_the_title("",false))); ?>'><?php the_sub_field('table_cell'); ?></li>
                                                        <?php $dropdowns[] = get_sub_field('table_cell'); ?>
                                                        <?php else: ?>
                                                        <li class='item <?php echo strtolower(preg_replace('/\s+/', '', get_the_title("",false))); ?>'><?php the_sub_field('table_cell'); ?></li>
                                                        <?php endif; ?>
                                                        <?php  $countthree++ ?>
                                                        <?php endwhile;  ?>
                                                        <?php  $countthree=0 ?>
                                                    </ul>
                                                    <?php endif; ?>
                                            </li>
                                            <?php endwhile; ?>
                                            <?php endif; ?>
                                            <?php endwhile; ?>
                                        </ul>
                                        <?php endif; ?>
                                    </div>
                                    <p class="sh">more</p>
                                </div>
                            </div>
                            <div class="flex-q-1 last">
                                <div class='payment <?php echo get_the_ID();?>'>
                                    <h4>Payment Options</h4>
                                    <?php if( have_rows('payment_options') ): ?>
                                    <ul>
                                        <?php while ( have_rows('payment_options') ) : the_row(); ?>
                                        <li><img src="https://moneybackfx.com/wp-content/uploads/2020/04/check-mark.png" alt="" /><?php the_sub_field('payment'); ?></li>
                                        <?php endwhile; ?>
                                    </ul>
                                    <?php endif; ?>
                                    <button id="send" class="send">Get CashBack</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <?php $dropdowns!=null?$dropdown[]=$dropdowns:null ?>
                    <?php $dropdowns = Array() ?>
                    
                    <?php endwhile; ?>

                    <div class="pagination">
                        <h2><?php echo paginate_links(array(
                    'total' => $the_query->max_num_pages
                    ));
                    ?></h2>
                    </div>

                    <?php else : ?>
                    <div class="not-found">
                        <p><?php  _e( 'Sorry, no brokers matched your criteria.'); ?></p>
                    </div>
                    <?php endif; ?>

                    <?php wp_reset_postdata(); ?>
                </div>
            </div>
            <?php echo do_shortcode('[elementor-template id="658"]'); ?>
            <?php echo do_shortcode('[elementor-template id="661"]'); ?>
            <!--end of my coding-->
            <style>
                select,
                select:focus {
                    font-size: 16px
                }

                body {
                    color: #333
                }

                h1,
                h2,
                h3,
                h4 {
                    font-family: Poppins, Sans-serif;
                    margin-bottom: 10px
                }

                p {
                    font-family: Montserrat, Sans-serif;
                    font-weight: 500;
                    line-height: 1.8em
                }

                .sh {
                    text-align: center;
                    font-size: 11px;
                    border-bottom: 1px dotted #24eaa4;
                    color: #24eaa4;
                    margin: 0px auto;
                    cursor: pointer;
                    font-weight:700;
                }

                .main-container {
                    background: #f7f7f7;
                    padding: 20px 15px
                }

                .intro {
                    background: #fff;
                    padding: 30px 20px;
                    box-shadow: 2px 4px 15px rgba(0, 0, 0, .1);
                    border-radius: 5px;
                    margin-bottom: 15px
                }

                .intro .flex-q-1 img {
                    max-width: 50%;
                    border-radius: 3px;
                }

                .intro .flex-q-1,
                .intro .flex-q-3 {
                    text-align: center
                }

                .intro .flex-q-3 h4 {
                    margin: 15px 0;
                    font-size: 15px;
                }

                .payment h4 {
                    margin: 10px 0 7px;
                    font-size: 15px;
                }

                .intro .flex-q-3 h4 span,
                .intro .flex-q-3 h4 a {
                    font-size: 13px;
                    font-weight: 400;
                }

                .intro .flex-q-3 h4 a {
                    border-bottom: 1px dotted #8482d6;
                }

                .payment ul {
                    list-style: none;
                    margin: 0 0 10px 0;
                }

                .payment ul li img {
                    display: inline;
                }

                .send {
                    font-weight: 600 !important;
                    border-radius: 31px 31px 31px 31px;
                    box-shadow: 4px 4px 10px 0 rgba(36, 234, 164, .38);
                    padding: 5px 30px 5px 30px;
                    border: none
                }

                .send:hover {
                    background: #24eaa4
                }

                .intro .main-flex {
                    list-style: none;
                    margin: 0
                }

                .intro .main-flex ul,
                .intro ul.ac {
                    list-style: none;
                    margin: 0
                }

                .intro .main-flex .main-flex-child {
                    flex-grow: 1;
                }

                .intro .main-flex ul li,
                .intro ul.ac li {
                    padding: 5px;
                    border: 1px solid #eee;
                    font-weight: 500;
                    font-size: 13px;
                    font-family: Montserrat, Sans-serif;
                }

                .payment ul li {
                    font-weight: 500;
                    font-size: 12px;
                    font-family: Montserrat, Sans-serif;
                }

                .intro .main-flex ul li:first-child,
                .intro ul.ac li:first-child {
                    color: #8482d6;
                    font-family: Poppins, Sans-serif;
                    background: rgba(132, 130, 214, .32);
                    font-weight: 500;
                    font-size: 13px;
                }

                .intro .flex-full {
                    display: flex;
                    flex-wrap: wrap;
                    width: 100%;
                }

                .intro .flex-full .ac,
                .intro .flex-full .main-flex {
                    flex-grow: 1;
                    max-width: 50%
                }

                .intro .flex-full .main-flex-child ul {
                    display: none
                }

                .intro .flex-full .main-flex-child ul.active {
                    display: block
                }

                .mob {
                    display: none
                }

                .intro .flex {
                    display: flex;
                    flex-wrap: wrap
                }

                .center-h.h {
                    margin-top: 20px
                }
                .paym{
                    order:1;
                }
                .paym p{
                    font-weight:bold;
                    margin:0 0 10px;
                }
                .payment{
                    display:flex;
                    flex-direction:column;
                }
                .payment .send{
                    order:2;
                }
                .paym p span{
                    position:relative;
                    display:inline-block;
                    border-radius:100%;
                    background:#333;
                    color:#fff;
                    width:18px;
                    height:18px;
                    line-height:18px;
                    font-size:11px;
                }
                .paym ul{
                    position:absolute;
                    list-style:none;
                    margin:0px;
                    padding:15px;
                    border-radius:5px;
                    box-shadow:2px 4px 10px rgba(0,0,0,.17);
                    display:inline;
                    background:#fff;
                    text-align:left;
                    display:none;
                    bottom:41px;
                    left:50%;
                    transform:translatex(-50%);
                    width:300px;
                    transition:.2s;
                    color:#333;
                }
                .payment .paym ul,.payment > ul{
                    display:none;
                }
                .paym p span:hover ul{
                    display:block;
                    bottom:38px;
                }
                /************************************search and filter**************************************/
                .filter-wrap{
                    overflow:hidden;
                    position:fixed;
                    z-index:3;
                    width:0%;
                    transition: 0.2s;
                    top:0;
                    left:0;
                    background:rgba(0, 0, 0, .11);
                }
                .filter{
                    background:#fff;
                    box-shadow: 2px 4px 15px rgba(0, 0, 0, .75);
                    border-radius: 5px;
                    margin-bottom:15px;
                    margin-top:85px;

                }
                .filter-wrap.open{
                    padding:0px 15px;
                    width:100%;
                    height:100%;
                }
                .filter .close{
                     float:right;
                     cursor:pointer;
                     font-size:25px;
                     color:#606060;
                     margin-top:0px;
                     margin-right:10px;
                 }
                .filter p{
                    background:#ebebeb;
                    color:#606060;
                    padding:10px;
                    margin-bottom:0;
                    border-radius:5px 5px 0 0;
                }
                .filter #search-filter-form-756{
                    padding:15px;
                }
                #search-filter-form-756 ul{
                    display:flex;
                    flex-wrap:wrap;
                    margin:0px;
                }
                #search-filter-form-756 ul li{
                    width:100%;
                }
                #search-filter-form-756 ul li input,#search-filter-form-756 ul li label{
                    display:block;
                }
                  ::-webkit-input-placeholder { /* Edge */
                  font-family: "Montserrat", Sans-serif;
                  font-size: 13px;
                }
                
                :-ms-input-placeholder { /* Internet Explorer 10-11 */
                  font-family: "Montserrat", Sans-serif;
                  font-size: 13px;
                }
                
                ::placeholder {
                  font-family: "Montserrat", Sans-serif;
                  font-size: 13px;
                }
                select:focus,select,input,option{
                  font-size: 13px;
                  font-family: "Montserrat", Sans-serif;
                  border-radius:5px;
                }
                form input[type="text"], form input[type="password"],
                form input[type="email"], form input[type="url"],
                form input[type="date"], form input[type="month"],
                form input[type="time"], form input[type="datetime"],
                form input[type="datetime-local"], form input[type="week"],
                form input[type="number"], form input[type="search"],
                form input[type="tel"], form input[type="color"],
                form select, form textarea{
                    min-height:30px;
                    line-height:30px;
                    font-size:13px;
                    padding:0px 12px;
                }
                .flot-filter{
                    text-align:center;
                    display:inline-block;
                    background:#121126;
                    border-radius:100%;
                    box-shadow: 4px 4px 10px 0px rgba(36, 234, 164, 0.38);
                    overflow:hidden;
                    position:fixed;
                    top:85px;
                    left:15px;
                    cursor:pointer;
                    width: 50px;
                    height: 50px;
                    border-radius: 100%;
                    z-index:2;
                }
                .flot-filter i{
                    color:#24eaa4;
                    font-size: 28px;
                    line-height: 50px;
                }
                /**************************pagination*******************************/
                .pagination{
                    margin:auto;
                    text-align:center;
                }
                .pagination h2{
                    font-weight:500;
                    font-size:15px;
                    padding:7px;
                    background:#fff;
                    box-shadow: 2px 4px 15px rgba(0, 0, 0, .1);
                    display:inline-block;
                    
                }
                .page-numbers{
                    padding:3px;
                    margin:0px 2px;
                    width:31px;
                    display:inline-block;
                }
                .page-numbers.current{
                    background:#24eaa4;
                    border-radius:2px;
                    color:#fff;
                }
                .next,.prev{
                    width:initial;
                }
                @media(min-width:768px) {
                    .flot-filter{
                        display:none;
                    }
                    .intro .flex-q-3 h2 {
                        margin-top: 0
                    }
                    .filter-wrap{
                        position:initial;
                        background:none;
                        width:100%;
                    }
                    .filter{
                        margin-top:0px;
                        box-shadow: 2px 4px 15px rgba(0, 0, 0, .1);
                    }
                    .close{
                        display:none;
                    }
                    #search-filter-form-756 ul li:nth-child(n+2) {
                        width:48%;
                    }
                    #search-filter-form-756 ul{
                        justify-content:space-around;
                    }
                }

                @media(min-width:992px) {
                    .payment > ul{
                        display:block;
                    }
                    .payment .paym{
                        display:none;
                    }
                    .intro .flex-container {
                        display: flex
                    }

                    .intro .flex-q-1 {
                        max-width: 15%;
                        width: 15%
                    }

                    .intro .flex-q-1 img {
                        display: block;
                        max-width: 90%
                    }

                    .intro .flex-q-1 ul li img {
                        display: inline;
                    }

                    .intro .flex-q-3 {
                        text-align: left;
                        align-self: center;
                        width: 65%
                    }

                    .intro .flex-q-1.last {
                        max-width: 20%;
                        width: 20%;
                        align-self: center;
                    }

                    .mob {
                        display: block
                    }

                    .desk {
                        display: none
                    }

                    .intro .flex {
                        display: flex;
                        justify-content: space-between;
                        flex-basis: 1
                    }

                    select[name="Platform"],
                    .ac {
                        display: none
                    }

                    .intro .flex-full .main-flex-child ul {
                        display: initial
                    }

                    .intro .main-flex {
                        display: flex
                    }

                    .intro .flex-full .ac,
                    .intro .flex-full .main-flex {
                        max-width: initial
                    }

                    .intro .main-flex .main-flex-child {
                        max-width: 40%;
                    }

                    .payment {
                        margin-left: 15px;
                    }

                    .td {
                        display: none;
                    }
                    .filter-wrap{
                        max-width: 1100px;
                        margin: auto;
                    }
                    #search-filter-form-756 ul li:nth-child(n+2) {
                        width:30%;
                    }
                    
                    .sf-field-sort_order{
                        margin-left:-10px !important;
                    }
                }

                @media(min-width:1200px) {
                    .sections {
                        max-width: 1100px;
                        margin: auto
                    }

                    .intro .flex-full {
                        overflow-x: initial
                    }

                    .intro- {
                        padding-left: 2%;
                        padding-right: 2%
                    }
                    #search-filter-form-756 ul li:nth-child(n+2) {
                        width:15%;
                    }
                }
            </style>

            <script>
                <?php 
            $js_pid = json_encode($posts);
            $js_dropdown = json_encode($dropdown);
            $js_items = json_encode($items);
            $js_item = json_encode($item);
            echo "var pID = ". $js_pid . ";\n";
            echo "var dropDown = ". $js_dropdown . ";\n";
            echo "var items = ". $js_items . ";\n";
            echo "var item = ". $js_item . ";\n";
            ?>
                for (t = 0; t < dropDown.length; t++) {
                    var select = jQuery('<select>').prop('name', 'Platform')
                        .prop('class', 'Plat');
                    for (k = 1; k < dropDown[t].length; k++) {
                        select.append(jQuery("<option>")
                            .prop('value', dropDown[t][k])
                            .text(dropDown[t][k]));
                    }
                    jQuery('.flex-full:eq(' + [t] + ')').prepend(select);
                }
                jQuery('.normal').each(function() {
                    var k = jQuery(this).children('.items:first-child').html().toLowerCase().replace(/[\])}[{(]/g, '').replace(/ /g, "_");
                    jQuery(this).addClass(k);
                });
                jQuery('.Plat').change(function() {
                    var o = jQuery(this).children("option:selected").val().toLowerCase().replace(/[\])}[{(]/g, '').replace(/ /g, "_");
                    var q = o.replace(/ /g, "_");
                    jQuery('.' + q).addClass('active').parents('.main-flex-child').siblings().children('.normal').removeClass('active')
                });
                for (i = 0; i < pID.length; i++) {
                    var v = jQuery('.payment.' + pID[i] + ' ul li').length;
                    var l = '<div class="paym"><p><span>' + v + '</span></p></div>';
                    jQuery('.payment.' + pID[i]).append(l);
                }
                jQuery('.paym').each(function(){
                    var xt = jQuery(this).closest('.payment').find('ul').html();
                   jQuery(this).find('p span').append('<ul>'+xt+'</ul>'); 
                });
                jQuery('.flot-filter').click(function(){
                    jQuery('.filter-wrap').addClass('open');
                });
                jQuery('.close').click(function(){
                    jQuery('.filter-wrap').removeClass('open');
                });
            </script>

            <script>
                function equalHeights(className) {
                    var findClass = document.getElementsByClassName(className);
                    var tallest = 0;
                    for (i = 0; i < findClass.length; i++) {
                        var ele = findClass[i];
                        var eleHeight = ele.offsetHeight;
                        tallest = (eleHeight > tallest ? eleHeight : tallest); 
                    }
                    for (i = 0; i < findClass.length; i++) {
                        findClass[i].style.height = tallest + "px";
                    }
                }
                for (p = 0; p < items.length; p++) {
                    equalHeights(items[p]);
                    equalHeights(item[p]);
                }
                function sH(){
                    jQuery('ul.ac').each(function() {
                        jQuery('li:gt(2)', this).hide()
                    });
                    jQuery('ul.normal').each(function() {
                        jQuery('li:gt(2)', this).hide();
                        var tx = jQuery('li', this).length;
                        if (tx <= 3) {
                            jQuery(this).closest('.flex').find('.sh').hide();
                        }
                    });
    
                    jQuery('.sh').on('click', function(e) {
                        e.preventDefault();
                        var ql = jQuery(this).closest('.flex').find('ul.normal');
                        jQuery(this).closest('.flex').find('ul.ac li:gt(2)').slideToggle();
                        ql.each(function() {
                            jQuery('li:gt(2)', this).slideToggle();
                        });
                    });
                }
                sH();
               (function($) {
                    "use strict";
                    jQuery(document).on("sf:ajaxfinish", ".searchandfilter", function() {
                        for (t = 0; t < dropDown.length; t++) {
                            var select = jQuery('<select>').prop('name', 'Platform')
                                .prop('class', 'Plat');
                            for (k = 1; k < dropDown[t].length; k++) {
                                select.append(jQuery("<option>")
                                    .prop('value', dropDown[t][k])
                                    .text(dropDown[t][k]));
                            }
                            jQuery('.flex-full:eq(' + [t] + ')').prepend(select);
                        }
                        jQuery('.normal').each(function() {
                            var k = jQuery(this).children('.items:first-child').html().toLowerCase().replace(/[\])}[{(]/g, '').replace(/ /g, "_");
                            jQuery(this).addClass(k);
                        });
                        jQuery('.Plat').change(function() {
                            var o = jQuery(this).children("option:selected").val().toLowerCase().replace(/[\])}[{(]/g, '').replace(/ /g, "_");
                            var q = o.replace(/ /g, "_");
                            jQuery('.' + q).addClass('active').parents('.main-flex-child').siblings().children('.normal').removeClass('active')
                        });
                        for (i = 0; i < pID.length; i++) {
                            var v = jQuery('.payment.' + pID[i] + ' ul li').length;
                            var l = '<div class="paym"><p><span>' + v + '</span></p></div>';
                            jQuery('.payment.' + pID[i]).append(l);
                        }
                        jQuery('.paym').each(function(){
                            var xt = jQuery(this).closest('.payment').find('ul').html();
                           jQuery(this).find('p span').append('<ul>'+xt+'</ul>'); 
                        });
                        sH();
                        for (p = 0; p < items.length; p++) {
                            equalHeights(items[p]);
                            equalHeights(item[p]);
                            equalHeights('instatorex_markets');
                            equalHeights('instatorexmarkets');
                            equalHeights('axitrader_markets');
                            equalHeights('axitradermarkets');
                            
                        }
                    });
                }(jQuery));
            </script>
            <?php do_action( 'ocean_after_content_inner' ); ?>

        </div><!-- #content -->

        <?php do_action( 'ocean_after_content' ); ?>

    </div><!-- #primary -->

    <?php do_action( 'ocean_after_primary' ); ?>

</div><!-- #content-wrap -->

<?php do_action( 'ocean_after_content_wrap' ); ?>

<?php get_footer(); ?>

[Ross]

Hi David

Try this:

(function ($) {
	
	var searchForm;
	
	// this is what I'm clicking, in my test, I took over the navigation of a dev site
	// but this can be your area/department
	$('#top-menu-nav a').click(function(e){
		
		e.stopPropagation();
		e.preventDefault();
		console.log("clicked nav");
		
		// so first reset the form - passing false, means the results are not updated
		searchForm.resetForm(false);
		
		// the value to set for department you will want to get from your click event 
		var desiredValue = 'culpa-illo';
		
		// then assign the correct value to the field we want to change, in my case
		// its a tag field (which is a select/dropdown field) - selects are easier to work with
		$('.searchandfilter .sf-field-tag select').val(desiredValue);
		
		//now submit the form to update the results and search form
		$('.searchandfilter').submit();
		
	});
	
	$(document).on("sf:init", ".searchandfilter", function(e, data){
        searchForm = data.object;
		console.log("S&F init", searchForm);
	});
	
})(jQuery);

Basically, I just intercepted a click on my navigation (on some dev site) to simulate what you were doing, and then I went through the steps to setup the form.

If you want to use my code, you’ll need to do the following:

1) Change the department field to be a dropdown/select – easier than dealing with a radio button
2) replace .sf-field-tag with the class thats applied to your field (inspect the frontend markup to find it)
3) put the value of the department into desiredValue so the select is set properly

Let me know how you get on 🙂

[Anonymous]

Thanks Trevor, always a pleasure 🙂
For folks with a similar issue, what I learned is that the “include” function specifies which taxonomy terms will be added to a select list, but it does NOT pre-select any term, so the default is still “all categories.” Trevor provided a jQuery snippet which I was able to modify, which sets the select option of the age field to the value I want on that page. My version is roughly:

<script>
jQuery( document ).ready(function(){
 var age = 'senior';
  jQuery('select[name="_sft_ages[]"').val(age);
});
</script>

And I just modify the age variable depending on which age group’s page flow I’m on. So far it’s returning the results I want, and I can see the correct age group passed in the URL.
Thanks again Trevor!
–Carina

[Ross]

Hi Brian

Its not possible yet.

There is a workaround you can do though.

Inside your results area (the area you defined as your Ajax Container), you can add a hidden input:

<input type="hidden" name="number-of-posts" value="<?php echo $query->found_posts; ?>" id="number-of-posts" />

(Depending on your display method, $query might have a different variable name such as $wp_query)

Then, in your JS sf:ajaxfinish event, you can grab the value like:

var noPosts = $('#number-of-posts').val();

Let me know how you get on.

Thanks

[Anonymous]

I want the follow code be executed after the filter is changed.
but i dont get anny responce from the ajax call

$(document).on(“sf:ajaxformfinish”, “.searchandfilter”, function(){
alert(“ajax stop”);
if ( $(‘.sf-field-post-meta-soort option’).val() == “Eengezinswoning” ) {
$(‘.woningoverzicht .appartement’).hide();
}
if ( $(‘.sf-field-post-meta-soort option’).val() == “Appartement” ) {
$(‘.woningoverzicht .eengezinswoning’).hide();
}
});

Also tryed it with ajaComplete, ajaxformfinish, ajaxfinish

but my alert wont even trigger.

[Trevor]

It will be the last-child of the containing field. Here is one I made a while ago:

.sf-field-post-meta-transportation_dummy_start_date > ul > li:last-child {
  display: none;
}

And the javascript I used (your need may vary, for example the date format):

<script type="text/javascript">
jQuery( document ).ready(function($){
  jQuery('li:last-child input[name="_sfm_transportation_dummy_start_date[]"]').val('31/12/2050');
});
</script>

[Anonymous]

Thank you for yourt answer.
I changed the max-execution-time on the server, I disabled Wordfence, I still get the error.
Here are the settings in php.ini file :
safe_mode=false;
upload_max_filesize=67108864;
post_max_size=67108864;
memory_limit=268435456;
max_execution_time = 500;
extension_dir=/usr/lib/php7.0/extensions;
zend_extension=/usr/lib/php7.0/extensions/opcache.so;
opcache.enable=1;
opcache.memory_consumption=32;
opcache.interned_strings_buffer=8;
opcache.max_accelerated_files=3000;
opcache.revalidate_freq=180;
opcache.fast_shutdown=0;
opcache.enable_cli=0;
opcache.revalidate_path=0;
opcache.validate_timestamps=2;
opcache.max_file_size=0;
opcache.file_cache=/kunden/homepages/4/d706785064/htdocs/.opcache;
opcache.file_cache_only=1;

Is there something I have to modify?

[Anonymous]

Search & Filter module does not work.
TypeError: Cannot read property ‘replace’ of undefined
at t.value (builder-bundle.min.js?ver=1.0.0:1)
at Ac (react-dom.production.min.js?ver=16.7.0:147)
at xc (react-dom.production.min.js?ver=16.7.0:139)
at ha (react-dom.production.min.js?ver=16.7.0:138)
at Md (react-dom.production.min.js?ver=16.7.0:136)
at Da (react-dom.production.min.js?ver=16.7.0:134)
at pg (react-dom.production.min.js?ver=16.7.0:151)
at Sd (react-dom.production.min.js?ver=16.7.0:151)
at cb.render (react-dom.production.min.js?ver=16.7.0:202)
at react-dom.production.min.js?ver=16.7.0:155

[Anonymous]

I inherited this site from another developer and do not usually work in wordpress or php.

2 scenarios:

#1: Infinite scroll container is specified: results will quickly load (as many as I specify per page,) it will hit the infinite scroll trigger at the bottom, trigger loading icon, and then nothing more comes back.

#2: No infinite scroll container is specified: Infinite scroll will load all results at the normal rate per page ie) 7 results per page, but the trigger happens at almost every scroll, even when I’m scrolling toward the top of the page. I think it may be a problem with how the containers are specified and maybe a naming conflict. I’ve tried many different values for offset but it doesn’t seem to make a difference. I saw others requesting a ‘load more results’ button and wondered if that was possible yet?

I’m also open to trying it with pagination, but when I try to implement, it seems like its trying to do some string parsing with the url which initially does not have a query string so I get cannot read property split() of undefined . thanks so much for your insight!

Here are the two files this is happening in:

<?php
/**
 * The template used for displaying page content for the Big Green Database
 *
 * @package red_underscores
 */

// Determine which resource page this is

$page_id = get_the_ID();
$page_name = '';

if ( $page_id == 12614) {
    $page_name = 'garden'; // Your Edible School Garden (cat = garden-skills-resources)
    $lessons_id = 12612;
    $sf_form_id = 14035;
}
if ( $page_id == 12612 ) {
    $page_name = 'lessons'; // Garden Lessons + Curriculum (cat = curriculum-lessons-activities)
    $garden_id = 12614;
    $sf_form_id = 14036;
}

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <?php 

    $featured = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
    $overlay_background = "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0))";

    ?>

    <div class="featured main" style="background: <?php echo $overlay_background ?>, url('<?php echo $featured[0] ?>'); min-height: 720px;">
        <div class="grid-container featured-content">
            <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
        </div>
    </div><!-- featured -->

    <div class="grid-container">
        <div class="entry-content grid-60 prefix-20 tablet-grid-90 tablet-prefix-5">
            <?php the_content(); ?>
        </div><!-- .entry-content -->
    </div>

            
    <?php // Toggle between pages ?>

    <div class="grid-container">

    <?php

    ?>
    </div>
    
    <?php 
    // Display at most three highlighted resources from this main category
    $main_resource_category = '';
    switch ($page_name) {
        case 'lessons':
            $main_resource_category = 'curriculum-lessons-activities';
            break;
        case 'garden':
            $main_resource_category = 'garden-skills-resources';
            break;
    }

    $args = array(
        'post_type' => 'resource',
        'posts_per_page' => 3,
        'tax_query' => array(
            array(
                'taxonomy' => 'resource-category',
                'field' => 'slug',
                'terms' => $main_resource_category
            )
        ),
       
    );

        // Display remaining results (not highlighted) via search & filter

    ?>

    <div class="sf-results-container">
      
        <div class="grid-container">
            <?php echo do_shortcode( '[searchandfilter id="'.$sf_form_id.'"]' ); ?>
        </div>

        <div class="dotted-border"></div>

        <div class="grid-container grid-of-posts resources">

            <div class="grid-33 push-66 sf-pop-sidebar">
                <h3>Popular Collections:</h3>
                <div class="dotted-border"></div>
                <div id="popular-collections-remote-control"></div>
            </div>

            <div class="grid-66 pull-33 two-col-results search-filter-results-list">
                <?php echo do_shortcode( '[searchandfilter id="'.$sf_form_id.'" show="results"]' ); ?>
            </div>
            <div class="pagination">
        Found <?php echo $query->found_posts; ?> Results<br />
        Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />
        <?php wp_pagenavi(); ?>
        <?php
            /* example code for using the wp_pagenavi plugin */
            if (function_exists('wp_pagenavi'))
            {
                echo "<br />";
                wp_pagenavi( array( 'query' => $query ) );
            } 
        ?>
    </div>
          </div>

        </div>

    </div>

    <script>

    (function($) {
        // Load again after ajax to work after filtering results
        $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
            // Place search and filter boxes within grid
            $("li.sf-field-post-meta-resource_subjects, li.sf-field-taxonomy-grade-level, li.sf-field-search, li.sf-field-taxonomy-resource-category, li.sf-field-post-meta-content_source, li.sf-field-post-meta-grade_level_range, li.sf-field-submit").addClass('grid-33 tablet-grid-50 mobile-grid-100');
        });
        $(document).ready(function() {

            // Get list of labels and inputs in .sf-field-post-meta-popular_collection_tag
            
            var labels = $('.sf-field-post-meta-popular_collection').find('label');
            var inputs = $('.sf-field-post-meta-popular_collection').find('input');
            
            // Append them to the #popular-collections-remote-control div
            for ( var i = 0; i < labels.length; i++ ) {

                var selectedClass = '';

                // Apply selected class to anything that's selected on load
                if(inputs[i].checked) {
                    selectedClass = 'selected';
                }

                $('#popular-collections-remote-control')
                    .append( '<div class="target '+ selectedClass +'" id="' + inputs[i].value + '">' + labels[ i ].innerHTML + '</div><div class="dotted-border"></div>');
            }

            // Set up remote control clicks
            $('#popular-collections-remote-control .target').click(function() {
                var targetValue = $(this).attr('id');
                $(this).toggleClass('selected');
                $(':checkbox[value=' + targetValue + ']').trigger('click');
            });

            // Place search and filter boxes within grid
            $("li.sf-field-post-meta-resource_subjects, li.sf-field-taxonomy-grade-level, li.sf-field-search, li.sf-field-taxonomy-resource-category, li.sf-field-post-meta-content_source, li.sf-field-post-meta-grade_level_range, li.sf-field-submit").addClass('grid-33 tablet-grid-50 mobile-grid-100');
        });
    })(jQuery);

    </script>

	<footer class="entry-footer">
		<?php //edit_post_link( esc_html__( 'Edit', 'red_underscores' ), '<span class="edit-link">', '</span>' ); ?>
	</footer><!-- .entry-footer -->
</article><!-- #post-## -->

<?php
/**
 * Search & Filter Pro 
 *
 * Template for Filter Resources - Garden
 *
 */

if ( $query->have_posts() )
{
    ?>
    <?php
        while ($query->have_posts())
        {
            $query->the_post();

            ?>
            <div class="search-filter-result-item grid-50 tablet-grid-50 mobile-grid-100">
            <?php
            
            get_template_part( 'template-parts/content', 'resource_overview' );
        
            ?></div><?php
        }
    ?>
<?php
}
else
{
    ?>
    <div class='search-filter-results-list end-of-results' data-search-filter-action='infinite-scroll-end'>
    <p>no more results</p>
    </div>
    <?php
}
?>

[Anonymous]

Thank you very much Ross for the very quick reply, I hope I didn’t urged you to much getting out of bed.
anyhow, it’s now working! I’ve modified my recent code and wrapped it with document.ready, made sure it’s on the footer, and VOILA, it’s alive!

here is a snippet for whoever want it:

jQuery(document).ready(function($){
	/****
	** Advanced Search screen: Update document and page title based on search term with Ajax
	****/
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		$svalue = $('input[name="_sf_search[]"]').val();
		if($svalue != ''){
			$svalue = 'Search Results for: ' + $svalue;
		}else{
			$svalue = "Advanced Search Results";
		}
		$('TITLE-SELECTOR').text( $svalue ); 
		 document.title = $svalue + " - MY-WEBSITE";
	});
});