I have Google's re-captcha implemented and working in Chrome perfectly (AJAX APIs). IE is the problem...
I have: localhost://myapp/index.html and a link for Forgot your password. When this link is clicked jQuery click handler is called. Handler function changes the div's content and also calls for Recaptcha.create(...) The widget is displayed correctly and works as expected in Chrome, but in IE if I click on reload icon or the sound button it reloads the whole page.
If I manually call for Recaptcha.reload() it reloads without any problem ?!
HTML I have is:
<div id="recaptcha" style="width:120px"></div>
[...]
<script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
[...]
//In a jquery click handler I call
Recaptcha.create("6LxxxxxxxxxxxxxxxxxxxxxxIrpV5RO8P",
"recaptcha",
{
theme:'white',
callback: Recaptcha.focus_response_field
}
);
So far so good... Captcha gets loaded well in all browsers. In IE8 and 9 when I click the widgets buttons for reload and mp3 version the whole page gets reloaded
I tried changing http for https and vice-versa, but still without any luck...
When Recaptcha.create(); is called, Google's re-captcha RELOAD and IMAGE/TEXT buttons' code looks something like this:
<a href="javascript:Recaptcha.reload();">
and I don't know why the page gets reloaded in my app in IE when the button is pressed and in the demo Google provided DEMO it sends a async request...
Since I can't change the javascript in href attribute I had to add a onclick handler in jQuery $(document).ready();
My solution was this:
$("#recaptcha).on("click", "id_of_the_reload_button", function(e){
e.preventDEfault();
Recaptcha.reload();
});
I basically blocked the natural behavior of the anchor google provides and called the reload() function myself.
I've never found out what was causing my page to reload in the first place
Related
I used the plugin to open up an internal page, which works fine with iframe but the preloader does not show up. I just want to display a preloader image or a "loading..." text. This is what I tried:
$(document).ready(function() {
$('.link').magnificPopup({type:'iframe', preload: true});
});
Is there something else I need to do?
If you look at the Javascript source of jquery.magnific-popup.js, the mfp.updateStatus('loading'); is never called in the iFrame code block. So what I did was simply add mfp.updateStatus('loading'); to the initIframe function and remove mfp.updateStatus('ready'); from the getIframe function. It may be better to add a setTimeout to call the mfp.updateStatus('ready') but it seems to work okay without that.
I would have 10 bootstrap buttons on a single html page.
Each button opens a ootstrap modal filled with a html fragmen via an ajax request.
<div class="modal fade" id="myModal"></div>
$('#myModal').modal();
Should I create 10 different divs with 10 different ids? Or even 10 different instances?
var dialogInstance1 = new BootstrapDialog({
title: 'Dialog instance 1',
message: 'Hi Apple!'
});
or
should I create ONE dialog?
I would expect kind of caching problems when I open modal1, then just when I open modal2 I see still for some miliseconds modal1 html fragment from a prvious ajax request.
And how should I create those modals? The samples should this:
$('#myModal').modal();
and the instantiation? This is very confusing.
Can someone please share his experience how to approach with many bootstrap modals?
I would expect kind of caching problems when I open modal1, then just when I open modal2 I see still for some miliseconds modal1 html fragment from a prvious ajax request.
Assuming you're referring to data-remote's caching, you will probably be able to disable that in Bootstrap v3.2.0 (see https://github.com/twbs/bootstrap/pull/13183/ ).
However, I'd still recommend against using data-remote since it doesn't give you much control. It:
doesn't provide or easily let you do any error handling
doesn't give any "loading..." indication
forces you have to generate modal HTML on the server side (as opposed to, e.g., returning JSON from the server and using client-side templating)
IMO, you should:
include just one instance of the blank modal markup
setup your own click event handlers on the buttons that summon your modal
initiate the AJAX request in your click event handler
use client-side templating to generate a corresponding modal using the results of the request
use $(...).modal() or $(...).modal('show') (depends on how your templating works) to show the modal after the templating completes
In seaside I need to do two events - callback and go to the other url (google.com) on clicking a link but I am not able to do both of them. What could be possibly wrong here? Is there any way I can do both the events?
html anchor
newTarget url: 'www.google.com';
callback: [Transcript show: 'clicked on google.com'];
with: ('www.google.com') .
Because >>callback: and >>url: both update the href attribute on an Anchor tag, you can't use both on the same anchor. You will have to solve this by writing a callback method which executes your logic, and then uses javascript to open the page in a new window.
Hope that helps!
You cannot use the default click behaviour of an anchor to accomplish this.
The code snippet below demonstrates how to do this with an ajax call that executes your action in a callback and sets the navigation to the other url as the ajax 'oncomplete' action.
html anchor
url: 'javascript:{}';
onClick: (html jQuery ajax
callback: [ ... ];
onComplete:(html javascript goto:'http://www.google.com'));
with: 'http://www.google.com'.
The snippet cancels the default click action on the anchor using the 'javascript:{}' code as the url. In some cases, I have also seen the use of '#' but in my experience that also scrolls your browser to the top. Next, it sets its proper 'click' handler that launches an ajax request, as I described before.
I have a modal window using jqmodal. I need a button within that modal to load a different page in the modal. I have this functioning in all browsers except safari.
JS
<script language="javascript">
function shipCalc() {
$('.jqmWindow').load("/ash/shop/shipping.php");
}
</script>
HTML
<form name="form9" id="form9" method="post">
Zip: <input type="text" size="5" name="zip">
<a href="#" id="submitbtn" onclick= "shipCalc();" >zip</a>
</form>
KEEP IN MIND! The class .jqmWindow is a modal window using the jqmodal jquery plugin. It is NOT just a div on a page. I am using the method .load() to change what has been loaded in the modal window after it has popped up. The html shown above is inside the page that is originally loaded in the modal. I am having trouble understanding why this works in all browsers besides safari. I posted earlier and got some responses that weren't quite addressing the real problem here, which is that I can not use the .load() method to load anything into my modal window in safari. (Ive stripped some non-important information regarding future modifications I will make to further make this suite the needs of the site, just to keep this nice and simple to understand...)
function shipCalc() needed to be on both the initial page AND the page that gets loaded into the modal for safari to load everything properly. All other browsers did not require that. All is working now, so I figured I would post my own answer in case anyone was ever searching for something similar!
I am using an .aspx page as cluetip bound to an anchor tag. I need to pass a parameter from anchor to this page and then call a WCF service to populate my template with returned JSON. I tried putting body onload function but that doesnt seems to work.
Thanks
Koby.
response to comment
You want to use the .mouseenter() event. This new event in 1.4 is better than .blur() which is what you will see in most examples (and probably why you can find it, a search of blur jquery popup should give you lots of examples). But mouseenter is better in the lastest jQuery
Docs: (very nice example code at the bottom of the page.)
http://api.jquery.com/mouseenter/
old version
just add the function to the onclick handler. You can do this in jquery with something like this
$(selector).click(function () {
code to do stuff (call wcf and populate)
you can use $(this) to see what was clicked on. ("passed" as you put it)
});
see fab new jQuery docs http://api.jquery.com/click/