I am trying to load a form through ajax within fancybox. It works great, everything works fine.
I used the recaptcha (rails) plugin and got the captcha on the form. Now when the fancybox loads, its getting redirected to an empty page with only captcha on it.
I assume this is some problem with iframe and modal window?
Has anyone loaded recaptcha on a form within fancybox? would help me out if you could point me to an example..
appreciate your help...
I had the same problem with fancybox. I solved it using the recaptcha ajax API:
https://developers.google.com/recaptcha/docs/display#AJAX
I have the same problem, though only in Safari (presumably Chrome too). It works fine in Firefox. It has nothing to do with Ruby (I use Grails), and the problem occurs with all jQuery popups (I've tried blockUI, SimpelModal and ThickBox).
As far as I can tell, for some reason when jQuery moves an iframe (which is what ReCaptcha is) in the domtree, Webkit decides to load the iframe content as a new page. Or maybe replaces the page content with the iframe content.
I'm pretty sure it's a Webkit bug, and I have no idea if there is a fix possible.
Edit: turns out there's a fix possible:
$('#captcha-form script').remove();
'captcha-form' is the id of the form containing the captcha. Remove the script tags so the scripts don't get executed a second time when Safari re-renders them after jQuery moves them. The event handlers created by the script aren't in the script tags, so they survive.
I think that Safari re-executes javascript when it re-renders the tags. And anything in a modal dialog gets re-rendered when the dialog opens. Furthermore, I suspect that after having been re-rendered, the document.write used by recaptcha gets confused about where it is and messes up.
if anyone is still searching for an easy solution to this, i've managed to get a recaptcha working in fancybox by calling it in as an iframe
if calling it in from a class selector:
<script>
$(document).ready(function() {
$(".example").fancybox({
fitToView : true,
autoSize : false,
openEffect : 'elastic',
closeEffect : 'elastic'
});
});
</script>
Then in your HTML
<a href="http://url.com/iframe" class="example fancybox.iframe>Captcha Fancybox</a>
Or, if you are triggering the fancybox programatically, do something like:
$.fancybox({
width : '520px',
height : '230px',
autoSize : false,
openEffect : 'elastic',
closeEffect : 'elastic',
'href' : 'http://www.url.cc',
type : 'iframe'
});
The easy solution to load a form with recaptcha through ajax within fancybox.
<%= recaptcha_tags ajax: true %>
Related
I previously used javascript dialogs for confirmation on a mobile web app, but am now trying to switch over to using the new popups feature in JQM 1.2. My initial test doesn't work - no popup appears and I'm simply redirected to the anchor I'm trying to call.
My test code is simple, albeit a bit obfuscated because I'm using haml:
%a{:href => "#popupBasic", :"data-rel" => "popup"} Show popup
%div{:id => "popupBasic", :"data-role" => "popup"} Basic popup div
That said, I don't believe the haml is causing the issue based on reading the final HTML output. Both elements are at equal depth and contained within the element.
In addition, the div does "popup" without issue when I use the following at the console:
$( "#popupBasic" ).popup( "open" )
That makes me believe that the issue lies somewhere in the link or the URL handling. When I do click the link, it instead takes me straight to
http://localhost:3000/#popupBasic
Any ideas on how I should be handling the URL differently so that it shows the popup as intended?
After realizing the problem was probably some part of my Javascript, I went through and tried turning off each bit of javascript individually, until I figured out that the problem was with this in my application.js file:
$(document).bind("mobileinit", function(){
$.mobile.linkBindingEnabled = false;
});
which prevents all anchor click handling. Obviously now that I've removed this code the anchor links are working properly. Of course, that means I'm now left with trying to figure out why I added that in the first place and what I just broke by removing it...
I load jQuery Mobile on my site when I am only on a mobile touchscreen device. When I do though. It messes up everything. For example, select menus don't work quite right, as well, the words "loading, loading, undefined" appear at the bottom of the page. I know I am missing something but do not know what.
Any ideas on what I could be missing?
Thanks
EDIT: Okay, So I took out all scripts that I am running except for jQuery and jQuery Mobile. I call jQuery first, then jQuery Mobile. It still breaks aspects of the site.
What it breaks:
- I cannot navigate to any other page via the navbar, if I click on a nav item, and look in the url, the correct url appears (with a # in it) like: /#/about-us/ Then, it just redirects to the home page and the page goes white
Select menus have weird results. It prints out whatever is in the select right beside it. And if you in landscape mode on the ipad and you click on the select, it sends you to the bottom of the page (weird).
it prints out 'loading' twice and 'undefined' once at the bottom of the page
All I have for scripts are jQuery and jQuery Mobile. I should also mention that I am using wordpress so it might have enqueued some other scripts (I have deregistered Wordpress' version of jquery and enqueued my own)
Anyone else experiencing these problems?
jQueryMobile replace your normal links with Ajax one, so every page can be loaded by the ajax, text on docs page:
(..) Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.
If you want to disable single link to be loaded by the ajax you should write something like this:
<a href="/some_page" data-ajax="false" >link</a>
or do it globally:
$(document).bind("mobileinit", function() {
$.mobile.ajaxEnabled = false;
});
jm also does replacement on other elements so you should try using data-role attribute, for example:
<select id="test" data-role="none">
to disable replacing this element.
For those like me where
$.mobile.ajaxEnabled = false;
did not work and the whole page layout seems still broken:
For me this one works (- set it inline before loading the jquery mobile file):
<script>
// Preload configuration
$( document ).on( "mobileinit", function() {
$.mobile.autoInitializePage = false; // This one does the job
});
</script>
Furthermore if you want to disable jQuery mobile automatic link and form handling via ajax, set (as dvk3 said) ajaxEnabled to false and pushStateEnabled to false as recommended:
$.mobile.ajaxEnabled = false;
$.mobile.pushStateEnabled = false; // Recommended is false, when ajax is disabled
For further information see: http://api.jquerymobile.com/global-config/
I'm using v1.4.5
Same happened to me by mixing mobile with other frameworks. Fixed issue but getting custom build of jQuery.mobile. My case was that I needed swipe for touch devices only so used custom min file and nothing was broken after that.
It really depends if you need jQuery.mobile or you need just a certain functionality, Widgets, events? Use custom version that you can build yourself.
You can make and download yours here : http://jquerymobile.com/download-builder/
I hope it worked for you too guys!
I'm actually working with jQuery mobile 1.0 and the auto complete widget from jQuery UI.
Everything works perfectly except one little thing :
When the user has been redirected (location.href) using the autocomplete feature, there is no back button on the page where he has been redirected.
I've set the $.mobile.page.prototype.options.addBackBtn to true in the mobileinit and the script is loaded before jQuery Mobile.
I didn't find any answer anywhere so this is why i'm asking to you guys
Thanks in advance
By the way sorry for the bad english it's not my first laguage
How do you redirect the user to other page? With location.href? Then that's your problem, setting location.href causes a page refresh and then jQuery Mobile loses it's history (so it won't show the back button)
Please use $.mobile.changePage( url ) to switch to another page
Something like:
$("#yourAutocompleteID").autocomplete({
select: function(event, ui) {
$.mobile.changePage("nextpage.html?id="+ui.item.id);
}
});
For simplicity I pass here the data in the querystring
I'm trying to get a getJSON result to update an HTML element on page load, within a jquery mobile loaded website.
Now, I've read I should not rely on ready(), but bind to pageInit. So I tried, but it just won't work. I've tried many other events that could be logical to try within the API event documentation, without any success.
The closest I come to success is after the page is loaded, via ajax, if I refresh the page manually (with the browser's refresh button), getJSON does update the corresponding HTML element. And you guess, it's not what I want to achieve. Here is what the code looks like now, and where it is placed...
<div data-role="page">
<script>
$( '#pageContainer' ).live( 'pageinit',function(event){
//an alert() here does fire right before the page is shown in the browser
//here is the getJSON code.
});
</script>
Now, I need help to try to figure how to make it work. I only want an element X in the page to update with the text returned from a jSON when the page appears in the browser! Like a normal ready() function would have done !
(Maybe it is relevant to specify I'm running RC2 ?)
If you can't use JSONP here, have you tried setting a setTimeout()? You have to trigger a callback after the json object is loaded so timing is essential.
I am using a master page on a JQuery-Mobile app that have few controller , and I want to set up a Javascript call to an initialize function on every page even when it loads through Ajax,
Iam sure there are few ways to do that, but whats the best approach and what would be the alternative to $(document).ready when the page is called through ajax instead of being directly loaded without that.
takepara's answer is correct, but...
If you want to modify the content of the page you will have to bind earlier.
Take a look at beforepagecreate event.
If your handler for this event returns false, then no JQM widgets and styles will be applied and you can work with it manually.
jQuery Mobile Docs - Events
$('div').live('pageshow',function(event, ui){
alert('This page was just hidden: '+ ui.prevPage);
});
or
$(document).bind("pageshow".function(){
// initialize code here
});