I've a jsp page which internally calls few java classes before it renders the content on the browser. The whole process is taking 1-2 minutes, so I want to show some progress bars or animations (preferably progress bar). Have gone through few posts in Stackoverflow and couldn't get much.
Have tried pace.js and few javascript and jquery techniques but couldn't get the desired effect.
It would be great if someone here help me with some ready made code snippets or the links or some tricks which help me in solving this problem.
Note: I've not used any servlet, completely used scriptlets .
Thanks in advance.
The easiest way to add a simple loading item to the page is with a gif image. I would use jQuery to show the gif and when the content is ready hide it.
I found this snippet, it could be helpful: http://jsfiddle.net/msjaiswal/FAVN5/
.loadinggif {
background:url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif') no-repeat right center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='inputsource' />
<br>
<button onclick="$('#inputsource').addClass('loadinggif');">Show Loading</button>
<br>
<button onclick="$('#inputsource').removeClass('loadinggif');">Hide Loading</button>
I've got one on my JSP.
<form enctype="multipart/form-data" name=uploadSapFile action="sapFileUploader.jsp" method="POST" onsubmit="block();">
<table border=0 width="50%">
<tr>
<td colspan="2" align="center"><input id="process" type="submit" value="PROCESS"></td>
</tr>
</table>
<img id="ajax-loader" src="../../../images/ajax-loader.gif" style="display: none;" />
<script type="text/javascript">
function block() {
// This will add a "processing" animation while the system is busy with the file and also makes a "PROCESS" button deselected
document.getElementById('ajax-loader').style.display='block';
}
</script>
</form>
U are interested in the first line where onsubmit form action is performed, img tag and javascript function and process button.
And big choice of nice animations here
Related
I am working on a jquery mobile app and have a problem with binding an on-change event to a file input element. The event fires correctly the first time I visit page1.php. But after visiting another jquery site (page2.php) and than comming back to page1.php the event does not fire (as I debugged with inspect-tool of chrome, the event is not even bound the second time I visit page1-php).
I have also tried different page events for binding the event as described in http://www.gajotres.net/page-events-order-in-jquery-mobile
and http://www.gajotres.net/prevent-jquery-multiple-event-triggering/
Here is the code of the page1.php:
$(document).on('pagebeforeshow', '#serialSelect', function(){
$("#qrImageSelect").off('change', '#qrImageFile').on('change','#qrImageFile' , function(){
var selectedFiles = $('#qrImageFile')[0].files;
serialNumber = readSerialNumber(selectedFiles);
window.location.href = "page2.php?sn="+serialNumber;
});
});
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<form id="qrImageSelect" class="ui-btn ui-body ui-body-a ui-corner-all ui-icon-plus ui-btn-icon-left fileinput-button" accept-charset="UTF-8">
<span>QR code</span>
<input type="file" name="qrImageFile" data-role="none" id="qrImageFile" />
</form>
page2.php (same jquery version)
<a href="page1.php" data-role="button" class="serial-model-button">
Why is the event not bound when coming back to page1?
I would appreciate any help :)
Edit:
Some background information: I would like to load a picture of a QR code. The QR code contains a serialNumber. Depending on the serialNumber i want to load a relating page. It should be possible to get back from this site to scan a new QR code. Sombody have an idea to solve that problem in a different way?
I finally found the cause of the problem:
When clicking on the link on page2.php, jQuery is actually just getting the contents of the first data-role="page" div and inserting that into the current page (page2.php). This is the default AJAX navigation (http://demos.jquerymobile.com/1.4.5/navigation-linking-pages/)
So the script in page1.php (which actually stands in the html-header) is not run at all.
There are two solutions:
If you want to keep the AJAX navigation so you get nice page transitions, then move the script within the data-role="page" DIV.
I prefered the other option: Prevent AJAX navigation by adding data-ajax="false" to your links.
<a href="page1.php" data-role="button" class="serial-model-button" data-ajax="false" >
I'm new to Wordpress and new to JQuery, so let me start off explaining what I am trying to do.
I have an admin page, inside this page I'm giving the user the ability to upload an image. I want this done using Ajax (independent from the general form update).
Here is the code I have so far:
At top of page - script includes:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js">
I can confirm these scripts are "pingable" and work.
Now the HTML code :
<table width="100%">
<tr>
<td width="100" style="padding:10px" valign="top">Email Image (180x180):</td>
<td style="padding:10px"><img id="previewEmailImage" width=180 height=180>
</td>
</tr>
<tr>
<td></td>
<td>
<div id='emailpreviewloader'>
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<form id="imageform" method="post" enctype="multipart/form-data" action="/ajaximage.php">
<input type="file" name="photoimg" id="photoimg" />
</form>
</td>
</tr>
</table>
The key things in the HTML is a) a form and b) The div emailpreviewloader.
Now just after the html table, inline I have the following js:
<script type="text/javascript">
$(document).ready(function()
{
$('#photoimg').live('change', function()
{
$("#emailpreviewloader").html('');
$("#emailpreviewloader").html('<img width="180" src="/loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm(function(result)
{
alert("Thank you for your comment!");
});
});
});
</script>
for testing purposes ajaximage.php just contains 1 line: Echo "It worked";
So assuming I've done my job right, and the html + js above is correct, it would seem Wordpress might be hijacking the Ajax somehow and preventing it from working as expected. Is this possible?
All I want to do is have a regular Ajax post, how is this possible?
EDIT:
What is working:
The change event for the file upload control is firing. I've confirmed this with an alert, and the loader.gif is visible. But it would seem the form isn't firing, or not firing correctly. The inner alert, never fires.
If you don't want to use wordpress's functions for ajax calls, try sending the form to action="<?php bloginfo('template_url');?>/ajaximage.php" and make sure the file is in the root of your wordpress instalation.
Can an onsubmit event insert an image into the page before the page submits/transfers control to the next page?
I am using classic asp.
Of course. The function resolves before the form is submitted.
(Although… while an img element may be inserted into the page, it might not load before the browser has gone to the next one, and even if it does, the user might not have time to see it clearly)
Yes . You can insert the HTML code (through javascript):
<img src="imgsrc">
But it takes a little time for loading the image. The form send the user to another page in new window or in the same window? Why would you want to insert an image in the current window if the page will be replaced with the new one?
Yes you can do this. It would be easier (for me to write) if you used jquery:
html:
<form id="myForm" action="">
<input type="text" id="someId" />
<input type="submit" id="submit" value="submit" />
</form>
and then JavaScript would be:
$(document).ready(function() {
$("#myForm").submit(function() {
$(this).append('<img src="someImage.jpg" alt="" />');
});
});
http://jsfiddle.net/rYUbQ/
But like others have said it might not be loaded and displayed before the form submits so you might want to instead look in to preloading the image and then just setting it to visible before the page submits.
This is a sample of my form. when the page loads the focus must be on 'fbox' but it dosent work and i don understand why. the form contains a niceditor but i dont think that is the problem
<html>
<head></head>
<body onload="document.form.fbox.focus();">
<body>
<form method='post' action='' name='form' >
Headline <input name='fbox' type='text' class='form' id='box' autocomplete='off' size='80'><br>
Your text</font><br><script type="text/javascript" src="nicEdit.js"></script><script type="text/javascript">bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });</script>
<textarea name="description" style="width: 100%; height:200px;"></textarea></p>
<p><select name='catg' >
<option value='' selected >Select category</option>
</select>
<input type="submit" id='button' name="Submit" value="Submit" class="button"></form>
</body></html>
thanks
You've got two body tags. I suggest getting rid of one of them and seeing if that helps.
There's also a stray closing </font> tag in the middle of that code. Many people try to arrange their markup so that it's easy to read and to see the structure of the document. You might want to explore that practice.
Another possibility is that your "nicEdit" plugin is un-doing the ".focus()" call. Try taking that out and seeing if the focus works (as an experiment). If that's happening, then you can do your "focus()" call after the nicEdit code has finished:
bkLib.onDomLoaded(function() {
nicEditors.allTextAreas();
document.form.fbox.focus();
});
(That's an adaptation of the code in your existing <script> block.)
You have two body elements. That won't work.
Scripts run top-to-bottom, so you're firing the "onload" before the rest of the page has rendered. It's likely the element you are trying to focus is not there when the event fires.
There are a number of ways to fix this. jQuery has a handy method that waits until the DOM is ready.
A simple way is simply to run your script from the bottom of the page in a script block.
<script type="text/javascript">
document.form.fbox.focus()
</script>
Hello Friends
I want to upload a image but according to requirement when click on button a pop window display and inner part of pop window display browse field using code something like
<form action="index.php" method="post" onsubmit="">
<div><label>Name:</label> <input type="text" name="form[name]" /></div>
<div><label>File:</label> <input type="file" name="form[file]" /></div>
<div><input type="submit" value="SUBMIT" /></div>
</form>
actually i want to show this browse field in pop-up window.
Please reply me regard this
Thanks
Just give a myform ID to your form hide it, using display:none; and try this code
Show Browse
UPDATE
I have created a demo of what you wanted. Check it here http://jsfiddle.net/Starx/rVw9M/
Since you are unfamilier with jquery, you need jquery library for this to run put this in your head (HTML Pages' Head :D)
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
Basically, here is how you could achieve that (just off the top of my head):
a) Create a new separate page and move your code into this page
b) On the existing page create a DIV and add IFRAME into it which would be pointed to that new page, e.g.
<div class="uploader" style="display: none;">
<iframe scrolling="no" style="width: 100%; height: 100%;" src="url"></iframe>
</div>
c) Download and add some modal popup plugin - personally, I prefer SimpleModal
d) Now you can show your popup by calling modal() method on the .uploader class, something like this..
Show Uploader