[Resolved] Custom search filter not sticking.

[Author]

Posts

[ian-scottP]

I am trying to: create a custom filter field but the selection does not stick.

Link to a page where the issue can be seen:
hidden link

I expected to see: I made the date drop-down and I would like the selection to stick. The markup for the field is in the attached image.

Instead, I got: The filter works technically, but the selected state does not update. Shouldn't custom form fields get updated as well here?

[Shane]

Hi Ian,

Thank you for getting in touch.

I believe its because you are manually adding the filter using HTML code.

You do have the option to create the same filter with our generated shortcode if you remove this filter completely and re-add it and then set it to get the values manually entered. See Screenshot

As you can see i've manually entered my values and should function the same as your manually built filter.

Please try this and let me know if it helps.
Thanks,
Shane

[ian-scottP]

Yeah, I had tried something similar but I didn't have a dropdown option or manual value option like in your screenshot. See a grab attached of what I see.

Even when I manually define the shortcode, I could not get the manual values to behave. This field is a date and time and I need to narrow it down to sort by days, so I'm using the like comparison to the first five digits of the time stamp.

[Shane]

Hi Ian,

In this case it won't be possible to have the manual html get preselected still.

I believe because this is a date field then the normal html structure that will allow you to define the figures would be.

Not sure why a regular datepicker won't work in your case but there are some limitations here.

The best thing I can think of is to use some custom JS to set the value based on the URL parameter, however in your case you've disabled the url parameters from showing.

Thanks,
Shane

[ian-scottP]

Is there a way to show the URL parameter and still use your AJAX refresh? I get all the URL parameters when doing a manual submit but not with AJAX. Alternatively is there a way to add the custom HTML so the existing JS includes the changes like it does for the shortcode fields?

A date picker is very far from ideal for UX. I don't want to display the option to pick any date. I only want the user to pick from three specific days. The drop-down select I made works great with the exception of it staying selected when the form refreshes.

[Shane]

Hi Ian,

Yes it is possible. Its cause you might have the browser history management for AJAX disabled.

You can enable this by going to Toolset-> Settings -> Frontend and scrolling to the browser history management section.

"Alternatively is there a way to add the custom HTML so the existing JS includes the changes like it does for the shortcode fields?"

Actually i'm not sure however I noticed one difference between the normal field generated html and your field. Try changing the name of the field from "wpv-wpcf-sessiondate" to "wpcf-sessiondate".

This is the only difference I saw with your field name. It could be that the JS is referencing the field without wpv.

Please let me know if this helps.

Thanks,
Shane

[ian-scottP]

I've tried those suggestions but there is no impact.

I tried a few other tests with the shortcodes and it behaves like the needed JS is only deployed when using the shortcode. I just need my custom select to stick and update the URL, especially since pagination does not work with the custom filter applied. (it resets back to all)

I experimented with this shortcode instead of my custom markup:

 [wpv-control-postmeta field="wpcf-sessiondate" default_label="All"  type="select"  source="custom"  values="1573,15736,15737,15738" display_values="All,Wednesday,Thursday,Friday"  url_param="wpcf-sessiondate" ]

but views won't display the custom values since they are not 100% match to the time stamp. I'm using the "like" comparator... is there a way to force views to display all the values in the select filter? that might solve my issue.

[Shane]

Hi Ian,

Since you now have the URL parameters in the view you can use this code below.

var val = location.href.match(/[?&]wpcf-sessiondate=(.*?)[$&]/)[1];   // get params from URL
jQuery('select[name=wpcf-sessiondate]').val(val); 

In your view filter section. Open the JS editor and add the callback function for when the search has completed. Then add this code within the function that is added.

This should select the value once the search has been performed.

Thanks,
Shane

[ian-scottP]

I installed your code. I see some progress but it's not quite right. If I reload the page the field update to be correct, but without a reload, the AJAX does not update the field on its own.
hidden link

As I watch it load, it looks like the URL is updating after the field updates. Is there a way to get the URL to update first?

Or trigger your code to force the field to reload when the URL updates?

[Shane]

Hi Ian,

I've made some improvements to the code.

Just add the following to your js editor, no need to add it to a callback function as I've added a JS listener for the completed AJAX event.

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};

jQuery(document).bind("ajaxComplete", function(){
  var delayInMilliseconds = 700; 

setTimeout(function() {

   var val = getUrlParameter('wpcf-sessiondate');
   if(val){
    jQuery('select[name=wpcf-sessiondate]').val(val); 
   }
}, delayInMilliseconds);
  

 });

Please let me know if this helps.

Thanks,
Shane

[ian-scottP]

It works! At first, I put the new JS after the first one you gave me and it was only working intermittently. Reloading the page or too many page changes were causing the date select to reset. Taking out the first JS also didn't help. But putting the new code before the first JS made everything work like a charm.

Thanks!