We Keep Coding

How to convert this for velocity template?

I have html content. I want to convert it to velocity template. Please provide the steps to be taken to convert it to template.
I need to insert the html in database also.
Following is the html :
<div class="divNumberFilter">
<div class="divLabel" style="width: 70px;">Number:</div>
<div class="divInputField">
<input id="$tags.searchStandard" type="text" style="width: 100px;">
<script src='<s:url value=""></s:url>' type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
addOnload(grouping());
addOnload(initilizeStandardAutoComplete());
</script>
</div>
<div class="clear"></div>
</div>
<!-- Standard Description filter -->
<div class="divDescriptionFilter">
<div class="divLabel" style="width: 70px;">Description:</div>
<div class="divInputField">
<input id="$tags.standardFilter" type="text" style="width: 318px;">
<script src='<s:url value=""></s:url>' type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
addOnload(grouping());
addOnload(initilizeStandardDescAutoComplete());
</script>
</div>
<div class="clear"></div>
</div>
<div id="standard_list" class="selection_property_div" style="padding-bottom: 5px;">
</div>
Please help..

Okay first of all, to convert this into a Velocity template, you must have an idea what you EXACTLY want to do. That's step 1.
Then start writing the code in a velocity template file. Figure out what part would be dynamic, i.e., would be rendered by the Velocity Template Engine., which I guess you already know.
<input id="$tags.standardFilter" type="text" style="width: 318px;">
Inserting it into database.
You would need a table structure like this.
create table if not exists Templates (
template_file_name varchar(50), --The column to store the name of templates.
html mediumblob, --The column which actually has the velocity templates.
lastmod timestamp --The column which contains the last modification information.
);
Then use the DataSourceResourceLoader and configure it (please read Velocity Docs for reference).
Make a VelocityEngine out of the configurations of the DataSourceResourceLoader.
have FUN.
--Cheers, Jay.

jquery 2 different slide toggle doesnt work properly

Hey I'm completley new to jquery and java.
As shown in the picture I have two texts that slides down which have to work separate, but the right one doesnt work properly.
http://s7.directupload.net/file/d/3485/3xjuqtbh_jpg.htm
Here my jquery code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
</script>
<script>
$(document).ready(function(){
$("enter").click(function(){
$("pi").slideToggle();
});
});
</script>
and my HTML code:
<div id="Max Mustermann">
[...]
<p style="display:none;">Hallelulja</p><button>Read more...</button>
</div>
<div id="Max Mustermann 2">
[...]
<pi style="display:none;">Hallelulja</pi><enter>Read more...</enter>
</div>
How does the code have to look that the right one work properly?
Thanks for every Help!

1) Try giving your p and button some id or class , so that it would know which element to toggle
2) change your pi and enter to p or button tag
3)Only one $(document).ready fucntion is required. Put all your scripts into that.
4)You can also try giving display:none using CSS class.
5)If there are gonna be many number of slideToggle() functionality, rather than writing it for each button , you need to write the code generically.
Please see the edited code below
HTML:
<div id="Max Mustermann">
[...]
<p id="para-1" class="displaynone">Hallelulja</p>
<button id="button-1">Read more...</button>
</div>
<div id="Max Mustermann 2">
[...]
<p id="para-2" class="displaynone">Hallelulja</pi>
<button id="button-2">Read more...</button>
</div>
CSS:
.displaynone{display:none;}
Script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button-1").click(function(){
$("#para-1").slideToggle();
});
$("#button-2").click(function(){
$("#para-2").slideToggle();
});
});
</script>

How to get content of iframe using GWT Query?

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

tinyMCE replaces whole form not only textarea

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.

Gif loading stops in firefox

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.