Develop Reference

JSF redirect/open multiple url from a List<String>

Need to open or redirect to more than one page after a <p:commandLink/> (of the primefaces library) is clicked.
There is a List that contains the urls. I've already tried:
List<String> newUrlsList = returnNewUrlsList(oldUrl);
for (int i = 0; i < newUrlsList.size(); i++) {
//Executes the redirect for each of the elements in the list
//In every url, in the case of the method returnNewUrlsList() has encountered more than one URL
FacesContext.getCurrentInstance().getExternalContext().redirect(newUrlsList.get(i));
}
But only the first URL is opened (i=0).
Besides that I also tried javascript as below:
Link
Running:
<script type="text/javascript">
$('a.openPages').click(function (e) {
e.preventDefault();
window.open('http://www.google.com.br');
window.open('http://www.google.com.br');
window.open('http://www.google.com.br');
window.open('http://www.google.com.br');
window.open('http://www.google.com.br');
});
</script>
It works, but it is not the best method, because whenever it is necessary to open multiple tabs it displays the popup-blocked warning by the browser.
I would appreciate any good suggestion.
Thanks in advance!

You can't open several windows from Primefaces (nor any other serverside engine). You must do it from a client side, as you already did with Javascript.
You can use an EL expression to build a dynamic URL list if needed, but you'll have to use Javascript's window.open() to have more than one page opened at the same time.

As Oscar Pérez suggested it is not possible to open more than one tab from the managed bean (serverside). So we decided to display the pages that were found for the user so he can decide which one he wants to open.
So we put an dialog in the page that shows a list with the name of the pages:
<p:dialog appendTo="#(body)" header="Pages" id="urls" widgetVar="dlgUrls" modal="true" showEffect="fade" hideEffect="fade" resizable="false" draggable="false">
<h:form id="formUrls">
<br/>
<p:outputLabel value="The system has encountered more than one page." style="font-size: 14px"/>
<br/>
<p:outputLabel value="Select which you wants to open:" style="font-size: 14px"/>
<br/>
<p:dataList id="dataListUrls" value="#{bean.urlsList}" var="url" type="ordered" style="font-size: 14px">
<p:commandLink value="#{url.pageName}" actionListener="#{bean.redirect(url.address)}" target="_blank" ajax="false"/>
</p:dataList>
<br/>
<br/>
<p:separator/>
<div align="center" style="background-color: #DEDEDE">
<p:commandButton value="Close" oncomplete="PF('dlgUrls').hide()" style="font-size: 14px; width: 100px"/>
</div>
</h:form>
</p:dialog>
Thanks for the help!

Printing embeded PDFs in chrome

So I think Chrome and Firefox interpretation of DOM is screwing with me. I am trying to print a pdf from a browser (dynamically created) because I can't have the header and footer normally printed with printing an HTML page. Now I was just sending the PDF using fpdf from a php page and use the toolbar or right click and print but now the clients want a button on the page to initiate the print dialog but of course not print anything else but the PDF.... so I embeded it:
<embed
type="application/pdf"
src="print_pdf.php"
id="pdfDocument"
width="100%"
height="100%" />
and a button's onClick called
<script type="text/javascript">
function printDocument(documentId) {
((function(){return document.getElementById(documentId);})()).print();
//Wait until PDF is ready to print
if (typeof document.getElementById(documentId).print == 'undefined') {
setTimeout(function(){printDocument(documentId);}, 1000);
} else {
var x = document.getElementById(documentId);
x.print();
}
}
</script>
where documentID = "pdfDocument"
This worked great in IE9 but chrome and mozilla all say "Uncaught TypeError: Object # has no method 'print'"
so I tried to use thinking embed was causing improper object interpretation in chrome:
<object data="print_pdf.php" type="application/pdf" width="100%" height="100%" id="pdfD2">
alt : test.pdf
and called the same onClick, where documentID = "pdfD2"... "Uncaught TypeError: Object # has no method 'print'"
Then I tried an Iframe:
... "Uncaught TypeError: Object # has no method 'print'"
I'm so frustrated given Chrome is my go to... I even disabled chrome's builtin PDF view and used Adobe 10.xxx.. ARGH!!!
FYI, my simple button tags are:
<input type="button" value="Print Rx" onclick="printDocument('pdfDocument')">
<input type="button" value="Print Rx2" onclick="printDocument('pdfD2')">
<input type="button" value="Print Rx3" onclick="printDocument('pdfD3')">

I think the error is in the line:
((function(){return document.getElementById(documentId);})()).print();
which means that you "pack" (well possibly) uncompleted DOM into the closure.
It goes before the next line which checks for "undefined" print.
Apart from this, why do you use timeout, and not just use onload or DOMReady events?

AJAX Control Toolkit Control Editor Javascript Access

In my aspx, I have the following snippet of code, which correctly renders the Editor Control from the AjaxToolkit
<div>
<ajaxToolkit:Editor ID="Editor" runat = "server" />
</div>
In C#, to access the content of the Editor is simply:
Editor.Content = "some text here"
However in JavaScript, I am unsure how to access this. So far, I have tried:
var st =$find('<%=Editor.ClientID%>').get_content();
However the $find statement is returning a null value.

It should work. I tried the following code and editor component was found successfully.
<asp:ScriptManager runat="server" ID="ScriptManager" EnablePartialRendering="true">
<Scripts>
<asp:ScriptReference Path="Scripts/jquery-1.4.1.js" />
</Scripts>
</asp:ScriptManager>
<div>
<ajax:Editor runat="server" ID="Editor"></ajax:Editor>
</div>
<script type="text/javascript">
Sys.Application.add_load(function() {
Sys.Debug.traceDump($find('<%= Editor.ClientID %>'), "editor");
});
</script>
So, try to access you editor in Sys.Application.add_load event handler. If this will help you then the cause of the problem is that you tries to find component before page completes component initialization.

After playing around with this feature, I noticed that the HTML looks like this:
<iframe id = "Some iFrameId">
#document
<html>
<head>...</head>
<body>The text of the editor</body>
</html>
</iframe>
In the ASPX, I did the following to make my life a litle bit easier:
<div id ="myDiv" ClientIDMode="Static">
<ajaxToolkit:Editor ID="Editor" runat = "server" />
</div>
By doing this, I have simplified my problem to become find the iFrame enclosed in myDiv, which contains the HTML of the editor.
To do that in the JS
//get the iFrame
var myIframe = $("#myDiv, iframe") //this returns an array and myIframe[1] is the iFrame, which contains the text.
//get the HTML from the iFrame
var content = myIFrame[1].contentWindow.document.body.innerHTML;
Now content contains, what I was looking for. This is kind of long, and there might be an easier way, but after searching for a solution, I found most of them to be:
do a .get_content or some function call, which didn't work for my case.

JQuery Image Preview not working

I've seen several ways to display image preview but none of them seem to work or they work only in FF/Chrome.
Trying to keep it simple:
Markup:
<input type="file" id="logo-upload" onchange="changePreview();"/>
<br/>
<img src='#Url.Image("logo.png")' alt="Preview" id="logo-preview"/>
Javascript:
<script type="text/javascript">
function changePreview() {
var input = $('#logo-upload').val();
$('#logo-preview').attr('src', input)
.width(150)
.height(50);
}
</script>
When debugging input shows the correct local image path but preview never shows up.
Why and how can I get this to work (in all browsers ) ?
Thanks.

Try setting the $('#logo-upload').change(function(){}) instead of using onChange. I think that's a good start. Then put the jQuery inside $(document).ready(function(){}). That could be another issue, if you're setting the script before the elements exist on the page.
If you can post more code, it would be beneficial.
Also, for IE, you're going to run into permissions issues that are on the user, which you don't have control over (at least in this situation). So, in those cases, you'll either have to upload the image first, to get the image from the server, OR they'll have to change their security settings to allow for this type of content to be accessed.
<input type="file" id="logo-upload" />
<br/>
<img src="#Url.Image('logo.png')" alt="Preview" id="logo-preview"/>
<script type="text/javascript">
$(document).ready(function() {
$('#logo-upload').change(function() {
var input = $(this).val();
$('#logo-preview').attr('src', input).width(150).height(50);
})
});
</script>

How to add spin.js to dialog

Apologize for this question but my knowledge in JavaScript is quite minimal.
After the user press the button a dialog will popup so I want to add the spin.js into the dialog.
Dialog jsf file:
<script type="text/javascript">
function showStatus() {
document.body.style.cursor = 'wait';
statusDialog.show();
}
function hideStatus() {
document.body.style.cursor = 'default';
statusDialog.hide();
}
</script>
<p:commandButton id="genButton"
value="Generate Files"
widgetVar="startButton1"
disabled="#{נean.disableButton}"
actionListener="#{bean.generateUdm}"
onclick="PrimeFaces.monitorDownload(showStatus, hideStatus)"
ajax="false"
style="width:200px"
icon="ui-icon-shuffle">
<p:fileDownload value="#{bean.streamedContent}"/>
</p:commandButton>
<p:dialog modal="true" header="Generating fILE" showHeader="true"
position="center"
widgetVar="statusDialog"
draggable="false"
closable="false"
resizable="false">
????????????? ADD SPIN ???????????
</p:dialog>
I manage to add the spin to my web app but not via the dialog.
I would appreciate to get some code example.

If all that you want is adding loading image to dialog why don't you put a simple gif (can get one from google Or generate one by your self Ajaxload - Ajax loading gif generator)
and use simple <h:graphicImage to show it...
JSF 2 GraphicImage Example
?