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');
Related
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 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
I have the following code,
http://fiddle.jshell.net/hvLf8yua/
When I click on the image upload button using my mouse, it opens file dialog as expected. However, I couldn't trigger this using JQuery or JS. Could anyone tell me how I can achieve this? What I want is to open the file dialog box when such script is called.
Here is an exmaple snippet you can refer to:-
<script>
function openFile()
{
document.getElementById("dialog").click();
}
</script>
<body onload= "openFile()">
<input type="file" id="dialog" style="display:none">
</body>
I have an image generated from another php page
<img style="margin:9px 0 0 16px;" src="sample.php" width="87" height="59" id="imagid">
a captcha image is created each time.On each refresh a different image is generated.
But what I want is to put a button there which changes the image without refreshing the whole page.
<input type="button" value="refresh" onclick="refresh();">
and the my js code is
function refresh(){
document.getElementById("imagid").src="sample.php";
}
It doesn't work,how to change the image src by js
In your JS code you're trying to change the "src" attribute of the button, you need to apply the id to the image, not the button.
What you need to do is have the following :
<img style="margin:9px 0 0 16px;" src="sample.php" width="87" height="59" id="imagid">
<input type="button" value="refresh" id="imagid" onclick="refresh();">
<script>
function refresh() {
document.getElementById("imagid").src = "sample2.php";
}
</script>
try this
<img style="margin:9px 0 0 16px;" src="sample.php" width="87" height="59" id="imageid">
<input type="button" value="refresh" id="buttonid" onclick="refresh();">
<script>
$('#buttonid').click(function()
{
$('#imageid').attr('src','sample2.php');
}
</script>
The problem could be that image has been cached by browser because of its MIME type.
there are various ways to tackle it,
1)use different page name altogether,sample1.php,sample2.php.....
But you cannot create infinite number of page.
2)Use salting in URL, ie sample.php?rand=1,sample.php?rand?=2....
This rand parameter will keep updating all the time and on each request to server you will generate new image.
There are other advanced ways also ,but this are the one to get started.
Your error is here.You have not assigned id to your image tag and in your js code you are trying by button id.
<img style="margin:9px 0 0 16px;" src="sample.php" width="87" height="59" id="imageid">
function refresh(){
document.getElementById("imagid").src="sample.php";
}
Note :
Make sure you the IDs for button and image tag.No two elements should have same Ids.
Hope this helps...
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
});