Form ignoring fields manipulated with jQuery

Niki Brown

#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://nikib.ro/wn/screenshots/_Harvard_Initiative_for_Learning_and_Teaching_HILT_2018-08-22_15-31-04.jpg

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?

Add New Note to this Reply

Trevor Moderator

#186265

The 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)

Add New Note to this Reply

Niki Brown

#186305

Hi 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>

Add New Note to this Reply

Trevor Moderator

#186325

This reply has been marked as private.

Add New Note to this Reply

Trevor Moderator

#186408

Looking 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.

Add New Note to this Reply

Niki Brown

#186410

Hi 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.

Add New Note to this Reply

Trevor Moderator

#186415

In 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).

Add New Note to this Reply

Niki Brown

#186417

Hi Trevor – thanks for the quick reply. Will take another look at my Javascript and the order in which I’m doing things.

Any idea how control over markup will work in the next version?

Add New Note to this Reply

Trevor Moderator

#186421

Not 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.

Add New Note to this Reply

[Author]

Posts