I have the following code in a JSP page:
<c:forEach var="widget" items="${widgets}">
<p><h2>Widget</h2></p>
<p>IDType: ${widget.id}</p>
<p>Name: ${widget.name}</p>
</c:forEach>
At the moment it is only text that will be displayed, but in the future there will be charts and images as well.
I would like to use asynchronous loading, so the page doesn't have to wait on the largest images/charts.
On the internet I found tutorials for Java code, but not for JSP pages. What is the best way to implement asynchronous loading in JSP pages?
Thanks!
Simply generate these images and charts separately using different servlet:
<c:forEach var="widget" items="${widgets}">
<p><h2>Widget</h2></p>
<p>IDType: ${widget.id}</p>
<p>Name: ${widget.name}</p>
<img src="chart-servlet.png?id=${widget.id}"/>
<img src="image-servlet.png?id=${widget.id}"/>
</c:forEach>
On the server side map some servlets to chart-servlet.png and image-servlet.png. You can then use id parameter to generate appropriate chart or image. From the browser perspective it first renders DOM without images to then ask server for external resources (images).
Related
I'm trying to scrape a .jsp webpage with Jsoup. The page I'm trying to scrape is basically a 6 steps form, filling each form takes me to another one but to do so I must click a button that calls a jsp function. I don't know how to do so with jsoup.
So here is a piece of the jsp page I'm trying to scrape.
<img id="nextButtonId" onkeypress="disableButtons(this);onIntroductionFormSubmit()" height="50"
alt="suivant" title="suivant" src="/eAppointment54-etrangers/element/images/buttons/next.gif"
**onclick="disableButtons(this);onIntroductionFormSubmit()"** onmouseover="downNextSrcPicture(this);"
onmouseout="upNextSrcPicture(this);" style="display: block;">
I want to call the onclick methods onclick="disableButtons(this);onIntroductionFormSubmit(). Maybe there is a way I can do this without having to simulate the actual clicking.
Thanks in advance !!!
Jsoup is not a browser engine, it is just an HTML parser/writer. To do such a thing you should do one of these, I recommend the first one:
Implement the method yourself (it's probably just an HTTP call)
Use an automation library like Selenium (no experience)
(Not recommended) Run a full browser environment such as JavaFX WebView and inject code to do the action.
I have a JSP file in which there are two textareas and a submit button all in a form ;
<form action="" method="post">
<textarea name="inConsole" id="in" cols="100" rows="10"> </textarea> <br/>
<input type="submit" name="Send Command"/> <br/>
<textarea name="outConsole" id="out" cols="100" rows="10"></textarea>
</form>
this page is supposed to work like any SQL program. so the user types a command in the first textarea and clicks submit, then the value of textarea will be extracted to a field and a method will take care of the command and return a log (1 row inserted, error:bad syntax etc) which will be displayed in the second textarea.
I know how for example make a login page and send data and redirect user to a new page(new jsp) file if user pass is correct.
what I can't find is how can I do all the things that I said above without going to a new page while using form action.
I have checked other questions that linked the action attribute to a servlet which was confusing for me( the way that a servlet was called). I'm looking forward to use a simple scriptlet for this purpose like the one I used for my login page:
<%
DatabaseLoginTest dbLogTest = new DatabaseLoginTest();
if (dbLogTest.DBLoginChecker(request.getParameter("user"), request.getParameter("pass")) == true){
%>
<p>Login Successful</p>
<% } else { %>
<p>Login Failed</p>
<% } %>
also I'm aware that adding java scripts(not Javascript scripts:) ) to html isn't a good practice(and the reasons for it) but I think this might be easier for a simple program that I'm working on.
p.s: I'm using tomcat and Intellij for developing this web application
and I have made a custom SQL so I only need the code that gives me the textarea value and the one that sets the other one's value
Update: now I know I should use javascript but I don't know how can I send the data extracted by javascript to a java method.
If you want to do this while remaining in the same page, you have to use Javascript. This is because if you want the server to be able to re-render the page, there has to be a page refresh.
You would need to write onClick handler for the submit button and make a Ajax call to your server to a specific URL with the user input. This URL would serve the data needed for the necessary UI changes.
You can use a scriptlet to generate the HTML that would be shown in the webpage but this would only suffice for a simple use-case and it would be a lot simpler if, say, your service returned just the data required to make the UI change and actual UI change is handled by the JS.
Also,I don't think it is a bad practice to embed JS in HTML. Sure, you can optimize this by including a JS source file but that's a separate optimization.
I am working on an application that allows users to enroll in my program. My problem is that at the end of enrollment I generate a PDF for them to look over and accept the terms and e-sign. Sometimes the PDF server fails to stream and when that happens the iFrame just contains the alt text for the images. Is there a way to look into the iFrame and see if the images of the PDF are there or the alt text is there. That way I can keep them from proceeding and display an error message.
One Jsp looks like this
<c:forEach items="${images}" var="src">
<img src="${src}" alt="Image" />
</c:forEach>
This Jsp calls a generate function which makes the pdf and turns them into images which then saves them to a remote server. The controller then returns the first jsp as the view which should populate the iFrame.
<div id="image">
<img id="loading" src="/blah/resources/images/loading.gif" />
<iframe style="width: 775px; height: 600px; display: none"
src="blah/blah/pdf/generateImages?product=<c:out value="${fn:toLowerCase(enrollmentConversation.product.textKey)}" />&state=<c:out value="${stateCodeAbbreviation}" />&pdfGuid=<c:out value="${pdfGUIDForLookup}" />&sizeType=775/p2"
id="pdfIframe"
onLoad="jQuery('#pdfIframe').show();
jQuery('#loading').hide();
jQuery('.hideWhileWaiting').show();">
</iframe>
</div>
So is there a way to look at the iFrame and say does this contain the images or does it contain alt text="Images"?
Your iFrame can be another application which is cross-domain (or same application on same domain).
When you create pdf and converts them in to images, I suggest you to write SUCCESS/FAILURE entry in database.
Then from your calling application, using AJAX database call, you can easily figure out whether pdf->image was generated successfully or not.
Our team built a custom portlet to load Google markers onto a map. The markers are created in the template script. We now would like to display these markers in another asset publisher in a list like format. Is there anyway to pass a conditional to the template file depending on the portlet that is requesting it? Or alternatively are there any good methods for building this code into the jsp rather than the template file?
//code that creates the markers on the full map
gmarker=new google.maps.Marker({position:new google.maps.LatLng("$Lattitude.getData()","$Longitude.getData()"),title:"$reserved-article-title.getData()",icon:gicon,map:map});
if(window.location.href.indexOf("fullmap") > -1) {
google.maps.event.addListener(gmarker, 'click', function() {
new google.maps.InfoWindow({content:
'<div id="node_content">
<div id="siteNotice"></div>
<h3 id="firstHeading" class="firstHeading">$reserved-article-title.getData(), $City.getData(), $Country.getData()</h3>
<hr class="m_spacer"/>
<div id="bodyContent">
<p class="gdes">$Description.getData()</p>
<img class="m_image" src="$Image.getData()"/>
</div>
</div>'
}).open(map,this);
});
}
gmarker.setMap(map);
//redirect code that opens the infowindow on load if the id paramater is not null
if(flag==true){new google.maps.InfoWindow({content:
'<div id="node_content" class="gs2">
<div id="siteNotice"></div>
<h3 id="firstHeading" class="firstHeading">$reserved-article-title.getData(), $City.getData(), $Country.getData()</h3>
<hr class="m_spacer"/>
<div id="bodyContent">
<p class="gdes">$Description.getData()</p>
<img class="m_image" src="$Image.getData()"/>
</div>
</div>'}).open(map,gmarker);
flag=false;
}
It is liferay 6.1 so we don't get to enjoy the luxuries of the latest release.
Here is a screen shot of the two portlets and what they are displaying as well as an example of what we are aiming for. A website that is very similar to what we are attempting can be found here. Were hoping for conceptual ideas on how to differentiate the portlets not code necessarily. Your help is very much appreciated.
If you want to use the same JavaScript function from diverse portlets, then the better way is to put the JavaScript function to the Theme
http://www.liferay.com/documentation/liferay-portal/6.2/development/-/ai/creating-themes-and-layout-templates-liferay-portal-6-2-dev-guide-09-en
and call the function from the portlet-jsp with different properties.
I am not sure if I understood your question correctly, but have you considered creating a custom Display Style for your asset publisher to achieve this? If not, check this out:
http://www.rotterdam-cs.com/blogs/-/blogs/hooking-the-asset-publisher-for-custom-display-styles
You can create a new display style with your Map on top and the list below, everything in one jsp (unless you break it down off-course). I think it will possibly resolve your problem.
When clicking a button, my GWT application returns a PDF file embedded in an HTML page which looks something like:
<html><head></head>
<body marginwidth="0" marginheight="0" bgcolor="rgb(38,38,38)">
<embed width="100%" height="100%" name="plugin"
src="http://myserver/?cmd=getMyPdf" type="application/pdf">
</body>
</html>
Problem is it can take a while for the server to create this PDF file, so what I want is a waiting screen with a loading animation which can have the PDF file download in the background, and then when the file is done, display the page as described above.
One obvious way would be to display a loading page, send an asynchronous command to the server and then once the onSucceed method is called, call the page as normal. Downside is I'd have to add some server-side logic for making the PDF creation work in the background...
Is there any way to do this client-side with the GWT API?
Did you see this stackoverflow question Detect when browser receives file download? Basically the answer given is that you set a cookie in the return response and wait on the client side for this cookie to be set. This can be done easily with GWT as it has a Scheduler (for the repeated timer check) and easy access to Cookies. You still need to make some server changes, but you don't have to create a background process.
I don't have the full answer, but the following code works for me in Safari, and maybe you can modify it, to make it work with other browsers, too (?):
<html><head>
<script type="text/javascript">
function showPdf() {
document.getElementById("loading").style.visibility = "hidden";
document.getElementById("pdf").style.visibility = "visible";
}
</script>
</head>
<body marginwidth="0" marginheight="0" bgcolor="rgb(38,38,38)">
<div id="loading"
style="position: absolute; background-color: white;">Loading...</div>
<iframe id="pdf" width="100%" height="100%" name="plugin"
src="http://myserver/?cmd=getMyPdf" onload="javascript:showPdf();"
style="visibility: hidden;"></iframe>
</body>
</html>
This is pure JavaScript - but could certainly be done with GWT, too. Note, that I'm using an iframe instead of embed, because embed doesn't really support the onload method (and embed is not a standard HTML element, as far as I remember).
The reason, why this may not be the full answer, is that Chrome fires the onload event as soon as the PDF starts downloading (but after the PDF generation on the server side has finished). I'm not sure, if this is what you want?