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());
Related
been trying to get comfortable with Spring Boot/Thymeleaf/frontend development in general. I'm currently using a table on the frontend to display a list of objects from the backend, as well as a form to allow users to view properties of each item in the list.
I feel like the way I'm doing this is really weird and feel that there could be a better way. Would appreciate any tips/feedback, thank you.
HTML/Thymeleaf
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Gambler Card List</title>
<link th:href="#{/css/styles.css}" rel="stylesheet" />
</head>
<body>
<h1>Gambler Card List</h1>
<div class="cardlist-wrapper">
<div class="cardlist-names">
<form action="/gambler/cardlist" method="get">
<table class="cardlist-table">
<tr th:each="card : ${cardList.getCardList()}">
<td>
<input th:class="card-btn"
th:attr="id=${{card.getId()} == {currentCard.getId()} ? 'selected' : ''}"
type="submit" th:value="${card.getName()}" name="cardName">
</td>
</tr>
</table>
</form>
</div>
<div class="cardlist-description">
<h4 th:text="${currentCard.getDescriptionTitle()}"></h4>
<p th:text="${currentCard.getDescription()}"></p>
</div>
</div>
</body>
</html>
Controller
#RequestMapping(value = "gambler/cardlist")
public String baseCardList(Model model,
#RequestParam(value="cardName", required=false) String cardName) {
model.addAttribute("currentCard", cardList.getCardByName(cardName));
model.addAttribute("cardList", cardList);
return "gambler/cardlist";
}
Output (need 10 rep to post image, so here's a link)
One potential improvement/simplification is to remove the form and replace the inputs with anchors. The anchors would look something like this (not tested!):
<a th:href="#{/gambler/cardlist(cardName=${card.name})}">
<button th:text="${card.name}"
th:classappend="${card.id == currentCard.id ? 'selectedButton' : 'deselectedButton'}">Card Name</button>
</a>
You can style selectedButton and deselectedButton as you wish.
I want to parse the text in span class with Jsoup.
Here is my Html code portion.
<html>
<head></head>
<body>
<div>
<div class = "abcd">
<span> This is text </span>
</div>
<div>
</body>
</html>
I wrote something like that
Element element = doc.select("div.abcd > span");
System.out.println("Text = "+element.text());
This isn't working. Is there any other way to do this?
Change "div.abcd > span"
to
"div.abcd span"
I have an HTML to parse with Jsoup and I lose track after the HTML's weird structure. I can summarize HTML like this(Every line is one level inside of the above):
<html>
<body class="page3078">
<div id="mainCapsule">
<div id="contentCapsule" class="capsule">
<div id="content">
<div id="subCapsule" class="clearFix" xmlns="">
<div id="contentLeft">
<iframe width="635" height="1000" frameborder="0" src="apps/Results.aspx">
#document
<html xmlns="http://www.w3.org/1999/xhtml">
<body style="background:none;">
<form id="form1" action="Results.aspx" method="post" name="form1">
<div class="pressContent">
<div class="tableCapsule details">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr class="even">
Basically I want to get text inside of the tag with class "even". I tried directly calling class even like this:
doc.getElementsByClass("even")
It didn't work. I tried parent > child relationship with selector method. It didn't work either. I tried this inside of second html tag:
doc.select("body.page3078 > html > body > #form1 > th");
Didn't work either. Where am I wrong?
One comment summarizes the start of a solution here:
As mentioned here you need to get the page from the iframe in a separate jsoup parser. This page isn't weird at all - it's just a separate page is shown in the iframe. – Boris the Spider
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"]');
}
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.