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
});
Related
I am loading two scripts on my websites:
<script src="scripts/my_site.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async="" defer=""></script>
Where my_site.js looks like this:
... many other functions, not nested
function captachaCallback() {
console.log("Captcha");
}
... other functions
Then in my form I am using:
<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback">Send</button>
Whenever I press the button, a white half-transparent overlaying empty div appears, but nothing happens (console message doesn't appear) and the form is stuck.
I am using the latest Chrome.
Thanks in advance
The problem was that I had a CSS setting affecting all divs on my website.
div { overflow: hidden; }
Apparently this makes the popup window with the captcha test invisible.
Removing this setting solved the problem.
I'm suspecting that the element is going out of the visibility. So can you try adding data-badge="inline" to the recaptcha element in the html
<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-badge="inline" data-callback="captachaCallback">Send</button>
Hope this helps.
You're not rendering the captcha.
The submit button is trying to verify the response of the captcha once the user completes the captcha by sending a callback to the function specified on data-callback. Since you haven't created the component it gets stuck in a loop.
The submit button cannot be the same tag where you load the CAPTCHA. You need to render the captcha in an empty tag.
Instead of:
<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback">Send</button>
Render it like:
<div id="captcha_element" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback"></div>
Wrap it up inside a form. You already have it, so just modify it.
Since you're specifying what function to run once the captcha is completed you don't need to worry about the submit button.
The structure should look something like this:
<form action="?" method="POST">
/// The other elements in your form
/// ...
<div id="captcha_element" class="g-recaptcha" data-sitekey="my-key" data-callback="captachaCallback"></div>
<br/>
<input id="btnSubmit" type="submit" value="Submit">
</form>
Also be sure to look up the documentation ;)
https://developers.google.com/recaptcha/docs/display
This sort of links back to a previous question that I made. The goal was to change the iframe src with a text input. After lots of experimentation, it worked. However, this has arisen a new problem. After I enter the link and submit it, it adds /?link=linkhere to the end of the page and refreshes it. Then, once it's refreshed, the original src comes back, making it useless.
Here's the most important code:
<iframe
id="minecraftFrame"
src="//classic.minecraft.net"
height="500"
width="800"
frameborder="0"
scrolling="no"
allowfullscreen="true">
</iframe>
<input type="text" id="myInput" name="input">
<button class="button" onclick="changeChannel()">Go</button>
<script>
function changeChannel(){
document.getElementById("iFrame").src = document.getElementById("myInput").value;
}
</script>
I'm unsure of what to try at this point, since I'm not too experienced with javascript. I just don't want the main page to refresh after change the src.
You need to prevent default, i.e. stop event bubbling which is resulting in reload. See if that works for you. Seems like it should as you are submitting the form which would result in refresh of the page.
function changeChannel() {
event.preventDefault();
// ...
}
Your code included this --- document.getElementById("iFrame").src
the id of the iframe is "minecraftFrame" and not "iFrame"
or you could use document.querySelector('iFrame')
and stop the page reload with
function changeChannel(e) {
e.preventDefault();
// Code goes here
}
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.
I'm trying this on my site
http://www.fasw.ws/demos/transitions1/slide1.html
everything is working good but not when i add data-ftrans="slide" to a form button.
example:
<form action"http://google.com"> <button data-ftrans="slide" type="submit" style="height:50px; font-size:20px;">Submit</button>
What does i need to change to get this working ?
I think you must change your button to a depend on the context.
And must have 2 attribute 'href' and 'data-ftrans'. It'll run function slideTo(href, effect, pushstate) in the context.
href: one html page
data-ftrans: transition type
Maybe, you want to submit then change to another page (but not submit page)
<form action="your server script" method="post">
<button click="ajax_submit"></button>
Hide
</form>
<script>
function ajax_submit(){
//do some ajax code
//when success
//a.click();
}
</script>
I'm not really familiar with jquery, but am trying to get a simple animated gif to show when a form is submitted. When clicking 'submit' to upload an image I want to show gif so that users know that image is being uploaded. The submit button has an id="submit" and also an onClick="return confirm('message')"
I have the div code containing the gif:
<div id="loading" style="display:none">
<img src="images/hand_timer2.gif" alt="loading" />
</div>
which is hidden. And it does show if I remove the style. Fair enough. But when I try to show it with the following javascript it doesn't show:
<script type="text/javascript">
$(function(){
$('#submit').click(function(){
$('#loading').show();
});
});
I have
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
type="text/javascript"></script>
in a separate PHP header file. As far as I can see it's the only reference to jquery library, but I do have other javascript codes that all work. I just can't get this one to work. Can anyone point out what I'm doing wrong and why I can't get the div to show gif when clicking submit?
I believe the problem could be that your inline onClick="return confirm('message')" prevent the click-event from reaching your click-event listener attached with jQuery - not sure though. Anyhow, instead of listening for a click-event on the submit-button, I would listen for the submit event on the form, that will fire when the form is actually submitted (a form can usually be posted by other means than clicking the submit button as well - through the Enter key for instance).
$('#idOfYourForm').on("submit", function () {
$('#loading').show();
});
Side note:
You don't close the style attribute properly on your loading div (notice that the > is blue):
<div id="loading" style="display:none>