how load function behaviour in jquery - javascript

i have html code and jquery to show and hide a form based on image loaded or not loaded like this
...
<title>Untitled Document</title>
</head>
<script type="text/javascript" src="bootstrap/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#image11")
.load(function(){
alert('oke1');
$("#upload1").hide();
$("#image21").hide();
})
.error(function(){
alert('oke2');
$("#image11").hide();
$("#upload1").hide();
$("#image21")
.load(function(){
alert('oke3');
$("#upload1").hide();
$("#image11").hide();
})
.error(function(){
alert('oke4');
$("#upload1").show();
$("#image21").hide()
$("#image11").hide();
});
});
})
</script>
<body>
<div class="col-sm-5 col-xs-7">
<img src="foto_peserta/tes.jpg" width="100" id="image11" alt="tes"/>
<img src="foto_peserta/cek.jpg" width="100" id="image21" alt="tes2"/>
</div>
<div id="upload1">
<form method="post" name="form1" action="<?php echo $editFormAction; ?>" enctype="multipart/form-data"><img id="previewHolder" alt="Foto" width="100px" height="100px"/> <p>
<input type="file" name="foto_peserta" id="foto_peserta" required>
<p class="help-block">maximum image size is 50 kB,only JPG, JPEG, PNG & GIF files are allowed</p>
<button type="submit" class="btn btn-success">Upload Foto</button>
<input type="hidden" name="MM_update" value="form1" >
<input type="hidden" name="id_personal" value="<?php echo $row_foto_peserta_tampil['id_personal']; ?> ">
</form></div>
</body>
</html>
I just confused why every time i refresh the page (when my image21 is load and my image11 not loaded) the alert ('oke2') prompt but not with alert('oke3'), is anything wrong with my code?

The load function you are talking about is deprecated since jQuery 1.8:
http://api.jquery.com/load-event/ (see the category of the article)
jQuery or Javascript check if image loaded
In later versions only one .load() function is left into jQuery, to avoid ambiguity, it is used to load data from another source http://api.jquery.com/load/ for example if you need to load text coming from your server into a div in your page.
You can check if an image loaded by using
$('img.mustLoad').on('load',function(){
/* Fire your image resize code here */
});
This very complicated snippet is taken from the currently second answer of the question i posted above so credit is due to "Alex W". This should work with every version of jQuery
to handle loading errors you need to use a separate event
$('img.mustLoad').on('error',function(){
/* Fire your image resize code here */
});
So you need to edit your code accordingly

Related

Show Loading Gif On Click Submit Button

i am using upload picture plugin for my website and when users click on submit on mobile devices they can't see any progress so they click submit button again and again and i get too many same posts, i want to show loading gif image when they click on submit button , this is the plugin form
<form id="usp_form" method="post" enctype="multipart/form-data" action="">
\\rest code here
<input type="submit" class="usp-submit" id="user-submitted-post" name="user-submitted-post" value="<?php esc_attr_e('Submit Post', 'usp'); ?>">
</form>
and i have tried this found on stack but it didn't work
<img src="https://www.punjabidharti.com/wp-content/plugins/wp-email/images/loading.gif" id="img" style="display:none"/ >
<script type="text/javascript">
$('#usp_form').submit(function() {
$('#img').css('visibility', 'visible');
});</script>
and here is my upload pictures url
https://www.punjabidharti.com/upload-pictures/
hope you can help me out
Use a div with display: none inside your layout file and make it display:block when needed
<div style="z-index: 5000; display:none;" id="loadingDiv">
<table style="margin: 0px auto;">
<tr>
<td style="padding-top:200px;" align="center"><img src="https://www.punjabidharti.com/wp-content/plugins/wp-email/images/loading.gif" alt="loading image"/></td>
</tr>
</table>
</div>
$('#usp_form').submit(function() {
// javascript way
document.getElementById("loadingDiv").style.display = 'block';
// jquery way
$('#loadingDiv').show();
});
Update
layout level files can be any of following:
layout.html
index.html
header.html
footer.html
You may try another gif image for example https://i.stack.imgur.com/rBLb3.gif
You've added 'style="display:none"' in your img but in code you're doing:
$('#img').css('visibility', 'visible');
You should do:
$('#img').css('display', 'inline-block');

problems using google invisible recaptcha icon

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.

Document Ready, Fancybox and Ajax unable to open fancybox

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.

Hide/Show Load function not working

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
});

How can I cancel/stop uploading of a file in IE javascript

I have a page with two forms. One of them is not visible and contains input type="file". I am uploading file with the hidden form(target of the form is an iframe element). My question is how to stop/cancel uploading of the file with javascript under IE. I have tried to remove the hidden form with JQuery and the file is still uploading.
Thanks in advance.
OK. I found this site looking for the same thing but these solutions did not work for my scenario. I too have an iframe target for my form and wanted to cancel the upload. These solutions did not work for some reason (IE7). I hope the following helps.
The issue was that the response sent from the servlet indicating 'file too big' was not triggering the target iframe onload event.
Try:
targetIframe.contentWindow.document.open()
targetIframe.contentWindow.document.close()
This fooled the iframe onload event into triggering and cancelled the upload automatically.
You probably want something along the lines of window.stop() (applied to the iframe).
This old thread reports that while window.stop() doesn't work in IE, the undocumented window.document.execCommand("Stop") does (at least in IE5).
You might also consult this StackOverflow page, which has basically the same answer, although a few other tricks are proposed.
Thanks for the replies.
As far as I debugged that case I got the following result :) - it is not possible to cancel upload. The methods above cancelled the page to receive the response and the file is uploading to the server side.
Here is the mark up of my prototype:
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
<input type="button" id="button1" value="stopUpload" onclick="stopUpload()"/>
<script type="text/javascript">
function stopUpload() {
var frame = $get("iframe1");
frame.contentWindow.document.execCommand("Stop");
}
</script>
</div>
</form>
<form id="form2" enctype="multipart/form-data" action="http://localhost/TestingSite/Default.aspx"
method="POST" target="iframe1">
<input type="submit" />
<input type="file" name="FileUploadTest" id="FileUploadTest"/>
</form>
<iframe id="iframe1" name="iframe1" width="500px" height="500px" ></iframe>

Categories