Question

I have an ASP mobile site and I am using jQuery mobile. I have problem using recaptcha on my contact page. it disappears when the captcha is wrong. It works fine when i am not using jQuery mobile. Any help pls? i am using jQuery validate plugin too.

Thanks

Answer 1

I was experiencing a similar issue – my team used jQuery mobile’s ajax page linking to navigate to our sign-in page which used reCaptcha. The ajax call would cause the page to load, at which point the reCaptcha form would render and hide all other content. Refreshing the page would load everything properly.

My fix to this was to remove the ajax linking to the page. From the jQUery mobile manual:

Linking without Ajax Links that point to other domains or that have
rel=”external”, data-ajax=”false” or target attributes will not be
loaded with Ajax. Instead, these links will cause a full page refresh
with no animated transition. Both attributes (rel=”external” and
data-ajax=”false”) have the same effect, but a different semantic
meaning: rel=”external” should be used when linking to another site or
domain, while data-ajax=”false” is useful for simply opting a page
within your domain from being loaded via Ajax. Because of security
restrictions, the framework always opts links to external domains out
of the Ajax behavior.

In version 1.1, we’ve added support for using data-ajax=”false” on a
parent container which allows you to excluded a large number of links
from the Ajax navigation system. This avoids the need to add this
attribute to every link in a container.

Note: When building a jQuery Mobile application where the Ajax
navigation system is disabled globally or frequently disabled on
individual links, we recommend disabling the $.mobile.pushStateEnabled
global configuration option to avoid inconsistent navigation behavior
in some browsers.

This fixed our loading issue, but now we experience another issue: when navigating from the sign-up page back to our landing page, and back to the sign-up page jQuery mobile causes the browser to reload the landing page. Still working on fixing this.

Edit:
After thoroughly reviewing my code I noticed that the page I was calling had html, head and body tags, pulled jquery.mobile-1.0.min.js and jquery-1.6.4.min.js twice, and was included in a template.

Once I removed the extra html, head and body tags (as well as the js includes), the page displayed properly.