[Plugin: The Events Calendar] Date picker not loading correctly – Duotive Fortune

Hey Gabriel. Thanks for the heads up here; interesting issue. While we can’t guarantee the plugin will integrate smoothly with every theme out there, I want to see if we can help you out here. Let me get a member of the dev team to take a look at this issue and see if they have any thoughts as to what could be up. We’ll try and get you a response here by the week’s end at latest.

I’m pretty sure it’s the jqTransform script that the theme uses. It’s trying to style the form used for the date picker. Haven’t had time to look at this. Any idea how to disable this just for this page, preferably from my child-theme folder? If there’s no quick fix, don’t worry about it, I’ll figure something out later.

I think since PJAX reloads the form control without the header/footer reloading, it avoids the jqTransform restyling. The only fix on your end I can think of is a toggle for loading the calendar with PJAX after page load, which would isolate it from any header/footer scripts affecting it.

Thanks for the follow-up; this should be helpful for the dev when they take a pass at this. Hopefully we’ll be able to advise accordingly. Cheers!

Just so I’m understanding… PJAX = AJAX? Or something else?

I believe, jqTransform(); needs to be called after the AJAX request completes to style the new form elements introduced into the DOM.

This StackOverflow post has some methods for monitoring the DOM for changes:

https://stackoverflow.com/questions/1091661/detect-element-content-changes-with-jquery

@nick, PJAX, referring to jquery.pjax.js, used by Events Calendar, which indeed uses an AJAX request.

You don’t seem to understand. I really don’t care about styling the elements. My theme is using jqTransform on the form elements, which is completely screwing up the date picker, causing it not to work.

The only thing that seems to be relevant with ajax here is the fact that jqTransform naturally doesn’t affect the refreshed date picker after an ajax request, and the refreshed date picker works fine…

The Events Calendar and jqTransform are not playing well in my theme, and I’m trying to fix that.

Sorry I misunderstood.

From what I can see jqTransform is injecting code into the datepicker, essentially replacing it with a UL for styling purposes and hiding the actual select element. Since we use onChange event handlers to fire the AJAX call, my guess is that those are not being attached to the jqTransform generated code, and since those are not form elements, onChange cannot be applied to them.

Since jqTransform is a 3rd party library we can’t really provide support for it besides recommending that you find another way to style your forms that doesn’t break the datepicker, or exclude the datepicker from being modified by jqTransform.

Believe me, I don’t want to style the date picker. I can do that myself with CSS. I’m not even sure where in the code jqTransform is being called, as this theme has a whole javascript library integrated into the theme. I believe I would have to edit the javascript itself to prevent this code from running on this particular page, as it’s loaded dynamically through the scripts as opposed to the template. And I need some of the other JS for the UI of the page.

In short, i’m just wondering if you’re aware of a quick way to exclude this code from running on this page?

I’m self taught, so I know some of the advanced stuff, while lacking some of the basics. Any help is GREATLY appreciated.

You’ll need to find the .jqTransform(); call and either modify it to not target the Events forms, or turn it off completely. That’ll probably require editing the theme JS files.

You could also try to dequeue that script on events pages (use the tribe_is_*() conditionals) if it’s enqueued by WordPress.

Good luck!

.jqTransformSelectWrapper ul { max-height:200px !important; overflow-y:auto !important; }

its late but i just got it from theme support
thanks

Nice! Thanks for sharing this, rashanoureldin. This will definitely be helpful to anyone else facing this issue down the road. Appreciate the heads up.

Sorry, that CSS does nothing but beautify the jqTransform date picker a little (it still doesn’t show on top of other elements, but that’s irrelevant). Since jqTransform still modifies the date picker, it still prevents The Events Calendar from intercepting the click events (a known problem with jqTransform). The only solution I’ve found is to prevent the plugin from loading on specific pages.

I’d appreciate code that would prevent jqTransform from modifying only drop down menus, rather than the all or nothing approach of disabling per page.

Oh, in case it helps anyone, there does appear to be code to fix jqTransform:

https://blog.konstantinov.eu/2011/04/jqtransform-plugin-select-change-event.html

I haven’t gotten it to work. I don’t really want to waste time on it just to style a few dropdown menus (someone want to post the fixed jqTransform plugin?).

This fix is still not compatible with The Events Calendar, since jqTransform isn’t called anyways after a ajax call. That means that after choosing a month/year, ajax will load in a new dropdown menu that doesn’t get styled by jqTransform. So suddenly your graphic elements change, which would look tacky.

So to recap: I’d like a way to keep jqTransform from styling dropdown menus specifically (which fixes the conflict with this plugin), without disabling it entirely on a page. And fixed jqTransform code would be nice (not a biggie), simply to have working dropdown menus on other pages that fire the change event correctly when clicking them.

Nevermind. Used the .not selector to exclude specific elements. A fixed jqTransform would still be useful though.

In jquery.custom.js of Duotive Fortune theme (change /events/ to the page hosting The Events Calendar plugin):

/* GENERAL */

	//form replacement
	//$("form").jqTransform();
	if ((location.toString().indexOf('/events/') == -1)) { $("form").not("#whats-new-form").jqTransform(); }

Hey Gabriel. Thanks for the follow-up here; apologies that we’ve been away from the forum these past few weeks, all of our support staff had vacation in some capacity in August and as a result we’ve gotten a bit behind here on the dot-org forums. Now that the team has re-assembled I wanted to try and help finalize this for you.

Aside from the fixed jqTransform (which if I understand correctly, is on that plugin’s dev team and not something our code is handling)…was there anything else you needed from us? If you do, let me know. Our support bandwidth is back this week and I could certainly get a dev to take a look if you had any lingering issues.

Sorry, forgot to mark this resolved. It’s an issue with jqTransform plugin (which isn’t supported anymore), not your plugin. It affects any theme (such as Duotive-Fortune) using the plugin to style forms. Simply disable jqTransform from selecting #whats-new-form, and it fixes any problems. Thanks