Forums

ChronoForms v8 is now WordPress ready, ChronoMails is out

The JED needs volunteers!

Another Mootools and jQuery conflict post!?!

gr
growfish 31 Jan, 2012
Ok, thanks to this post I've been able to set up a wicked long multi-page form that works great EXCEPT for validation. Nothing happens as far as validation - you can submit with empty fields.

I'm running JCal Pro and a slideshow script that use jQuery - so I'm confident it's a conflict between jQuery and Mootools.

I've tried to use jQuery Easy to enable "no conflict" mode but it couldn't see that it made a difference. Also tried SC JQuery and that didn't appear to make a difference either.

Anything else I can do - any sort of hack I can implement to have some sort of validation on my forms and continue to use my jQuery scripts?
Gr
GreyHead 31 Jan, 2012
Hi growfish,

If you choose to use JQuery then it's up to you to get it into noConflict mode so that it doesn't break MooTools scrips on your site.

Sometimes the plug-ins you listed or just putting jQuery::NoConflict(); in the Load JS box of a form is enough; other times nothing seems to work except hacking or removing the offending extensions. It really does depend on how clealy they are coded.

Please post a link to the form so I can take a quick look.

Bob
gr
Gr
GreyHead 31 Jan, 2012
Hi growfish,

There are some odd things happening here. JQuery isn't being loaded - although it looks as though at something on the page is expecting it. Neither is MooTools being loaded so the ChronoForms validation won't run.

In your form please remove the noConflict line from the Load JS box (or at least comment it out) and then add a new Custom Action to the On Load event; drag it up before the Show HTML action and put this code in it:
<?php
JHTML::_('behavior.mootools');
?>


This should load MooTools OK and remove one of the JavaScript errors; then you can see what is left.

Bob
gr
growfish 31 Jan, 2012
Ok I added that PHP code to a Custom Code event in the On Load section and placed it above the Show HTML event.

Actually I didn't have any jQuery no conflict stuff in ChronoForms - I'm guessing you might be seeing that because of that jQuery Easy plugin I installed to do that. And it looks like it was hardcoded on the index page a few times - I removed it from the coding on the index page.

I tried to disable the jQuery Easy in the Plugin Manager that I just installed, but then my whole site goes blank - no content on any pages just the background images!!! So not sure what is up with that!

Anyways, I don't see any difference..maybe I did something wrong?
Gr
GreyHead 31 Jan, 2012
Hi growfish,

I still see more or less the same errors on the page as before :-(

If you view the form without the template then the validation works OK so I suspect something missing from the template - most likely it doesn't have the line needed to load the Joomla! header info. Please check for a line like this 
<jdoc:include type="head" />


Bob
gr
growfish 31 Jan, 2012
I see "<jdoc:include type="head" />" on the index.php file in my template directory just below <head>. Is that a proper place for it?
Gr
GreyHead 31 Jan, 2012
Hi growfish,

Yes that's where it belongs - but it doesn't seem to be working :-(

Bob
gr
growfish 01 Feb, 2012
I made a menu item to my form and then assigned the JA Purity template to that menu item - just to see what happened with my template was removed from the equation. And sure enough, as you suggested - it works fine with a different template.

So, it does appear to be an issue with my template specifically! How would your recommend I go about troubleshooting further from this point? Thanks again for all your help so far!!!
Gr
GreyHead 14 Feb, 2012
Hi growfish,

I've written a help doc on solving jQuery problems. You can get it here. While this looks at one particular template there should be enough information for you to see what is happening on your site and hopefully revolve it.

Bob
gr
growfish 14 Feb, 2012
Amazing! Very good work.

In my case the client actually ended up wanting the form on its own page (aka: template) - with no other modules or menus. So, I was easily able to assign my Chronoform menu item to a separate template (an edited version of JA Purity that had all the module areas removed from the index.php file). This worked brilliantly as you can see here.

Again, probably would not be a good solution for most (if you wanted your form to show up within your main template design), but turned out to be a perfect solution for this case and avoided my conflict problem.

I will surely keep this PDF handy for the next time I have jQuery/MooTools issues. Thanks again for your effort as usual!!
Gr
GreyHead 14 Feb, 2012
Hi growdish,

Thank you. Very neat idea to use a separate template for the form :-)

Bob
gr
growfish 27 Feb, 2012
Me again! 😀

All was working well with my complex multi-page form until I just realized that it's not validating in IE8 (not sure about IE9). I've read dozens of post here about IE validation issues and have tried several fixes that seem to of worked for others - but not me.

Here's the deal:

Form is at http://www.beltonyouth.org/employment-application

It works and validates great on all my Mac browsers (Safari, FF, Chrome) as well as PC (Safari, FF, Chrome) but skips right over validation in IE8.

Originally, I was linking to the form via a menu item. I then tried using the module technique linking to the form in an article via a module (http://chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=3&t=21998&hilit=IE8+validation&start=45#p267085). Also tried using the standard plugin to put the form in an article using the CF plugin/mambot (http://chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=26&t=24841&p=106866&hilit=IE8+validation#p106895) with div tags intend of p tags.

All produce the same results - no validation in IE8. I'm clueless. Don't get it....

I've attached a backup file of my form. Any additional advise you could provide would be greatly appreciated!!
Gr
GreyHead 27 Feb, 2012
Hi growfish,

It seems to be disliking the 'position' input. I don't' see anything odd about the HTML for that input though. Please try changing the name to 'positionx' and see if that fixes the validation.

Bob
gr
growfish 27 Feb, 2012
Unbeliveable...you've amazed me once again. I changed the field name and it worked perfectly in IE8. I must know how in the world you came to suspect that field name?!

Also, I can see that the validation I'm using now can be quickly bypassed with Javascript disabled on the users browser. I have played with the Custom Server Side Validation as well as the Auto Server Side Validation but with my weird multi-from setup, I just couldn't figure out 1.) What code to use exactly and more importantly 2.) where in my Events list would I put the event. Any thoughts?

Again, thanks so much as usual for your help!
Gr
GreyHead 28 Feb, 2012
Hi growfish,

Spam protection probably lives as the first On Submit action of page one of the form; even before the Check Captcha. It it's a spam submission they are unlikly to complete any later pages.

I'd also add some kind of check for later pages that they have already submitted page one and, if not, redirect them there. That stops anyone hitting a later page URL by chance.

Diagnosing the IE error went something like this:
[list]
  • Load the page in FireFox and check the validation is working

  • Load the page in IE9 and check that it is working

  • Open the IE9 Web developer tools

  • Switch to IE8 browser mode and check that the validation isn't working

  • Add &tmpl=component to the URL to check if the problem is linked to the template (it isn't)

  • Turn on JavaScript debugging and discover that the error is deep in MooTools on a piece of code that looks like g[i]=h[i];

  • Add g[i] to the Watch list and check again.

  • Find out that when the error occurs g[i] refers to the 'position' input.

  • Check the input code for any obvious errors - there are none

  • Scratch head

  • Vaguely recall that some names can cause problems because they have a special meaning = and position is a CSS term

  • Fail to think of any other explanation . . .

  • Check the vague thought by asking you to rename the input
    • [/list]
    Bob
    gr
    growfish 28 Feb, 2012
    Outstanding diagnosing steps. :mrgreen:

    I will play with the spam protection/server side validation and see what I can come up with. Thanks again for your guidance.
    gr
    growfish 06 Mar, 2012
    Ok last question for you - hopefully 😀

    So I've been having an intermittent issue - I was hoping it was just a glitch on a couple of user submissions but I seem to get getting 1 every few days with this problem. Most submissions work perfect - just a random one every so often is wrong.

    The problem is that on my multi-page setup I'm ONLY getting the last page/step 5 of 5 of the multi-page form data saved to the database and in my email. I have validation on all the previous steps/pages so the user user had to of entered data or they couldn't have continued to that point.

    Plus, this is an employment application - so no one would skip the first steps...we can't offer then the job if we don't know who that are!!!🙂 These are legitimate submissions - so I know the people entered all the fields correctly.

    It's almost like it's timing out or something - and forgets the data from the previous steps. The final step/page is a lengthy one - so it could take someone up to an hour to fill it out.

    When it happens I get the email with only the form names like "First Name: {first_name}" for example. The record for that field in the db is blank.

    I've tried testing dozens of different ways/browsers/OS/etc and can't seem to replicate it myself...but it's happening for some reason for sure.

    If there any way I can make sure the data from the previous steps is saved better? Hopefully that makes sense!
    Gr
    GreyHead 06 Mar, 2012
    Hi growfish.

    It sounds as though the user session is timing out. I think that the default Joomla! setting is 15 minutes of inactivity. The dats from the previous steps is saved in the session so if this happens a new session will be started and the data is lost.

    You could just lengthen the session; on my development sites I set them to 1500 minutes to avoid getting kicked off too frequently. A setting of 30 or 60 minutes would probably reduce the problem significantly.

    You could add a keep-alive code to the form. See the Joomla! code here Later: I see that there's a Keep_Alive option on the CFv4 Show HTML action.

    My presonal preference - which takes more work - is to save the data after each page and add both a session key and a cookie to identify the user so that if a later page is loaded or submitted you can check to see which record is being updated. If there is no session key, check the cookie, if there's no cookie ask them to re-identify themselves somehow.

    Bob
    gr
    growfish 06 Mar, 2012
    Changing the session time from 15 minutes to something longer seems to of worked perfectly for now. Thanks as always!!!!
    This topic is locked and no more replies can be posted.