Losing CSS after Ajax reload

Anonymous

#251182

Hi,

I bought the plugin yesterday and noticed that the CSS is lost when any of filters are clicked. However when I hit refresh on the browser, the CSS comes back. I checked the CSS, the Style2 tags go missing, and they come back when browser is refreshed. This happens on every filter click irrespective of whether it is a Radio Checkbox or Combo.
Could you help me to understand what could be causing this.

My setup is as follows:
Woocommerce
Grid modification plugin – None
Location – localhost
Filter defined using Taxonomies
Load results using Ajax? – Checked
Make searches bookmarkable – Checked
Use only Ajax on the results page – Unchecked (Tried also with Checked)
Load JavaScript & CSS files – Checked
Lazy Load JavaScript – Unchecked
Combobox Script – Select2
Load jQuery UI i18n files – Unchecked
Auto submit form – Checked
Enabled Auto Count – Checked
Update the Search Form on user interaction – Checked
Also I rewrote the WordPress Default Search form using this script from the Support Forum
function sandf_change_search_url_rewrite() {
if ( is_search() && ! empty( $_GET[‘s’] ) ) {
wp_redirect( home_url( “products/?_sf_s=” ) . urlencode( get_query_var( ‘s’ ) ) );
exit();
}
}
add_action( ‘template_redirect’, ‘sandf_change_search_url_rewrite’ );

Anonymous

#251187

Edit – I checked the CSS, the Select2 tags go missing, and they come back when browser is refreshed

Trevor

#251225

Are you able to send me a live link/URL to your search page so I can take a look?

Anonymous

#251241

This reply has been marked as private.

Trevor

#251296

I suspect that those tags are not being added by our plugin, but instead are being added by one of these:

1. Your theme
2. Another plugin
3. Code you have added

But, the tags are added at document ready, but the JavaScript that does this does not recognize that our Ajax has fired. The JavaScript that adds the tags needs to be run again at that point, like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    // call your script or function here
  });
}(jQuery));</script>

Anonymous

#251376

This didn’t work. I’ve added the script as you suggested in the function.php of my child theme. Any other suggestion?

function enqueue_select2_jquery() {
wp_register_style( ‘select2css’, ‘//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.css’, false, ‘1.0’, ‘all’ );
wp_register_script( ‘select2’, ‘//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.js’, array( ‘jquery’ ), ‘1.0’, true );
wp_enqueue_style( ‘select2css’ );
wp_enqueue_script( ‘select2’ );
}
add_action( ‘admin_enqueue_scripts’, ‘enqueue_select2_jquery’ );

?>
<script>(function ( $ ) {
“use strict”;
$(document).on(“sf:ajaxfinish”, “.searchandfilter”, function(){
// call your script or function here
$(‘.option-tree-ui-select’).select2();
});
}(jQuery));</script>

<?php

any other suggestion? Not just

Anonymous

#251380

Not just the Select2 classes are missing but entire spans too.

See this code Before Ajax run and after Ajax run.
https://ibb.co/K2MPSkj
https://ibb.co/GkpXZjz

Trevor

#251583

Are you trying to add Select2 on the dropdowns? Such as described here:

https://support.searchandfilter.com/forums/topic/css-dropdown-option-active-hover/#post-249903

[Author]

Posts