Develop Reference

Edit drop--down list when modifying in codeigniter

help! I have two drop-down lists in which the comunas drop-down list is ciudades dependent, it works perfect. The problem comes when I need to bring the drop-down lists with the saved data to modify them. It will only get me to bring what is selected in the list of ciudades, but in the comunas it will not be able to achieve it.
Is there any way to do this? I have become somewhat confused.
This is my code!
<!-- language: lang-or-tag-here -->
THIS IS THE VIEW CODE
<label>Ciudad:</label><select id="idciudad" name="idciudad" required autocomplete="off">
<option value="0">Seleccione</option>
<?php foreach($listaciudades as $ciudad):?>
<option value="<?= $ciudad['idciudad']?>"
<?php if ($idciudad == $ciudad['idciudad']) : ?> selected<?php endif; ?>
>
<?= $ciudad['nombre']?>
</option>
<?php endforeach; ?>
</select>
<label>Comuna:</label> <select id="idcomuna" name="idcomuna">
<option value="0">Comuna</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$("#idciudad").change(function() {
$("#idciudad option:selected").each(function() {
idciudad = $('#idciudad').val();
$.post("<?php echo base_url(); ?>index.php/clientes/fillCiudades", {
idciudad : idciudad
}, function(data) {
$("#idcomuna").html(data);
});
});
});
});
</script>
THIS IS THE CONTROLLER CODE
public function fillCiudades() {
$idciudad = $this->input->post('idciudad');
if($idciudad){
$this->load->model('ClientesModel');
$comuna = $this->ClientesModel->getCiudades($idciudad);
echo '<option value="0">Comunas</option>';
foreach($comuna as $fila){
echo '<option value="'. $fila->idcomuna .'">'. $fila->nombre .'</option>';
}
} else {
echo '<option value="0">Comunas</option>';
}
}

First of all, you need to parse a variable with the saved idcomuna from the controller to the view, as you do with the saved idciudad. To do that, you must edit the code of the function that loads the view (you didn't include it on your question).
It would be something like (this code is for guidance only):
public function thefunctionthatloadstheview($idcliente) {
// The rest of your code here...
// I supposed you get the client data from database using a model, something like this...
$this->load->model('ClientesModel');
$cliente = $this->ClientesModel->getCliente($idcliente);
$your_view_data = array(
'idciudad' => $cliente->idciudad,
'idcomuna' => $cliente->idcomuna,
// The rest of the data like $listaciudades, etc...
);
$this->load->view('your_view', $your_view_data);
}
Once you have parsed the $idcomuna as you did with $idciudad, you must make two other changes in your view and the fillCiudades function.
The items of the second dropdown only load when the first one changes. To make it load when the page does, modify the Javascript:
<script type="text/javascript">
// Create a function to make POST request, parsing the value of the first dropdown (ciudades) and the saved value of idcomuna...
function fillCiudades_js() {
$.post("<?php echo base_url(); ?>index.php/clientes/fillCiudades", {
idciudad: $('#idciudad').val(),
idcomuna: <?php echo $idcomuna; ?>
}, function(data) {
$("#idcomuna").html(data);
});
}
$(document).ready(function() {
// Make a request when the page is ready...
fillCiudades_js();
// Make a request while the first dropdown changes...
$("#idciudad").on("change", fillCiudades_js());
});
</script>
Then, modify the fillCiudades function to get the value of idcomuna parsed through the Javascript code:
public function fillCiudades() {
$idciudad = $this->input->post('idciudad');
$idcomuna = $this->input->post('idcomuna');
if ($idciudad) {
$this->load->model('ClientesModel');
$comuna = $this->ClientesModel->getCiudades($idciudad);
echo '<option value="0">Comunas</option>';
foreach ($comuna as $fila) {
echo '<option value="'. $fila->idcomuna .'"' . ($idcomuna == $fila->idcomuna ? 'selected' : '') . '>'. $fila->nombre .'</option>';
}
} else {
echo '<option value="0">Comunas</option>';
}
}
With those changes, the second dropdown should be loaded with the saved value selected by default.
P.S. I couldn't test the code, so it's possible that there is some small error... but I hope it helps!

export multiple pdf files for multiple list using JasperPrint in java [duplicate]

I am not sure if this is possible using standard web technologies.
I want the user to be able to download multiple files in a single action. That is click check boxes next to the files, and then get all the files that were checked.
Is it possible - if so what basic strategy do you recommend. I know I can use comets technology to create server side events that trigger an HttpResponse but I am hoping there is a simpler way.

var links = [
'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.exe',
'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.dmg',
'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.jar'
];
function downloadAll(urls) {
var link = document.createElement('a');
link.setAttribute('download', null);
link.style.display = 'none';
document.body.appendChild(link);
for (var i = 0; i < urls.length; i++) {
link.setAttribute('href', urls[i]);
link.click();
}
document.body.removeChild(link);
}
<button onclick="downloadAll(window.links)">Test me!</button>

HTTP does not support more than one file download at once.
There are two solutions:
Open x amount of windows to initiate the file downloads (this would be done with JavaScript)
preferred solution create a script to zip the files

You can create a temporary set of hidden iframes, initiate download by GET or POST inside of them, wait for downloads to start and remove iframes:
<!DOCTYPE HTML>
<html>
<body>
<button id="download">Download</button>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$('#download').click(function() {
download('http://nogin.info/cv.doc','http://nogin.info/cv.doc');
});
var download = function() {
for(var i=0; i<arguments.length; i++) {
var iframe = $('<iframe style="visibility: collapse;"></iframe>');
$('body').append(iframe);
var content = iframe[0].contentDocument;
var form = '<form action="' + arguments[i] + '" method="GET"></form>';
content.write(form);
$('form', content).submit();
setTimeout((function(iframe) {
return function() {
iframe.remove();
}
})(iframe), 2000);
}
}
</script>
</body>
</html>
Or, without jQuery:
function download(...urls) {
urls.forEach(url => {
let iframe = document.createElement('iframe');
iframe.style.visibility = 'collapse';
document.body.append(iframe);
iframe.contentDocument.write(
`<form action="${url.replace(/\"/g, '"')}" method="GET"></form>`
);
iframe.contentDocument.forms[0].submit();
setTimeout(() => iframe.remove(), 2000);
});
}

This solution works across browsers, and does not trigger warnings. Rather than creating an iframe, here we creates a link for each file. This prevents warning messages from popping up.
To handle the looping part, we use setTimeout, which is necessary for it to work in IE.
Update 2021: I am aware that the "run code snippet" no longer works, but that's due to cross site cookie issues. The code works fine if deployed on your own site.
/**
* Download a list of files.
* #author speedplane
*/
function download_files(files) {
function download_next(i) {
if (i >= files.length) {
return;
}
var a = document.createElement('a');
a.href = files[i].download;
a.target = '_parent';
// Use a.download if available, it prevents plugins from opening.
if ('download' in a) {
a.download = files[i].filename;
}
// Add a to the doc for click to work.
(document.body || document.documentElement).appendChild(a);
if (a.click) {
a.click(); // The click method is supported by most browsers.
} else {
$(a).click(); // Backup using jquery
}
// Delete the temporary link.
a.parentNode.removeChild(a);
// Download the next file with a small timeout. The timeout is necessary
// for IE, which will otherwise only download the first file.
setTimeout(function() {
download_next(i + 1);
}, 500);
}
// Initiate the first download.
download_next(0);
}
<script>
// Here's a live example that downloads three test text files:
function do_dl() {
download_files([
{ download: "https://stackoverflow.com/robots.txt", filename: "robots.txt" },
{ download: "https://www.w3.org/TR/PNG/iso_8859-1.txt", filename: "standards.txt" },
{ download: "http://qiime.org/_static/Examples/File_Formats/Example_Mapping_File.txt", filename: "example.txt" },
]);
};
</script>
<button onclick="do_dl();">Test downloading 3 text files.</button>

The following script done this job gracefully.
var urls = [
'https://images.pexels.com/photos/432360/pexels-photo-432360.jpeg',
'https://images.pexels.com/photos/39899/rose-red-tea-rose-regatta-39899.jpeg'
];
function downloadAll(urls) {
for (var i = 0; i < urls.length; i++) {
forceDownload(urls[i], urls[i].substring(urls[i].lastIndexOf('/')+1,urls[i].length))
}
}
function forceDownload(url, fileName){
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.onload = function(){
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(this.response);
var tag = document.createElement('a');
tag.href = imageUrl;
tag.download = fileName;
document.body.appendChild(tag);
tag.click();
document.body.removeChild(tag);
}
xhr.send();
}

Easiest way would be to serve the multiple files bundled up into a ZIP file.
I suppose you could initiate multiple file downloads using a bunch of iframes or popups, but from a usability standpoint, a ZIP file is still better. Who wants to click through ten "Save As" dialogs that the browser will bring up?

A jQuery version of the iframe answers:
function download(files) {
$.each(files, function(key, value) {
$('<iframe></iframe>')
.hide()
.attr('src', value)
.appendTo($('body'))
.load(function() {
var that = this;
setTimeout(function() {
$(that).remove();
}, 100);
});
});
}

I agree that a zip file is a neater solution... But if you have to push multiple file, here's the solution I came up with. It works in IE 9 and up (possibly lower version too - I haven't tested it), Firefox, Safari and Chrome. Chrome will display a message to user to obtain his agreement to download multiple files the first time your site use it.
function deleteIframe (iframe) {
iframe.remove();
}
function createIFrame (fileURL) {
var iframe = $('<iframe style="display:none"></iframe>');
iframe[0].src= fileURL;
$('body').append(iframe);
timeout(deleteIframe, 60000, iframe);
}
// This function allows to pass parameters to the function in a timeout that are
// frozen and that works in IE9
function timeout(func, time) {
var args = [];
if (arguments.length >2) {
args = Array.prototype.slice.call(arguments, 2);
}
return setTimeout(function(){ return func.apply(null, args); }, time);
}
// IE will process only the first one if we put no delay
var wait = (isIE ? 1000 : 0);
for (var i = 0; i < files.length; i++) {
timeout(createIFrame, wait*i, files[i]);
}
The only side effect of this technique, is that user will see a delay between submit and the download dialog showing. To minimize this effect, I suggest you use the technique describe here and on this question Detect when browser receives file download that consist of setting a cookie with your file to know it has started download. You will have to check for this cookie on client side and to send it on server side. Don't forget to set the proper path for your cookie or you might not see it. You will also have to adapt the solution for multiple file download.

Angular solution:
HTML
<!doctype html>
<html ng-app='app'>
<head>
<title>
</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body ng-cloack>
<div class="container" ng-controller='FirstCtrl'>
<table class="table table-bordered table-downloads">
<thead>
<tr>
<th>Select</th>
<th>File name</th>
<th>Downloads</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = 'tableData in tableDatas'>
<td>
<div class="checkbox">
<input type="checkbox" name="{{tableData.name}}" id="{{tableData.name}}" value="{{tableData.name}}" ng-model= 'tableData.checked' ng-change="selected()">
</div>
</td>
<td>{{tableData.fileName}}</td>
<td>
<a target="_self" id="download-{{tableData.name}}" ng-href="{{tableData.filePath}}" class="btn btn-success pull-right downloadable" download>download</a>
</td>
</tr>
</tbody>
</table>
<a class="btn btn-success pull-right" ng-click='downloadAll()'>download selected</a>
<p>{{selectedone}}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
app.js
var app = angular.module('app', []);
app.controller('FirstCtrl', ['$scope','$http', '$filter', function($scope, $http, $filter){
$scope.tableDatas = [
{name: 'value1', fileName:'file1', filePath: 'data/file1.txt', selected: true},
{name: 'value2', fileName:'file2', filePath: 'data/file2.txt', selected: true},
{name: 'value3', fileName:'file3', filePath: 'data/file3.txt', selected: false},
{name: 'value4', fileName:'file4', filePath: 'data/file4.txt', selected: true},
{name: 'value5', fileName:'file5', filePath: 'data/file5.txt', selected: true},
{name: 'value6', fileName:'file6', filePath: 'data/file6.txt', selected: false},
];
$scope.application = [];
$scope.selected = function() {
$scope.application = $filter('filter')($scope.tableDatas, {
checked: true
});
}
$scope.downloadAll = function(){
$scope.selectedone = [];
angular.forEach($scope.application,function(val){
$scope.selectedone.push(val.name);
$scope.id = val.name;
angular.element('#'+val.name).closest('tr').find('.downloadable')[0].click();
});
}
}]);
working example: https://plnkr.co/edit/XynXRS7c742JPfCA3IpE?p=preview

To solve this, I created a JS library to stream multiple files directly into a zip on the client-side. The main unique feature is that it has no size limits from memory (everything is streamed) nor zip format (it uses zip64 if the contents are more than 4GB).
Since it doesn't do compression, it is also very performant.
Find "downzip" it on npm or github!

This works in all browsers (IE11, firefox, Edge, Chrome and Chrome Mobile) My documents are in multiple select elements. The browsers seem to have issues when you try to do it too fast... So I used a timeout.
//user clicks a download button to download all selected documents
$('#downloadDocumentsButton').click(function () {
var interval = 1000;
//select elements have class name of "document"
$('.document').each(function (index, element) {
var doc = $(element).val();
if (doc) {
setTimeout(function () {
window.location = doc;
}, interval * (index + 1));
}
});
});
This is a solution that uses promises:
function downloadDocs(docs) {
docs[0].then(function (result) {
if (result.web) {
window.open(result.doc);
}
else {
window.location = result.doc;
}
if (docs.length > 1) {
setTimeout(function () { return downloadDocs(docs.slice(1)); }, 2000);
}
});
}
$('#downloadDocumentsButton').click(function () {
var files = [];
$('.document').each(function (index, element) {
var doc = $(element).val();
var ext = doc.split('.')[doc.split('.').length - 1];
if (doc && $.inArray(ext, docTypes) > -1) {
files.unshift(Promise.resolve({ doc: doc, web: false }));
}
else if (doc && ($.inArray(ext, webTypes) > -1 || ext.includes('?'))) {
files.push(Promise.resolve({ doc: doc, web: true }));
}
});
downloadDocs(files);
});

By far the easiest solution (at least in ubuntu/linux):
make a text file with the urls of the files to download (i.e. file.txt)
put the 'file.txt' in the directory where you want to download the files
open the terminal in the download directory from the previous lin
download the files with the command 'wget -i file.txt'
Works like a charm.

To improve on #Dmitry Nogin's answer: this worked in my case.
However, it's not tested, since I am not sure how the file dialogue works on various OS/browser combinations. (Thus community wiki.)
<script>
$('#download').click(function () {
download(['http://www.arcelormittal.com/ostrava/doc/cv.doc',
'http://www.arcelormittal.com/ostrava/doc/cv.doc']);
});
var download = function (ar) {
var prevfun=function(){};
ar.forEach(function(address) {
var pp=prevfun;
var fun=function() {
var iframe = $('<iframe style="visibility: collapse;"></iframe>');
$('body').append(iframe);
var content = iframe[0].contentDocument;
var form = '<form action="' + address + '" method="POST"></form>';
content.write(form);
$(form).submit();
setTimeout(function() {
$(document).one('mousemove', function() { //<--slightly hacky!
iframe.remove();
pp();
});
},2000);
}
prevfun=fun;
});
prevfun();
}
</script>

I am looking for a solution to do this, but unzipping the files in javascript was not as clean as I liked. I decided to encapsulate the files into a single SVG file.
If you have the files stored on the server (I don't), you can simply set the href in the SVG.
In my case, I'll convert the files to base64 and embed them in the SVG.
Edit: The SVG worked very well. If you are only going to download the files, ZIP might be better. If you are going to display the files, then SVG seems superior.

When using Ajax components it is possible to start multiple downloads. Therefore you have to use https://cwiki.apache.org/confluence/display/WICKET/AJAX+update+and+file+download+in+one+blow
Add an instance of AJAXDownload to your Page or whatever. Create an AjaxButton and override onSubmit. Create an AbstractAjaxTimerBehavior and start downloading.
button = new AjaxButton("button2") {
private static final long serialVersionUID = 1L;
#Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form)
{
MultiSitePage.this.info(this);
target.add(form);
form.add(new AbstractAjaxTimerBehavior(Duration.milliseconds(1)) {
#Override
protected void onTimer(AjaxRequestTarget target) {
download.initiate(target);
}
});
}
Happy downloading!

Below code 100% working.
Step 1: Paste below code in index.html file
<!DOCTYPE html>
<html ng-app="ang">
<head>
<title>Angular Test</title>
<meta charset="utf-8" />
</head>
<body>
<div ng-controller="myController">
<button ng-click="files()">Download All</button>
</div>
<script src="angular.min.js"></script>
<script src="index.js"></script>
</body>
</html>
Step 2: Paste below code in index.js file
"use strict";
var x = angular.module('ang', []);
x.controller('myController', function ($scope, $http) {
var arr = [
{file:"http://localhost/angularProject/w3logo.jpg", fileName: "imageone"},
{file:"http://localhost/angularProject/cv.doc", fileName: "imagetwo"},
{file:"http://localhost/angularProject/91.png", fileName: "imagethree"}
];
$scope.files = function() {
angular.forEach(arr, function(val, key) {
$http.get(val.file)
.then(function onSuccess(response) {
console.log('res', response);
var link = document.createElement('a');
link.setAttribute('download', val.fileName);
link.setAttribute('href', val.file);
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
.catch(function onError(error) {
console.log('error', error);
})
})
};
});
NOTE : Make sure that all three files which are going to download will be placed in same folder along with angularProject/index.html or angularProject/index.js files.

Getting list of url with ajax call and then use jquery plugin to download multiple files parallel.
$.ajax({
type: "POST",
url: URL,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: data,
async: true,
cache: false,
beforeSend: function () {
blockUI("body");
},
complete: function () { unblockUI("body"); },
success: function (data) {
//here data --> contains list of urls with comma seperated
var listUrls= data.DownloadFilePaths.split(',');
listUrls.forEach(function (url) {
$.fileDownload(url);
});
return false;
},
error: function (result) {
$('#mdlNoDataExist').modal('show');
}
});

Here is the way I do that. I open multiple ZIP but also other kind of data (I export projet in PDF and at same time many ZIPs with document).
I just copy past part of my code.
The call from a button in a list:
$url_pdf = "pdf.php?id=7";
$url_zip1 = "zip.php?id=8";
$url_zip2 = "zip.php?id=9";
$btn_pdf = "<a href=\"javascript:;\" onClick=\"return open_multiple('','".$url_pdf.",".$url_zip1.",".$url_zip2."');\">\n";
$btn_pdf .= "<img src=\"../../../images/icones/pdf.png\" alt=\"Ver\">\n";
$btn_pdf .= "</a>\n"
So a basic call to a JS routine (Vanilla rules!).
here is the JS routine:
function open_multiple(base,url_publication)
{
// URL of pages to open are coma separated
tab_url = url_publication.split(",");
var nb = tab_url.length;
// Loop against URL
for (var x = 0; x < nb; x++)
{
window.open(tab_url[x]);
}
// Base is the dest of the caller page as
// sometimes I need it to refresh
if (base != "")
{
window.location.href = base;
}
}
The trick is to NOT give the direct link of the ZIP file but to send it to the browser. Like this:
$type_mime = "application/zip, application/x-compressed-zip";
$the_mime = "Content-type: ".$type_mime;
$tdoc_size = filesize ($the_zip_path);
$the_length = "Content-Length: " . $tdoc_size;
$tdoc_nom = "Pesquisa.zip";
$the_content_disposition = "Content-Disposition: attachment; filename=\"".$tdoc_nom."\"";
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
header($the_mime);
header($the_length);
header($the_content_disposition);
// Clear the cache or some "sh..." will be added
ob_clean();
flush();
readfile($the_zip_path);
exit();

<p class="style1">
<a onclick="downloadAll(window.links)">Balance Sheet Year 2014-2015</a>
</p>
<script>
var links = [
'pdfs/IMG.pdf',
'pdfs/IMG_0001.pdf',
'pdfs/IMG_0002.pdf',
'pdfs/IMG_0003.pdf',
'pdfs/IMG_0004.pdf',
'pdfs/IMG_0005.pdf',
'pdfs/IMG_0006.pdf'
];
function downloadAll(urls) {
var link = document.createElement('a');
link.setAttribute('download','Balance Sheet Year 2014-2015');
link.style.display = 'none';
document.body.appendChild(link);
for (var i = 0; i < urls.length; i++) {
link.setAttribute('href', urls[i]);
link.click();
}
document.body.removeChild(link);
}
</script>

How to clik on a text in the div

Could any one please help me in selecting the text (en_GW) under a div?
<-div class="x-combo-list-inner" id="cq-gen339" style="width: 253px; height: 300px;">
<-div class="x-combo-list-item x-combo-selected" ext:qtip="">en_GW<-/div><-div>
Note: Below code not working:
driver.findElement(By.className("x-combo-list-item x-combo-selected")).click();
Error
Compound class names are not supported. Consider searching for one class name and filtering the results.

// xpath
driver.findElement(By.xpath("//div[contains(#class, 'x-combo-list-item x-combo-selected')]")).click();
// css selector
driver.findElement(By.cssSelector("div.x-combo-list-item.x-combo-selected")).click();

$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function() {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
$(txt5).clickToggle(function() {
alert('First handler: ' + $(this).text());
}, function() {
alert('Second handler: ' + $(this).text());
});
i have no of elements if clicking div count will increase. at the same time click other div first will count will be 0 ?

How do I click a javascript button with htmlunit?

I'm working on an application that will automatically click a button on a webpage using htmlunit in Java. Only problem is that that button is a javascript button, so the standard getInputByName() won't work. Any suggestions with dealing with this? The code for the button is included below.
<a class="vote_1" id="1537385" href="/javascript%3Avoid%280%29/index"><img src="/images/parts/btn-vote.gif" alt="Btn-vote" /></a>
In addition, here's the other code for voting.
<div id="content"><script type="text/javascript" src="/js/scriptFeeds/voteArticle.js"></script>
Which leads to the following javascript:
var pressed = new Array();
$j(document).ready(function() {
var nr = $j("input#number_of_articles").val();
for(var i=1; i<=nr; i++){
$j("a.vote_"+i).click(function(){
var article = $j(this).attr("id");
$j('#'+article).hide();
if (!pressed[article]) {
pressed[article] = "yes";
jQuery.post('/vote-article', {
_token: $j("#_token").val(),
article_id: article
},function(data) {
$j("span.numberOfVotes_"+data.id).html(data.votes);
}, "json");
}
return false;
});
}
});

Try using this addOn for firefox, it records your actions and generates the HTMLUnit code for the same. may be it could help.
http://code.google.com/p/htmlunitscripter/

There's nothing special about clickable images. Something like this should work:
button = page.getHtmlElementById( "1537385" ) ;
page = button.click() ;
HtmlUnit will then run the Javascript and return the updated page.
If the id attribute of the 'a' tag isn't constant, you may need to use XPath to grab it.

I have a very similar link on one of my pages. If you can call .click() on any HtmlElement, it should be able to run associated Javascript. Here is my code (generated from HtmlUnitScripter):
HtmlElement element4 = null;
Iterable<HtmlElement> iterable5 = page.getAllHtmlChildElements();
Iterator<HtmlElement> i6 = iterable5.iterator();
while(i6.hasNext())
{
HtmlElement anElement = i6.next();
if(anElement instanceof HtmlImage)
{
HtmlImage input = (HtmlImage) anElement;
String[] elements = "http://example.com/pages/powerbutton.png".split( "/" );
if(input.getSrcAttribute().indexOf(elements[elements.length-1] )> -1 )
{
element4 = input;
break;
}
}
}
HtmlPage page = element4.click();

Can I trigger an IceFaces action using JavaScript?

If I have a simple button:
<ice:panelGroup>
<ice:commandButton value="foobar"
action="#{fileManager.openNoFlashVisiblePopup}" />
</ice:panelGroup>
Is it possible to trigger the action openNoFlashVisiblePopup using just javascript? I know that there IceFaces has a JavaScript bridge but I don't know see a simple way to do just this.
i need to do this because I have a chunk of JavaScript that detects Flash and I need to show a IceFaces popup.

One way is to get the button element by ID and call its click() function.
document.getElementById('clientId').click();
You only need to give the form and button a fixed id so that you can use the generated HTML ID as clientId in Javascript code.

I know I'm a little late in seeing this, but the correct way to handle this (minus perhaps the overly exhuberant error checking) is:
// There's a <div> that looks like: <div class="portletfaces-bridge-body" id="A8660">.
// We'll find it and pull out the value of the ID to build elementId like: A8660:wtfForm:editeventparent
var div = null;
var divCollection = document.getElementsByTagName("div");
for (var i=0; i<divCollection.length; i++) {
if(divCollection[i].getAttribute("class") == "portletfaces-bridge-body") {
div = divCollection[i];
break;
}
}
if (div == null){
alert("could not find div portletfaces-bridge-body.");
return;
}
// Pull the id out of divInnerText.
var id = div.getAttribute("id");
if (id == null){
alert("id was null");
}
// prepare initializes fields to null so rendered cannot begin until both itemId and parentId are set.
var prepare = document.getElementById(id + ":wtfForm:editeventprepare");
if (prepare == null){
alert("editeventprepare element was not found.");
return;
}
prepare.click();