Forums › Forums › Search & Filter Pro › Form ignoring fields manipulated with jQuery
- This topic has 8 replies, 2 voices, and was last updated 6 years, 3 months ago by Trevor.
-
Anonymous(Private) August 22, 2018 at 8:44 pm #186243
Hello!
I have a form on the homepage of a site that is ignoring input from checkboxes. The markup of this form has been pretty heavily manipulated and massaged with some jQuery to make it match the visual design that was approved:
http://hilt.staging.wpengine.com/
If I try to filter for
event
under what content type and hit submit it redirects me to http://hilt.staging.wpengine.com/search/ with no parameters for search.Video: http://nikib.ro/wn/screenshots/screencast_2018-08-22_15-36-41.mp4
If I add a keyword and then select event – only the keyword parameter appears in the url:
video: http://nikib.ro/wn/screenshots/screencast_2018-08-22_15-37-43.mp4
So it appears that the jQuery manipulation of my fields interferes with filtering and searching.
For testing purposes I’ve embedded this form sans jQuery manipulation here: http://hilt.staging.wpengine.com/test-page-for-testing-home-search-form-unscathed-by-jquery/
When search with a keyword, or use the checkboxes on this page everything appears to work how it is supposed to:
Video: http://nikib.ro/wn/screenshots/screencast_2018-08-22_15-39-52.mp4
My javascript can be found here: https://gist.github.com/nikibrown/b8a326231cdc059780f663544ea51e26
(please excuse my inefficient and horrible javascript, just trying to make this work right now!)
My question is – what is it in my jquery that is causing these checkboxes not to register when searching?
Trevor(Private) August 23, 2018 at 8:01 am #186265The first thing to do, before we try anything else, is to see if your hosting (WP Engine) is the issue.
There is a setting to override a ‘feature’ of WP Engine hosting, that truncates long SQL queries (which ours are). Edit the site wp-config.php file and add this at the top, after line 1 (on a new line 2):
define(‘WPE_GOVERNOR’, false);
PLEASE DO NOT COPY code from the email you receive for this reply, as email systems sometimes alter the quote marks and encode some characters; instead copy it from the actual forum page.
(also see here for another related support note about this – https://support.searchandfilter.com/forums/topic/killed-query-errors-in-log/#post-64826)
Anonymous(Private) August 23, 2018 at 4:15 pm #186305Hi Trevor
I’ve added the code to my
wp-config.php
file on my staging site. Looks like the checkboxes are still not adding parameters to the URL from the homepage form. I’m inclined to think this is not the issue because the checkboxes on other forms (as mentioned above) are functioning correctly.Any thoughts on what to try next?
Thanks,
</n>
Trevor(Private) August 24, 2018 at 2:24 pm #186408Looking at that javascript, yes, that will be what is breaking it.
You have two separate code sets working here. One set changes (removes and adds) the DOM elements (and it is this that is breaking our functionality) and the other adds the tabs/options panels.
It is important to keep the HTML structure of the form, to which you can add CSS to alter the appearance and layout and add javascript to add functionality.
I do like the way you have done that to the form on the results (search) page.
V3 of our plugin will alow much greater flexibility in doing this, but I have no timescale for that as yet.
Anonymous(Private) August 24, 2018 at 2:32 pm #186410Hi Trevor – thanks for the reply.
So its not possible to achieve the tabbed layout (ignore js functionality right) with just CSS without drastically changing the HTML markup – I spent several DAYS trying this, which is why I had to resort to jQuery to reorder the HTML. What specifically about my jQuery is breaking things?
I’m guessing its this:
`
$thisTabContent.detach();
$(“.sf-tab-content-container”).append($thisTabContent);`
Is there any other way to alter the markup that this form outputs? Or could I alter my javascript in any way to not break this? I basically need the headers for the sections of the tabs to be separate from the tab content. If you look at any sort of tabbed interface this is how the markup is structured.
At this point I’m pretty frustrated/desperate to just launch this project as this is the very last thing that is holding up launch.
Trevor(Private) August 24, 2018 at 2:39 pm #186415In essence, yes, you are correct. It is the separation of the content from the tabs that causes the problem. From what you have, I can see what you want, but for now that is possible the way you are doing it. Instead, you need to completely insert (as new) your own tabs before those three fields, have no headers on the fields that make the panels, so that, without CSS and JS, the panels would sit vertically one after the other with no gap. Then use javascript to hide two of them (which two depends on which tab you click).
Trevor(Private) August 24, 2018 at 2:58 pm #186421Not entirely, but I think something like (optionally) not to use a form at all, but to have each field as (maybe) a shortcode to be inserted wherever you want on the page, as independent objects. Or something like that. So, you would create the layout you want and just drop the field shortcodes into the content areas.
-
AuthorPosts