I know you can open a new browser window using the Window.open() function directing it to a specific URL. However, is it possible to open a new browser Window containing a GWT Panel? And if it is, can someone show an example of it?
Here's my idea. I implemented it in pure JavaScript, but if it's possible in JS, it should also be possible with GWT!
parent.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Parent page</title>
<script type="text/javascript">
function openChild() {
window.mychild = window.open("print.html");
setTimeout('setContent();', 2000);
}
function setContent() {
window.mychild.document.body.innerHTML =
'<b>Here is your dynamically generated print content</b>';
// This could be produced by your main GWT module.
}
</script>
</head>
<body>
Open child window
</body>
</html>
print.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Print view</title>
</head>
<body>
One moment please...
</body>
</html>
Note, that I used a timeout. This isn't ideal, because if the (very small) print.html takes longer to be fetched, then it will overwrite the dynamically set content.
I assume, the solution could be optimized (but make sure that the child window is fetched from the same origin, otherwise you'll run into "Same Origin Policy" problems).
Related
I'm having quite a mistery and I have no idea where to start searching or what for. Problem is that my edit page for selected item does not load css, while practically same page for adding the same item loads just fine. I went to check differences with diff check just to make sure and I can't find it. Is it possible because it is /id of item that somehow CSS is not getting loaded?
To be more clear. On edit page Bootstrap does load but my CSS does not. If needed, let me know if I need to provide pictures.
Controller add part:
#RequestMapping(value = "/newcontactor", method = RequestMethod.GET)
public ModelAndView contactorFormNew() {
ModelAndView mav = new ModelAndView("ContactorFormNew");
Contactor c = new Contactor();
List<Manufacturer> miro = serviceManu.listManufacturers();
mav.addObject("contactor", c);
mav.addObject("listManufacturers", miro);
return mav;
}
Controller edit part:
#RequestMapping(value = "/contactors/{id}", method = RequestMethod.GET)
public ModelAndView fuseForm(#PathVariable Integer id) {
ModelAndView mav = new ModelAndView("ContactorForm");
Contactor c = serviceContactor.getContactorById(id);
List<Manufacturer> miro = serviceManu.listManufacturers();
for (int i = 0; i < miro.size(); i++) {
if (miro.get(i).getName().equals(c.getManufacturer().getName())) {
miro.add(0, miro.get(i));
miro.remove(i + 1);
}
}
mav.addObject("contactor", c);
mav.addObject("listManufacturers", miro);
return mav;}
Edit html (not loading CSS):
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Contactor Editor</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="Style.css"></link>
</head>
Add html(loading css):
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Contactor New</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="Style.css"></link>
</head>
Yes, it's looking for your css in the wrong page when editing (because of the extra / in the url when editing:
On /newcontactor it's looking for the CSS in /Style.css
On /contactors/{id} it's looking for the CSS in /contactors/Style.css
I think changing <link rel="stylesheet" type="text/css" href="Style.css"></link> to <link rel="stylesheet" type="text/css" th:href="#{/Style.css}"></link> should fix this. (This does depend slightly on how your context/servlets are setup.)
(And you should be debugging this kind of stuff by watching the network tab in your browser's developer tools. The network tab would clearly show a 404 when trying to load Style.css.)
i have a very simple layout where i have three icons in the right side of the HTML page and have hard coded the Heading in the middle.
I am giving the size of heading in percentage :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<img src="images/upload.png">
<img src="images/render.png" class="menuc">
<div style="width: 100%;text-align: center;position: fixed;z-index: 100;background-color: #C2C2A3;height: 100%">
<span id="cannvasfilename" style= "position:fixed;left:40%; z-index: 100; color:#3C3C41; font-weight:bold; background:transparent;font-size: 200%;">Filename:Meshworks Test</span>
</div>
</body>
</html>
its a very simple page and u can see the layout using the link Test.
But when i am opening this HTML page in the browser , the icons shrinks and the heading also comes in small size.
So my question is that is there any way to set the size so that it automatically takes the page length and width and then set the size of the heading and the icons. ???
I am already giving the text size in percentage so i thought this will do the task. but no !
NOTE : you can check the link i have given. Its just a sample so don't see the alignments. Only the size variance is a issue.
It will come properly in your browser but try and open the link in your mobile phone browser. That is the issue !
What simple change i can do in the code to solve this problem ?
Okay, I'll answer my own question and close this question.
I used HTML meta tag in the head and the issue is solved.
<meta name="viewport" content="width=device-width, initial-scale=1">
It might help someone with the same problem!
I have created a website that intensively use Ajax to load its contents.
I want the pages I select to load on AJAX but at the same time the URL also changes without reloading the whole page content. How would I achieve that? I've googled already but my search did not yield any results.
Let's say I have this page:
<%# taglib prefix="s" uri="/struts-tags"%>
<%# taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<sj:head />
</head>
<body>
<h5>Struts Jquery Ajax Integration </h5>
<div id="resultContent"></div>
<noscript>Please Turn On Javascript to make the full use of this site</noscript>
<h4>Choose A task</h4>
<ul>
<s:url value="views/ajaxvalidation.jsp" var="ajaxvalidation" />
<li><sj:a targets="resultContent" href="%{ajaxvalidation}">Ajax Validation </sj:a></li>
</ul>
<div>
<h6>Play A Music while You Navigate</h6>
<audio src="x.mp3" controls>Your browser does not support the
audio element.
</audio>
</div>
</body>
</html>
I clicked the Ajax Validation link. it will not reload the page but however the url would be something like this:
localhost:8090/AppName/ajaxvalidation.jsp
or this:
localhost:8090/AppName/ajaxvalidation.action
How would I achieve such a goal?
Note that I am using this plugin: struts2-jquery
You need to use the History API
window.history.pushState(data, title, url)
Update
Noticing that you use struts2-jquery you can add ajaxhistory="true" to enable the build in ajax history functionality. See http://code.google.com/p/struts2-jquery/wiki/HeadTag#Attributes
<sj:head ajaxhistory="true" />
Keep in mind, though, that it is not supported in all browser versions..
You can use history.pushState if the browser supports (read < IE10)
var boolPushState = false;
if (typeof history.pushState !== "undefined") {
boolPushState = true;
}
if (boolPushState) {
history.pushState(null, null, "URL");
}
I have a file, containing czech text common file split to two lines:
<html>
<head>
<meta http-equiv="contet-type" content="text/html; charset=UTF-8"/>
</head>
<body>
<p>Běžný</p>
<p>soubor</p>
</body>
</html>
When I load this file to JEditorPane using HTMLEditorKit and then save it (like having it edited), the underlying model (HTML code) is changed to:
<html>
<head>
<meta http-equiv="contet-type" content="text/html; charset=UTF-8"/>
</head>
<body>
<p style="margin-top: 0">Běžný</p>
<p style="margin-top: 0">soubor</p>
</body>
</html>
Is there some way to get out of margins and entities? Must I inevitably override some methods of HMLEditorKit?
PS: Is there some another embedable (and free) simple Java HTML (WYSIWYG-like) editor? But I need to handle some special tags from my own XML-namespace. (Ideally HTML 4.0 compliant.)
Please use Net Beans IDE 7.0.
Downloads free
http://netbeans.org/downloads/
i am creating a web project using JSP, and is trying to implement a simple search for users from my database using jquery autocomplete, however i am having trouble understanding how it works. i have little to no knowledge on jquery and ajax just to let you know. i have done the following code and am stuck.
<%#page contentType="text/html" pageEncoding="UTF-8" import="ewa.dbConnect,ewa.sendEmail,ewa.pwGen,ewa.hashPw,java.sql.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
<script src="js/jquery.autocomplete.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<input type="text" id="search" name="search"/>
<script>
$("#search").autocomplete("getdata.jsp");
</script>
</body>
</html>
getdata.jsp
<%#page contentType="text/html" pageEncoding="UTF-8" import="ewa.dbConnect,java.sql.*" %>
<%! dbConnect db = new dbConnect(); %>
<%
String query = request.getParameter("q");
db.connect();
Statement stmt = db.getConnection().createStatement();
ResultSet rs = stmt.executeQuery("SELECT username FROM created_accounts WHERE username LIKE "+query);
while(rs.next())
{
out.println(rs.getString("username"));
}
db.disconnect
%>
if i am not wrong i read from a website, the parameter q is default and is just there, however how do i display the data? how do i pass the values from getdata.jsp into the autocomplete?
You're calling the autocomplete script tag before jQuery has been included. So, not having jQuery to latch onto (as the jQuery object hasn't been defined), nothing from the jQuery autocomplete plugin will load.
You have
<script src="js/jquery.autocomplete.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
It should be
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/jquery.autocomplete.js"></script>
Reverse the order, and the Firebug errors you mentioned should disappear; I'm not sure it'll solve everything, but nothing will work until that's resolved.
I don't see jQuery UI being included (that one provides the autocomplete functionality)
http://jqueryui.com/demos/autocomplete/
So you need to include jquery.ui.autocomplete.js
(Or are you using the plugin autocomplete? if so, move to the jquery UI version)
Could also be that the data from getdata.jsp is malformed for the use in autocomplete.
How you tried debugging the javascript in a browser such as chrome or in firefox(with firebug)
I usual give (for jquery UI autocomplete) a JSON formatted answer, while I see your answer loop give a CR delimited list.
In getdata.jsp instead of produce:
jim<cr>
jack>cr>
jhon<cr>
try to return:
[{label: 'jim', value: 'jim'}, {label:
'jack', value: 'jack'}, {label:
'jhon', value: 'jhon'}]