Search Results for '.val'

[Dave Hall]

I had this issue. I couldn’t find a solution here, so I created a very hacky javascript workaround that seems to work fine. Sharing it here in case anyone has a similar need to have a yearly dropdown and the developers don’t build it in.

Here goes:

1) Just after the filters in the theme template (index.php in my case) I have this:

<li class=”moveme”>
<select id=”years” class=”sf-input-select”>
<option value=””>All Years</option>
<?php wp_get_archives( array(
‘format’ => ‘option’,
‘type’ => ‘yearly’
)); ?>
</select>

This creates a dropdown with all the years for which posts exist, with All Years added at the top.

2) On the back end of the S&F plugin I added a Post Date field, set to date range, and a submit button.

3) In my css stylesheet I hid the Post Date field and the submit button:

.sf-field-submit,
.sf-field-post_date,
#primary > .moveme {
display: none !important;
}

I’m also hiding the .moveme element when it first loads.

4) Using jQuery/javascript I move the dropdown into the S&F form (where it becomes visible) on page load. When an option is selected, it populates the hidden Post Date fields with 1st Jan-31st Dec for the chosen year and clicks ‘submit’. The years dropdown gets reset when the form is reset.

$(document).ready( function() {
$(‘.moveme’).insertBefore(‘li.sf-field-post_date’).removeClass(‘moveme’);

$(‘#years’).change(function() {
var selectedValue = $(this).val();
if (selectedValue == ” ) {
$(‘.sf-datepicker’).val(”);
} else {
$(‘.sf-datepicker’).eq(0).val( ’01/01/’ + selectedValue.substr(selectedValue.length-5, 4 ));
$(‘.sf-datepicker’).eq(1).val( ’31/12/’ + selectedValue.substr(selectedValue.length-5, 4 ));
$(‘.searchandfilter .sf-field-submit input’).click();
}
});

$(‘.search-filter-reset’).click(function() {
$(‘#years’).val(”);
});
});

NB. You’ll have to switch the order of 31/12 if you’re using American dates.

Obviously this is sub-optimal, but hey, it works.

Add New Note to this Reply

[Trevor]

That is not something I could do. You may need to seek some third party help with that, but here are some snippets using the JavaScript val() function in our forum:

https://support.searchandfilter.com/forums/search/.val/

Add New Note to this Reply

[Ross]

Hi Nathan

That’s odd indeed… I tested on our demo site, and it works fine.

So I thought, maybe your theme is doing something different with the input field / js events… so I tried to “blur” the field before submitting, and it seems to work?

jQuery( '#search-filter-form-15 .sf-field-search input[type="text"]' ).val("test");
jQuery( '#search-filter-form-15 .sf-field-search input[type="text"]' ).blur();
jQuery( '#search-filter-form-15' ).submit();

Thanks

Add New Note to this Reply

[Trevor]

The original code may need to be:

$("#button").on("click", function(){
   $(".sf-input-text").val("Desired Search Term").change();
});

I am not sure if you would then need to submit, so try it without at first.

Add New Note to this Reply

[Nathan Holmes]

Hi,

I’m wanting to have my S&F form submit when the input value changes via javascript.

For example:

$("#button").on("click", function(){
   $(".sf-input-text").val("Desired Search Term");
});

When the value is changed via javascript, nothing happens. The input has to be manually typed. Is there a way to trigger the submit event after the value is changed? I tried using .trigger(“input) with no luck.

Thanks

Add New Note to this Reply

[Friends For Friends]

@Trevor I have fixed it works with auto “Enable Auto Count” and without it.

Code:

(() => {
    const setIcons = (state) => {
        if (!state.id) {
            return state.text;
        }

        const taxononyName = state.element.value.toLowerCase();
        const taxonomyText = state.text;

        const item = <code><span><i class=&quot;tax-icon tax-icon--${taxononyName}&quot;></i> ${taxonomyText}</span></code>;

        let options = $(item);
        return options;
    };

    const onSelect2Init = () => {
        $('select.sf-input-select').select2({
            templateResult: setIcons,
            minimumResultsForSearch: -1
        });
    };

    $(document).on('sf:init', '.searchandfilter', function () {
        onSelect2Init();
    });

    $(document).on('sf:ajaxfinish', '.searchandfilter', function () {
        onSelect2Init();
    });
})();

Feel free to share this with people who need it.

Regards,
Nino

Add New Note to this Reply

[Friends For Friends]

@Trevir fixed it with Javascript:

Maybe handy to add to the documentation? You can apply class or image icon before the SELECT input option.

(() => {
    const setIcons = (state) => {
        if (!state.id) {
            return state.text;
        }

        const taxononyName = state.element.value.toLowerCase();
        const taxonomyText = state.text;

        const item = <code><span><i class=&quot;tax-icon tax-icon--${taxononyName}&quot;></i> ${taxonomyText}</span></code>;

        let options = $(item);
        return options;
    };

    jQuery(document).ready(function ($) {
        $('select.sf-input-select').select2({
            templateResult: setIcons,
            minimumResultsForSearch: -1
        });
    });
})();

Cheers.

Add New Note to this Reply

[Gino Whitaker]

I cannot figure out how to get the author dropdown to list them by last name.

I have a dropdown that does that in another part of our site using this script:

function authors_dropdown()
{
// Exclusion list. This could be passed as parameter to this function.
$excluded = array( ’14’, ’54’ );

// Get authors to list.
add_filter( ‘authorship/user/roles’, ‘filter_user_role’ );
$authors = molongui_get_authors( ‘users’, array(), $excluded, array(), array(), ‘asc’, ‘last_name’ );
remove_filter( ‘authorship/user/roles’, ‘filter_user_role’ );

?>

<select name=”author-dropdown” id=”author-dropdown–1″ class=”select-css” onchange=”javascript: this.value && (location.href = this.value);”>
<option value=””><?php echo esc_attr( __( ‘MEET OUR CONTRIBUTORS’ ) ); ?></option>
<?php foreach( $authors as $author ) : ?>
<?php $class = new Molongui\Authorship\Includes\Author( $author[‘id’], $author[‘type’] ); ?>
<option value=”<?php echo $class->get_url(); ?>” data-author-id=”<?php echo $author[‘id’]; ?>” data-author-type=”<?php echo $author[‘type’]; ?>”><?php echo $author[‘name’]; ?></option>
<?php endforeach; ?>
</select>

<?php
}

How can I get the Search & Filter Pro dropdown to behave the same way?

Add New Note to this Reply

[KM]

Hi Trevor,

Thanks for your response.

I tried above approach but it isn’t triggering code after ajax refresh.

Basically there are 2 drop down, and I want ‘continue’ button to be disabled unless user selects a valid value in both of the dropdowns.

As soon as user selects first dropdown, page is refreshed and button is active.

Here’s the code that I am adding in page header. Please let me know if I am missing anything obvious. Thanks

<script type="text/javascript">
jQuery(document).ready(function( $ ){
	jQuery("input[value='Continue']").css('background-color','#eee').prop('disabled',true);
});

jQuery(document).on("sf.ajaxformfinish",".searchandfilter",function(){
    "use strict";
	alert('form is changed');
	jQuery('.searchandfilter .sf-field-post-meta-year').on('change', function() {
       a =  jQuery('.sf-field-post-meta-year option:checked').val();
       console.info(a);
       console.info(b);
      if((typeof a === "undefined") || (typeof b === "undefined") || (a.length == 0) || (b.length == 0)){ 
        console.info('disabled');
     	jQuery("input[value='Continue']").css('background-color','#eee').prop('disabled',true);	
      }
      else{
        console.info('enabled');
        jQuery("input[value='Continue']").css('background-color','#F96714').prop('disabled', false);
      }
    });
  
  	jQuery('.searchandfilter .sf-field-tag').on('change', function() {
       b = jQuery('.sf-field-tag option:checked').val();
       console.info(a);
       console.info(b);
      if((typeof a === "undefined") || (typeof b === "undefined") || (a.length == 0) || (b.length == 0)){ 
        console.info('disabled');
     	jQuery("input[value='Continue']").css('background-color','#eee').prop('disabled',true);	
      }
      else{
        console.info('enabled');
        jQuery("input[value='Continue']").css('background-color','#F96714').prop('disabled', false);
      }
    });
  });
});</script>

Add New Note to this Reply

[Ross]

Hi there

We don’t really have a fully fledged JS API at the moment, just a few hooks to get into.

So, to get the effect you want I would:

1) disable auto submit (we’re going to implement this manually)
2) detect clicks on both fields that you have
3) submit after the clicks, and perform an action when vintage is selected

//I assume you are using a select field, change this for your field
$(document).on('change','.searchandfilter .my-vintage-field select', function(){
   $('.searchandfilter .my-brand-field select').val(''); //unset the value
   $('.searchandfilter').submit(); // submit the form, this will trigger ajax if its setup
});

$(document).on('change','.searchandfilter .my-brand-field select', function(){
   $('.searchandfilter').submit(); // submit the form / behave like auto submit
});

Of course, change .my-vintage-field select and .my-brand-field select to whatever the real CSS selector is to target your input fields…

I hope that helps.

Thanks

Add New Note to this Reply