UIKit Style is not loading after submit on Yootheme Pro

libyanspider

#241191

Hello,

I have installed Search and Filter and it works great with Yootheme Pro site builder, we manage to style it using UIKit https://getuikit.com/docs/form as Yootheme Pro based on UIKit front-end framework.

But the issue is when we submit the form the style disappears, check here to check-in action [link redacted] you need to select the filter and click on the button to see what I mean.

I had a chat with Yootheme team and here is what they told me. https://a.cl.ly/E0ubzAZe

Kindly help me fix this issue.

Best regards,
Hadi

Add New Note to this Reply

Trevor Moderator

#241239

Let us assume that there is a function loaded by the UI Kit on document ready using JavaScript/jQuery. The style it adds would be removed by an Ajax refresh of the results section of the page, so the UI Kit function would need to be loaded again after our Ajax has finished. We have a trigger you can use to do this, but where I have shown a comment in the code snippet, you will need the author of UI Kit to help you replace that line with their code:

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

Add New Note to this Reply

libyanspider

#241277

Thank you, Trevor, that we did is this:
SCRIPT

jQuery(document).ready(function () {
            jQuery('.sf-input-select').addClass('uk-select uk-form-width-medium uk-form-large');
            jQuery('.sf-input-text').addClass('uk-input uk-form-width-medium uk-form-large');
            jQuery('.search-filter-reset').addClass('uk-button uk-button-danger uk-button-large');
        })

CSS

.searchandfilter ul li {displa:inline!important;}
.searchandfilter ul li {
    display:inline!important;
    }
.sf-input-text, .sf-input-select, .search-filter-reset {
    margin: 10px;
}

I tried what you told me but didn’t work, assume I am missing something.

Add New Note to this Reply

Trevor Moderator

#241281

So, your new, additional script to add to the page would be:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    jQuery('.sf-input-select').addClass('uk-select uk-form-width-medium uk-form-large');
    jQuery('.sf-input-text').addClass('uk-input uk-form-width-medium uk-form-large');
    jQuery('.search-filter-reset').addClass('uk-button uk-button-danger uk-button-large');  });
}(jQuery));</script>

Is that what you did?

Add New Note to this Reply

libyanspider

#241291

This reply has been marked as private.

Add New Note to this Reply

libyanspider

#241293

I noticed something, this style doesn’t load now. but it loads once it is submitted, it is like the opposite.

Add New Note to this Reply

Trevor Moderator

#241299

You have both the old and new code in place I trust?

Add New Note to this Reply

libyanspider

#241302

No at first I remove the old code, replace it with your code, then I tried to put back the old one as well. but didn’t work.

Add New Note to this Reply

Trevor Moderator

#241306

Both are needed, but you cannot combine them, as one relates to document ready, and the other does not. They must be entirely separate.

Add New Note to this Reply

libyanspider

#241308

It worked now, I guess it was my mistake, I had to remove the <script> tag, I guess no need in the Customs Code area.

Add New Note to this Reply

[Author]

Posts