I want a loading gif image to appear while processing a servlet. What I do is that before processing the form, I call a JSP which contains an animated gif with a loading image. From this JSP, I send a redirect to the servlet which processes the form.
This only works well in Chrome and in Explorer, but in Firefox the image stops moving.
The action of my form is a JSP which contains the loading image and for submiting the form I have the following code:
var form = document.getElementById('reporteEstadisticoAnualArticulo');
var win = window.open("", "reporte","width=1002, height=700,location=0, menubar=0, scrollbars=1, status=1,resizable=0");
form.target = "reporte";
form.submit();
The JSP contains the following code:
<html>
<head>
<link type="text/css" href="css/Preloader.css" rel="stylesheet" />
<script type="text/javascript">
function retraso(){
var vars = getUrlVars();
var location = document.getElementById("url").value;
window.location = location+"?"+vars ;
cargarImagen();
}
function cargarImagen() {
document.getElementById("cargando").src = "images/Cargando.gif";
return false;
}
</script>
</head>
<body onload="setTimeout('retraso()',500)">
<div align="center" class="Preloader1">
<label style="font-weight: bold; font-family: arial;">Cargando Reporte</label> <br /><br />
<img id="cargando" alt="LogoNatura" src="images/Cargando.gif">
<br /><br />
<img alt="LogoNatura" src="images/logo.png">
</div>
<input type="hidden" value="<%= request.getParameter("url") %>" id="url" />
</body>
</html>
I've tried a lot of things to avoid the image to stop moving, but I haven't found a good answer. If anyone could help, I would be pleased.
This doesn't work with iframes either. Any ideas?
I faced exactly the same issue earlier. And I fixed using IFrames.
First create a HTML file and insert the image there (loading icon). Now using IFrame just refer that file. It works fine in Firefox too. What I did is, if it IE browser, I just replaced the IFrame with image directly.
<td id="tdImgLoad">
<iframe style="height:50px;text-align:right;width:225px" scrolling="no" frameborder="0" src="web/loading.htm" id="imgLoad"> </iframe>
</td>
<script>
if(isIE())
{
getElement ("tdImgLoad").innerHTML ="<img src='images/loading.gif'>";
}
</script>
I already solved my problem. What I did is that I used ajax instead and now my jsp looks as follows:
<html>
<head>
<link type="text/css" href="css/Preloader.css" rel="stylesheet" />
<script type="text/javascript" src="js/acciones.js"></script>
</head>
<body onload="retraso()">
<div id ="reporte">
<div align="center" class="Preloader1" id="loading">
<label style="font-weight: bold; font-family: arial;">Cargando Reporte</label> <br /><br />
<img id='cargando' alt='LogoNatura' src='images/Cargando.gif'>
<br /><br />
<img alt="LogoNatura" src="images/logo.png">
</div>
<input type="hidden" value="<%= request.getParameter("url") %>" id="url" />
</div>
</body>
</html>
An my javascript file acciones.js contains the following function:
function retraso(){
var x = document.getElementById("reporte");
var content = x.innerHTML;
var vars = getUrlVars();
var location = document.getElementById("url").value;
var url = location+"?"+vars ;
xmlhttp = GetXmlHttpObject();
if (!xmlhttp) {
alert ("Browser does not support HTTP Request");
return;
}
var xml = xmlhttp;
xmlhttp.onreadystatechange = function () {
if (xml.readyState == 4) {
x.innerHTML = xml.responseText;
} else {
x.innerHTML = content;
}
};
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
return true;
}
I faced exactly the same issue earlier. And I fixed using setTimeout function!
Of course, ajax could also works well, but what I use is $("#form").submit() instead of ajax, which means that submit is synchronous with the gif image loading process. I think this problem may be due to Firefox's thread process bug(just one suspect). My solution is like the following code:
$.blockUI({ message: $("#loading").html() });
setTimeout(function(){
$("#form").submit();
},1);
Just like the code tells, let form's submit do not interfere with gif loading process and then problem solved!
Thanks for your attention!
I ran into this same issue and solved it by using a variation of the answer given by #Zhl. Instead of wrapping the form submit in a setTimeout call, I wrapped the UI update for the animated gif with a setTimeout. This saved me having to worry about the form submit details which in my case needed to call a server side method (ASP.NET).
<form id="myForm">
<button onclick="myPreSubmitFunction()">Do Stuff</button>
<img id="loading" />
</form>
<script>
function myPreSubmitFunction() {
setTimeout(function () {
//do UI update here which adds gif
document.getElementById("loading").src = "loading.gif";
}, 0);
//submit to come after the UI update
}
</script>
This prevents the gif animation being stopped by the action of the form being submitted in Firefox. As to how running a line of code via setTimeout might make a difference, this SO post is a worthwhile read.
Related
I'm planning to use AJAX to trigger a java servlet method which checks whether an email is already in our system or not. Then when this has completed, if the email is not in our system it will dsiplay an overlay to allow the user to accept the T&Cs, if it is already in the system it will prompt them otherwise.
Being new to AJAX and that though I am confused as to how this done/fail/always stuff works. How can I trigger this emailvalidation method, and how do I then define whether it was successful or not?
You need to the following code to validate email using AJAX:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function emailCheck(){
var email = document.getElementById('email').value;
var xmlhttp=new XMLHttpRequest();
var params = "email="+email;
xmlhttp.open("POST","emailcheck.jsp",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
if(xmlhttp.responseText == '0'){
document.getElementById('msg').innerHTML='Email already exists.';
}
else{
document.getElementById('msg').innerHTML='Email valid.';
document.getElementById('tnc').style.display='block';
}
}
}
xmlhttp.send(params);
}
</script>
</head>
<body>
<form>
Email: <input type="email" name="email" id="email" onblur="emailCheck()" required><div id="msg"></div>
<br>
<div id="tnc" style="display: none;">
<!-- T&C here -->
</div>
</form>
</body>
</html>
The onblur event will call emailCheck() function, which contains the AJAX code to perform the required task. Also note that the email is being sent using POST method.
Your emailcheck.jsp should simply output(or print) 0 if the email already exists.
I trying to do like this:
$("iframe.cke_dialog_ui_input_file").contents()
but it returns:
< #document(gquery, error getting the element string representation: (TypeError) #com.google.gwt.dom.client.DOMImplMozilla::toString(Lcom/google/gwt/dom/client/Element;)([JavaScript object(8570)]): doc is null)/>
But document is not null!
Help me please to solve this problem :(
UPD. HTML CODE:
<iframe id="cke_107_fileInput" class="cke_dialog_ui_input_file" frameborder="0" src="javascript:void(0)" title="Upload Image" role="presentation" allowtransparency="0">
<html lang="en" dir="ltr">
<head>
<body style="margin: 0; overflow: hidden; background: transparent;">
<form lang="en" action="gui/ckeditor/FileUploadServlet?CKEditor=gwt-uid-7&CKEditorFuncNum=0&langCode=en" dir="ltr" method="POST" enctype="multipart/form-data">
<label id="cke_106_label" style="display:none" for="cke_107_fileInput_input">Upload Image</label>
<input id="cke_107_fileInput_input" type="file" size="38" name="upload" aria-labelledby="cke_106_label">
</form>
<script>
window.parent.CKEDITOR.tools.callFunction(90);window.onbeforeunload = function() {window.parent.CKEDITOR.tools.callFunction(91)}
</script>
</body>
</html>
</iframe>
First get the iframe element using javascript like your existing cod and store it into Iframe of GWT
IFrameElement iframe = (IFrameElement) element;
Now use iframe to get content
iframe.getContentDocument().getBody().getInnerText();
Hope it help you to get values.
The contents() method returns the HTMLDocument, so normally you have to find the <body> to manipulate it.
$("iframe.cke_dialog_ui_input_file").contents().find("body");
A common mistake is to query the iframe before it has been fully loaded, so code a delay using a Timer, Scheduler or GQuery.delay(). For instance:
$("iframe.cke_dialog_ui_input_file")
.delay(100,
lazy()
.contents().find("body")
.css("font-name", "verdana")
.css("font-size", "x-small")
.done());
I want to send the url of current page to the servlet without refreshing or reloading the page. here is the code-
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Action Onclick </title>
<!-- <script>
$('#contactForm').submit(function () {
alert('sdafjb');
return false;
});
</script>-->
</head>
<body>
<form id="contactForm" >
<fieldset>
<label for="Name">Name</label>
<input id="contactName" type="text" />
</fieldset>
<fieldset>
<label for="Email">Email</label>
<input id="contactEmail" type="text" />
</fieldset>
<fieldset class="noHeight">
<textarea id="contactMessage" cols="20"></textarea>
submit
</fieldset>
</form>
<small id="messageSent">Your message has been sent.</small>
</body>
My servlet's name is scriptservlet. Please help me...
AJAX was built for communicating with a server without reloading or changing the current page in the browser. You should be able to just create an AJAX call to your server and send your server whatever data you want without affecting the current page.
Under normal circumstances, AJAX calls are restricted to "same origin" which means you can only communicate with a server on the same domain as the current web page so you would also have to make sure that you satisfy this security restriction.
Do an ajax call to the servlet and pass the Url of current page by doing (request.getRequestUri()) to the servlet.
var requestUri = '<% request.getRequestUri()%>';
var hostname = location.host;
$.ajax({
type: "POST",
url: "/scriptServlet",
data: { "host": hostname, "uri": requestUri }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
Please note, syntax might not be correct but u have to make a ajax callt o achieve the result.
This is possible by sending back the appropriate response code (204 I guess) back to the client from the server (servlet). This way even though the request is submitted the page is not refreshed / reloaded.
You could use a hidden field in your form.
<input type="hidden" name="currentPage" value="<%=request.getRequestURL()%>">
I'm building a webapp (using java,spring,freemarker and tiles) with tinyMCE editor.
I've added all files to classpath, everything is on the right place, tinyMCE editor is ALMOST correctly loaded...
There are several fields in my form, text inputs, options, buttons, labels etc... but the problem occurs when I run this form. tinyMCE replaces the whole form, not just textarea and puts that form inside itself - into tinyMCE editor area.
I am following basic installation found here http://www.tinymce.com/wiki.php/Installation
My code is almost the same as here, has more elements in form.
Is there any solution for this? Is this a standard behavior?
I run it on FF 13.0.1 if it matters...
my init code in form.ftl file is:
<#import "../spring.ftl" as spring>
<#assign form=JspTaglibs["http://www.springframework.org/tags/form"]>
<html>
<head>
<script type="text/javascript" src="/resources/tinymce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
height : "480",
mode : "textareas"
});
</script>
</head>
<body>
<div id="content">
<#form.form>
<input type="text" id="title"/><br>
<input type="text" id="author"/><br>
<textarea id="content"></textarea><br>
<button type="submit"/> <button type="reset"/>
</#form.form>
</div>
</body>
</html>
Ok
I've found the solution. The problem was that I had two elements with the same id="content", there was
<div id="content">...</div>
and
<textarea id="content"></textarea>
when I changed it to be unique it resolved the problem.
I am trying to integrate the jQuery Masonry library with my GWT project. However I cannot make the library to work with the containers and elements generated by GWT. But it does work if I rewrite the generated GWT HTML directly in my HTML page.
This how my GWT EntryPoint looks like
public class Sample implements EntryPoint {
//In here the text has random lengths to achieve different div blocks to work with Masonry
private HTML label1 = new HTML("Text..");
private HTML label2 = new HTML("Text..");
private HTML label3 = new HTML("Text..");
private HTML label4 = new HTML("Text..");
private Image image1 = new Image("images/samsung.jpg");
private AbsolutePanel hPanel = new AbsolutePanel();
public void onModuleLoad() {
DOM.setElementAttribute(hPanel.getElement(), "id", "content");
image1.setSize("230px", "400px");
HTML html = new HTML(image1.toString());
html.setStyleName("item");
hPanel.add(html);
label1.setStyleName("item");
hPanel.add(label1);
label2.setStyleName("item");
hPanel.add(label2);
label3.setStyleName("item");
hPanel.add(label3);
label4.setStyleName("item");
hPanel.add(label4);
RootPanel.get("wrapper").add(hPanel);
}
}
I also have a css file declared like this:
#wrapper{
margin: 0 auto;
width: 1000px;
}
.item{
padding: 10px 10px;
width:230px;
float: left;
}
This generates the following HTML code:
<div id="wrapper">
<div id="header">
<h1>JQuery, Masonry, GWT, GQuery Test</h1>
</div>
<div style="position: relative; overflow: hidden;" id="content">
<div class="item">
<img src="images/samsung.jpg" class="gwt-Image"
style="width: 230px; height: 400px;">
</div>
<div class="item" style="">
Text
</div>
<div class="item">text</div>
<div class="item" style="">text</div>
<div class="item"><img src="images/samsung.jpg" class="gwt-Image"
style="width: 230px; height: 400px;">
</div>
<div class="item">text</div>
</div>
</div>
And finally in my HTML page I have the jQuery call which looks like this:
<script type="text/javascript" charset="UTF-8" language="javascript"
src="scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="UTF-8" language="javascript"
src="scripts/jquery.masonry.js"></script>
<script type="text/javascript" charset="UTF-8">
$(document).ready(function(){
$('#content').masonry();
});
</script>
When I execute this GWT application the Masonry library will not work and will not render the expected output. However, when I copy the HTML generated by GWT and paste it directly into the HTML page the library will work correctly and will render the expected output.
I followed this tutorial in the Masonry website http://masonry.desandro.com/docs/intro.html . Can somebody point me out what could be the reason why this does not work with the GWT generated HTML??
At the time of your document ready the entrypoint has not been executed yet. So the DOM is not there yet.
To avoid this problem you could just use GWTQuery instead or call javascript from gwt signaling your DOM update. This would look something like this:
JavaScript:
function domUpdated(){
//do you jquery stuff here...
}
GWT:
private native void tellJavascriptWeAreDone()/*-{
$wnd.domUpdated();
}-*/;
Looks like the #content-tag doesn't exist yet on document.ready. Just try to stop the program there (debugger?) and check what is generated as HTML.
Could be that the ready-event is also the start point of the javascript GWT generated, and then the id could be set later :)
Sometimes this works.
$(window).load(function() {
// executes when complete page is fully loaded
//including all frames, objects and images
var class1 = $('textarea[name="class1_members"]');
var class0 = $('textarea[name="class0_members"]');
}