On my parent I have the following
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox();
});
</script>
<span id="inlined" name="inlined" style="display:none;">
<h2>Send To blabla</h2>
<form id="contact" name="contact" action="#" method="post">
<label for="msg">Message</label>
<textarea id="msg" name="msg" class="txtarea"></textarea>
<button id="send">Send E-mail</button>
</form>
</span>
and am generating a page via an Ajax call which displays a link similar to the following:
<a class="various" href="#inlined">Open Fancy Form</a>
I have checked for errors in the console and have found none yet nothing happens when I click "Open Fancy Form". I have the same basic items on another page except the link is hard coded and it works fine. How do I get the link to open the Fancybox when it is generated via a php/ajax call?
If I understand your question correctly, then you have to call
$(".various").fancybox();
right after you have loaded your content.
if(ajaxRequest.readyState == 4){
var response = ajaxRequest.responseText;
triggerIT();
}
function triggerIT(){
setTimeout(function (){
$(".various").fancybox();
From what I could tell the fancybox had to be told to wait to trigger. a .500 wait seemed sufficient.
Related
I have a form in my codeigniter project using google's invisible recaptcha like so:
HTML
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmitInvisRecaptcha(token) {
document.getElementById("contact_us-form").submit();
}
</script>
</head>
<body>
<form id="contact_us-form" method="post" action="/info/contact_us">
<div>
<label>full name</label>
<input type="text" name="full_name" value="<?php echo $this->input->post('full_name'); ?>"/>
</div>
<div>
<button type="submit"
id="submit_btn"
class="btn my-other-styles g-recaptcha"
data-sitekey="<?php echo $sitekey; ?>"
data-callback="onSubmitInvisRecaptcha">
Submit
</button>
</div>
</form>
</body>
</html>
PHP
defined('BASEPATH') OR exit('No direct script access allowed');
class Info extends MY_Controller
{
function contact_us()
{
print_r($_POST);
}
}
from my code I, I have 2 problems: (I hope it's ok to ask about multiple problems in 1 post)
the recaptcha icon is nowhere to be found in the page. I've checked the sitekey I use in the form is the same as the one I find in www.google.com/recaptcha/admin.
in the contact_us function, the print_r($_POST); there is no g-recaptcha-response..
P.S.: the form is a part of another page that is shown using ajax so the form is wrapped by another <div>.
finally I've found the answer from this SO answer. The link shows a code for multiple recaptcha/form in one page, but it's simple enough to understand and modify for my needs.
basically, if I understand correctly, the reason my code failed was because of these points:
I need to use a separate <div> element to apply the recaptcha instead of the submit button.
google recaptcha will try to find the appointed element when the page loads, otherwise, I need to render and execute the grecaptcha manually using javascript if the element only appears or added to the page after some action.
From this earlier thread I thought I learned that form data could be sent by POST method using javascript submit() command. But I can't get it to work. This demo doesn't make obvious sense with respect to purpose but bear with me. I just wanted to test this specific command which doesn't seem to work for me. Can you please help me? Clicking the regular submit button sends the post data ok but activating the javascript via the link does not.
<html><body>
<?php
$self = $_SERVER['PHP_SELF'];
$posttext = file_get_contents('php://input');
echo "Received input: ".chr(34).$posttext.chr(34)."<br><br>";
echo "<form id='test' action='{$self}' method='post'>";
?>
Please fill in the fields with any text:<br><br>
foo: <input type="text" name="foofield"><br><br>
bar: <input type="text" name="barfield"><br><br>
<input type="submit" value="Submit button works"><br><br>
Submitting by JS not working – why?
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
jQuery(function($) {
$(document).ready(function(){
$("a#submitlink").click(function(){
alert("Yes, the link has been clicked. It is not that.");
$("form#test").submit();
});
});
});
</script>
</body></html>
You need to: event.preventDefault(); the default behaviour from the <a>. The problem is if you don't do that, the page reloads cause that is what the <a> tag does. So even you submit the data you also refresh the page where the submitted data gets lost.
$("a#submitlink").click(function(event){
event.preventDefault();
$("form#test").submit();
});
The other solution is to add # in the href of the <a> tag like:
Submitting by JS not working – why?
this will also prevent the <a> tag from doing a refresh.
I have a script that shows 2 divs and hides 1 div after a user submits a form. The form's target is an Iframe on the same page.
I would like to delay the Hide/Show events until the Iframe loads. I was able to do this with a loading animation, but I am not sure how to do this with the Hide/Show script.
The script works with the submit function like this:
$(function(){
$('#form_710370').submit(function(e){
e.preventDefault(); // add this
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show();
return false;
});
});
But if I try to use the load function like this, it does not work, but it works for my loading animation, any suggestions on what I am doing wrong?
$(document).ready(function () {
$('#iframe1').load(function(){
{
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show()
});
This is the loading animation script which works
$(document).ready(function () {
$('#iframe1').on('load', function () {
$('#loader1').hide();
});
});
/ in ready()
$('#form_710370').submit(function(){$('#loader1').show();return true;});
Here is the HTML
<div id="mydivhide1">1111</div>
<div id="mydivhide2">2222</div>
<div id="form_container">
<form id="form_710370" target="iframe" method="post" convert.php">
<input id="Website" name="url1" type="text" value=""/>
<input id="saveForm" type="submit" name="submit" value="submit" />
</form>
</div>
<div id="frameWrap">
<img id="loader1" src="ajax_loader_blue_512.gif" alt="loading gif"/>
<iframe id="iframe1" name="iframe1" src="page.html" > </iframe>
</div>
Here is the CSS
#mydivhide1 {display:none;}
#mydivhide2 {display:none;}
I think the issue you're running into is that you're preventing the form from submitting to the iframe which is then showing the divs but the iframe is never calling load again because the submit is being stopped.
Assuming that you want to show #mydivhide1 and #mydivhide2 when the form is submitted and then hide them when the iframe finishes loading, I came up with a fiddle that should do what you want: http://jsfiddle.net/CST4t/3/
Basically I just removed the e.preventDefault( ); and instead of returning false, I returned true so the form submission went through. I also cleaned up some items like the form action attribute and moved the submit function override to $(document).ready( );.
Edit
One other thing that I did was I changed the form target and the name of the iframe to a more commonly used name that seems to work better across more browsers. Apparently the name and target values are really touchy from browser to browser, see this answer.
$('#iframe1').contents().load(function() {
//window loaded
});
In Chrome and IE, the following code, when the Anchor tag is clicked, pops up the form (modal box ID of "modalContent", form ID of "DL") and adds an "OnSubmit" to the Form. When the Form is submitted, it will navigate to the requested PDF via Javascript, and run some ASP to send an email with their details attached.
<script language="javascript">
function downloadAnyway(link) {
$('#DL')[0].setAttribute('ONSUBMIT', 'return checkform("' + link + '")');
$('#modalContent').modal();
}
function checkform(navName) {
window.open(navName);
$.modal.close();
}
</script>
<!-- link to download a product guide -->
Product Guide
<div id="modalContent">
<form id="DL" action="contactusprocessNew2.asp" method="post" name="contact" >
<div align="center">
<input type="image" src="templates/default/images/submit_download.gif" class="imagebutton" value="submit" />
</div>
</form>
</div>
This works fine in IE and Chrome, in Firefox, the Javascript onsubmit works, but the action of the asp never fires. If I remove the javascript, the asp fires as expected.
So, the final form in FireFox, after the "onsubmit" has been dynamically added looks as below:
<form id="DL" action="contactusprocessNew2.asp" method="post" name="contact" onsubmit="return checkform("downloads/ProductGuide.pdf")">
The onsubmit fires, opening the product guide in another tab, however, the ASP Action never fires. There is more that goes on here, like we write a cookie making sure we don't ask the client for a download every time they use our downloads, however, I've trimmed off anything I think is outside the problem domain.
In the asp, I have gotten rid of all code and put a simple response.redirect to see if it fires and make sure nothing is going on in the ASP.
Any idea how I can get this to function in FireFox?
UPDATE:
I have replaced the onsubmit event wireup with a 'proper' jquery submit wireup replacing the first line below, with the second. The asp on the form still does not function.
//$('#DL')[0].setAttribute('ONSUBMIT', 'return checkform(\'' + link + '\')');
$('#DL').submit(function checkform() {
$.modal.close();
window.open(link);
return true;
});
UPDATE 2
Right, it is because to modal popup CLOSES before the ASP fires. If we comment out the line $.modal.close(); then the asp fires as expected. In Chrome and IE the javascript and the ASP must fire at the same time, in Firefox, the javascript fires which "hides" the div with the "modelContent" and the asp can no longer fire. So this is the real problem... now how to sort it out...
I have a jquery fancyzoom box. In that box ,I have a contact form which sends an email on submission. But I am not able to call form submit function due to fancyzoom.
Code is like :
("req_quote.php")
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#popup1_link').fancyZoom({width:610});
$("#submit").css('cursor', 'pointer');
$('.reqfrm').submit( function(){
alert("hell");
});
});
</script>
<body>
<form class="reqfrm" id="frm">
<input type="text" name="name" />
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
</body>
</html>
Above file is included in "index.php" which contains the actual link to open the form in fancyzoom box.
(index.php)
< a href="#popup1" id="popup1_link">< div class="blink">Request a Quote< /a>"
If I remove $('#popup1_link').fancyZoom({width:610}); then i get alert on submission otherwise it goes on form action directly.
Are you getting any JavaScript errors with the fancyZoom call in? Are you including the script file you need to use it? It's hard to say without seeing some more data, or a jsbin / jsfiddle.
The form is submitted in the fancybox js file.
As mentioned by Raul, you need to provide more info for us to help out. You could try any of these things:
See if you can reproduce this issue within a simple html file, that doesn't have any of the extra stuff that your current page may have. If the issue still persists, put it into jsFiddle and post the link here.
If you haven't already, install the Firebug addon for Firefox, and use it's console to check for any JS errors.
Have a look at the jsFiddle that I've created. Is this similar to what you are doing? Mine works wihtout any issues.